blog.yahiro.me

てきとうにかこう。

Notionでブログを作りたい!

2020年1月18日
技術 (Notion,React.js)

Notionいいよね。

Notionっていいですよね。すごい使い心地いいし、チームでも個人でも簡単に使える上、とっても便利なメモアプリです。というかメモアプリ自体を超越しちゃっています。

こんなに便利だと、こんなこと思っちゃいますよね。

Notion https://www.notion.so/

「Notionだけでブログを作りたい」

しかし、Notionには公式なAPIは存在せず、これまでは独自のシステムを構築する必要がありました。

ですが、2020/01/14 突如 ZEITからNotionをバックエンドにしたヘッドレスCMSが発表されたのです!

ZEIT製 Notion Blogが素晴らしい!

An image from Notion

かんたんに良いところをまとめてみたいと思います。

  1. セットアップが簡単
  2. 2分ぐらいで完成!
  3. フルカスタマイズ可能!

そんな感じで、非エンジニアでも簡単にブログを構築できます!

サンプルサイトはこちらからみることができます。

My Notion Blog https://notion-blog.now.sh/

ちなみにこのブログ自体もNotion Blogを活用して作成しています。

blog.yahiro.me https://blog.yahiro.me/

ブログを作ってみよう!

0. ZEITのアカウントを作る

https://zeit.co/home

にアクセスして、アカウントを作成してください。

1. ZEITからデプロイ

こちらのサイトにアクセスし、下の「▲ Deploy」をクリックします https://notion-blog.now.sh/

An image from Notion

2. 必要な情報を入力

1のボタンをクリックすると、このような画面が現れます。

An image from Notion

Project Nameを入力します。ここは自由に入力して構いません。

ここで、最初の関門です。 Notion Tokenと、Blog Index IDを入力する必要があります。次のセクションで取得して入力しますので、このタブはそのままにしておいてください。

3. Notionでブログ専用のページを作成

ページを新規に作ります。タイトルは自由な名前で結構です!

その次に「Table - Inline」を挿入します。

挿入したら、プロパティを下記のようにしてください。こちらのプロパティ名については、全く同じになるように入力しましょう!

An image from NotionAn image from Notion

こんな感じになればOKです。

4. Notion Tokenを取得

Notion Tokenを取得するには、Chromeで「⌘Command + ⌥Option + I」を押して開発者ツールを立ち上げます。

An image from Notion

こんな画面が出てきたら、上にあるApplicationをクリックします。

An image from Notion

Applicationタブを開いたら、左サイドバーから、Cookiesの左側の三角をクリックし、出てきた「https://www.notion.so」をクリックします

An image from Notion

そうすると、token_v2という名前の部分がありますので、Value欄の内容をコピーして、

2.のタブの「Notion Token」に入力します。

5. Blog Index IDを取得

該当ページのURLのこの部分になります。

An image from Notion

ページタイトルを日本語以外にしていると「blog-」などが先頭につく場合がありますが、ハイフンから後をコピーし、

2.のタブの「Blog Index ID」に入力します。

そして「Continue」ボタンをクリックします。

6. Deployしよう

このような画面に飛ばされます。

後々カスタマイズするつもりなら、Gitのリポジトリを作っておくと良いと思います。

An image from Notion

しばらくすると、デプロイが完了します!

アクセスしてみよう!

An image from Notion

Visitをクリックすると、作成されたBlogにアクセスできます!

カスタマイズ するには?

Githubにレポジトリを作成して、チョビチョビ更新していくのが良いかと思います。

Notion BlogはReact.js + NEXT.jsで作成されたアプリケーションなので、どんどんカスタマイズしていくと本当になんでもできそうです...

終わり

ということで、興味がある方は、お試しくださいな!

Notion https://www.notion.so/

My Notion Blog https://notion-blog.now.sh/

 

Twitterのフォローもお願いします!

https://twitter.com/Yahimotto