Help us understand the problem. What is going on with this article?

notionバックエンドのzeit製ヘッドレスCMS“Notion Blog”が激アツ🔥

rUlEEqFS.jpeg

2020/01/14 昨日突如 zeitからNotionをバックエンドにしたヘッドレスCMSが発表されました!!

この内容が激アツなので、アツいポイントや使い方を紹介します。

アツいポイント

Notionで編集できる 📝

Notionってみなさん使ってますか??

Notionは「Evernote + Google Calendar + Trello」みたいなサービスなのですが、とにかく便利です。

そのNotionを編集画面に使えるのはかなり筋がいいですね。

こんな感じで、記事の一覧があり、公開、非公開もチェックをつけるだけです✨
image.png

編集はNotionでいつも通りに書けばいいだけです!!

image.png

めちゃくちゃ速い ⚡️

zeitが作った公式notionブログ にアクセスして見てぜひ体感して欲しいのですが、本当に画面の遷移がサクサクです。

スコアはこんな感じでした!!95点で申し分ないです!
image.png

フルカスタマイズ可能 🛠

OSSとして公開されているソースコードを編集すればデザインや、機能の追加もできます!!

MIT License🕶

ライセンス周りも問題ありません!!

公開方法

1. (ない人は)zeitのアカウントを作成する

https://zeit.co/homeにアクセスして、アカウントを作りましょう。

2. デプロイの設定をする

deployに飛んで、notionのトークンやblogの記事を生成する場所を設定します。

image.png

NOTION TOKEN は notionにアクセスして、開発者コンソールを開きCookieの token_v2 という値を設定します。
ちなみに、Chromeの場合は 開発者コンソール => Application => Cookies => token_v2 でアクセスできます。
image.png

BLOG INDEX ID はブログの管理画面となるページを指定します。
Notionで新規ページ作成で、Blog等の名前をつけてページを作成します。
Templateはemptyで大丈夫です。

Blog という名前を設定したのであれば、URLは
https://www.notion.so/Blog-ac36sfjkla863e46c789bb932nksld3a05sjkdfjk みたいな感じになると思います。

その値の、 Blog- を抜いた ac36sfjkla863e46c789bb932nksld3a05sjkdfjkBLOG INDEX ID になります。

そして、Continueを押下。

後々カスタマイズするつもりであれば、Gitのリポジトリを作っておくと良いでしょう。

image.png

Deployを押すと少し時間がかかって完了です。

アクセスしてみる

zeitの管理画面から先ほど作ったblogにアクセスできれば完了です!!
image.png

まとめ

こんなにいいヘッドレスCMSが無料で使えるなんていい時代だな〜と本当に思います。

わからないこと等あれば、お気軽にご質問ください〜。

ではでは!

参考情報

https://notion-blog.now.sh/
https://github.com/ijjk/notion-blog

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away