名称未設定_1

Notionでブログを作ろう!

🍼この記事は blog.yahiro.me(個人ブログ) から転載した物です。
https://blog.yahiro.me/create-notion-blog

Notionっていいよね

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

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

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

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

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

ZEIT製 Notion Blogが素晴らしい!

画像1

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

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

そんな感じで、非エンジニアでも簡単にブログを構築できます!
サンプルサイトはこちらからみることができます。

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からデプロイ

画像2

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

2. 必要な情報を入力

画像3

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

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

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

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

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

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

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

画像4

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

画像5

4. Notion Tokenを取得

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

画像6

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

画像7

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

画像8

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

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

5. Blog Index IDを取得

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

画像9

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

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

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

6. Deployしよう

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

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

画像10

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

アクセスしてみよう!

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

画像11

カスタマイズ するには?

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



この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

6
クラウドソージングなどを通じてWebデザイナー、フロントエンドエンジニアとして活動しています。 🏠ポートフォリオ: https://yahiro.me
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。