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

![rUlEEqFS.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82779/74f624c3-9489-4684-3194-aff022bc8bf8.jpeg)


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

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Excited to share our long-awaited Next.js + Notion statically-generated blog example with the same tech as <a href="https://t.co/HVcLCVUO5w">https://t.co/HVcLCVUO5w</a>!<br><br>- Edit via Notion<br>- Blazing fast<br>- JAMstack based<br>- Always available<br>- Fully customizable<br>- Incremental SSG<br>- MIT Licensed<a href="https://t.co/fD2vWxq2Y6">https://t.co/fD2vWxq2Y6</a></p>&mdash; JJ Kasper (@_ijjk) <a href="https://twitter.com/_ijjk/status/1216812149361860608?ref_src=twsrc%5Etfw">January 13, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


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

## アツいポイント

### Notionで編集できる 📝
Notionってみなさん使ってますか？？

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

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

こんな感じで、記事の一覧があり、公開、非公開もチェックをつけるだけです✨
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82779/a9461597-848e-380b-1dfc-a436e4f4e311.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82779/7f1a8c79-9908-4ea6-be56-b4d103e29795.png)

### めちゃくちゃ速い ⚡️
[zeitが作った公式notionブログ](https://notion-blog.now.sh/blog) にアクセスして見てぜひ体感して欲しいのですが、本当に画面の遷移がサクサクです。

スコアはこんな感じでした!!95点で申し分ないです！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82779/53e6315b-2555-f3b2-4340-d47e7f3a0f87.png)



### フルカスタマイズ可能 🛠
OSSとして公開されているソースコードを編集すればデザインや、機能の追加もできます！！

### MIT License🕶
ライセンス周りも問題ありません！！


## 公開方法

### 1. (ない人は)zeitのアカウントを作成する
[https://zeit.co/home](https://zeit.co/home)にアクセスして、アカウントを作りましょう。
### 2. デプロイの設定をする
[deploy](https://zeit.co/new/project?template=https://github.com/ijjk/notion-blog/tree/master)に飛んで、notionのトークンやblogの記事を生成する場所を設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82779/b7d14923-f042-16c6-032d-7e0bd480af81.png)

`NOTION TOKEN` は notionにアクセスして、開発者コンソールを開きCookieの `token_v2` という値を設定します。
ちなみに、Chromeの場合は `開発者コンソール => Application => Cookies => token_v2` でアクセスできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82779/81414722-842f-6bb1-bf12-a33a9be15b60.png)

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

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

その値の、 **Blog-** を抜いた `ac36sfjkla863e46c789bb932nksld3a05sjkdfjk` が `BLOG INDEX ID` になります。

そして、Continueを押下。

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82779/ec197d69-9ff0-de42-485c-b481ea32ef78.png)

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

### アクセスしてみる
zeitの管理画面から先ほど作ったblogにアクセスできれば完了です！！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82779/936f6db2-8d81-6b89-a36e-21cee129edd6.png)

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

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

ではでは！

## 参考情報
[https://notion-blog.now.sh/](https://notion-blog.now.sh/)
[https://github.com/ijjk/notion-blog](https://github.com/ijjk/notion-blog)



[^example]: Static Site Generation