notion-blogで無料の個人ブログをつくってみました
Next.jsで個人ブログをつくった記事が結構あって、自分もやってみようと思って調べていると、notion-blogと出会いました。
これは、Vercel社のJJ Kasperさんのつくった、Next.jsを使って個人ブログをつくって、Notionと連携させるサンプルです。
公式の使用例が↓こんな感じです。
デザインも洗練されていますし、何よりNotionをエディタとしてブログ執筆に使えたらすごく嬉しいので、READMEに従って、自分用に個人ブログを構築しました。
大した作業はしてないのですが、Zennに記事がなかったので、せっかくなので書いてみます。
まずVercelにデプロイする
Vercelを使います。
Githubや公式サンプルの至るところにDeployボタンがあるので、それを押すとVercelに連携します。
（それかgit cloneでもできるっぽいです）
Vercelの環境変数にNOTION_TOKENとBLOG_INDEX_IDを指定する必要があります。
NOTION_TOKENは、ChromeでNotionのページを開いて、
F12（開発者コンソール） > Application > cookies > https://www.notion.so/ > token_v2
とたどっていくと、取得できます。
僕の環境だと156字でした。
BLOG_INDEX_IDは、Notion Blogのインデックスとなるページを指定します。
まずNotion側でインデックス用のページをつくって、そのURLを見ます。
https://www.notion.so/{user-id}/{page-title}-{blog-index-id}
↑ページURLはこのような構成になっているので、BLOG_INDEX_IDを抜きます。
NOTION_TOKENもBLOG_INDEX_IDも、結構ギリギリな取り方をしてますよね。
環境変数をセットしてデプロイすると、数分で完了すると思います。
これで、個人ブログ完成です。
Notion側のインデックスページを整備する
デプロイされたページにいくと、ほぼサンプルそのままのサイトができています。
デフォルトだとKasperさんの連絡先とかnotion-blogの解説とかが入ってるので、そこのカスタマイズも要るんですが、それは後回しで、とりあえずNotionのインデックスページを整備しましょう。
Blogページに行ってみると、コンテンツがない状態になっているはずです。
最初僕は試しにNotion側のインデックスページに色々書いてみたんですが、反映されなくて戸惑ったんですが、インデックスページのフォーマットが決まっていました。
Page, Slug, Published, Date, Authorsの5つの要素を持つインラインテーブルをつくる必要があります。
手動でつくっても認識してくれますが、公式が便利スクリプトを用意してくれています。
cd xxx // 任意のディレクトリに移動
git clone https://github.com/ijjk/notion-blog.git
cd notion-blog && yarn
NOTION_TOKEN='token' BLOG_INDEX_ID='new-page-id' node scripts/create-table.js
トークンとIDはデプロイのときに使ったものと一緒です。
ブログの書き方
テーブルの一要素がそのままブログの一記事として認識されます
プロパティのそれぞれの意味は下記です。
Page: 記事のタイトル
Slug: URL名。空欄だとタイトルがそのまま入る。
Published: チェックを入れると公開対象となり、外すと非公開になる（実質下書き機能）
Date: 公開日付。日付順にブログの表示がソートされることはなく、Notionのテーブルの上から。
Authors: 作者。Notionアカウントとリンクする。個人ブログなら削除してもいいと思う。削除可。
本文はページを開いて書いていきます。
Notion側のアイコンやヘッダーは特に反映されません。
使ってみて
Githubのスター数を見ても、よくできてるOSSであることは疑いないと思います。
MarkdownやTwitter連携/YouTube連携ができるので、無料で個人ブログを構築したくて、
細かいことは気にしないからとにかくNotionで書ければOK、という人には必要十分だと思いました。
ただ、個人的にはこれを自分用に使うのはちょっと微妙だなと感じました。
以下、個人的な不満点をあげていきます。
画像のアスペクト比が狂う
まず画像のアスペクト比がなんか狂うところです。
Notionでつば九郎の画像を貼ったとします。
かわいいですね。
つっ、つば九郎ーーーーー！
こんなに潰されて……
Notionで見えている風に表示されて欲しかった
もっと根本的なところとして、Notionでの見え方とnotion-blog上の見え方にだいぶ差があるので、そこが引っかかります。
もちろん高望みなのはわかってます。
文章のソースがNotion上にホスティングされて、notion-blogはあくまで公開先として考えれば、全然いいんだと思うんです。
NotionってそもそもWebで公開することができるので、SEOとか諸々考えなくていいなら、
インデックスページを普通にnotion.so/ で公開して、「これが僕の個人ブログです」でいいんじゃないかと思ってしまいました。
Notionをブログ化する有料サービスはいくつかある
Anotionしか知りませんでしたが、有料サービスでNotionをブログ化するものはいくつかあるみたいです。
ノーコード。
Notionで見えているようにブログで出したいのであれば、この辺がソリューションになるんですかね。
まとめ
というわけで、僕個人としてはnotion-blogをメインで使うことはないと思いますが、OSSだけでここまでできるのはすごいと思いました。
noteやはてなブログではなく、自分でブログをつくりたいんだ、そしてできればNotionをライターとして使いたいんだ、という人で、ある程度の技術とやる気がある人にはオススメできます。
ただあんまりソフトウェアの知見がない人（それが世の中の多数派だと思います）には、notion-blogはちょっとハードル高いだろうなとも感じました。
トークンとったり、git cloneしたりしますし……
セットアップ自体は書かれてる手順通りにやれば、トラブルさえなければなんとかなるかもですが、その後のカスタマイズにReactやNext.jsの知識が要求されるので、そこが壁ですかねえ。
↓こんな有料noteもあります。
上述の通り、トークンとページIDの取り方がだいぶ野蛮な取り方してるのですが、これもNotion API対応が進めば、もう少しちゃんと取れるかもしれませんね。
Discussion
ページIDについては、公式ドキュメントもそんな書きっぷりで、どうも公式推奨みたいです。
トークンについては、APIがベータ公開されていて、my integrationというページから追加するのが現在（2021/07/06）は正しいと思われます。