Notionを利用してBlogサービスを作成してみた

ドキュメント管理サービスであるNotionで作成した記事を独自のサービスに載せ替えて、ブログサービスを開発しました。今アクセスしているこのページがそうです。

最近、Notionを使ってBlogサービスを作成するのが流行っているのもあり、何番煎じかわかりませんが、私も真似して開発してみました。「Notion blog」で検索すると結構な件数がヒットする。。。

SuperというノーコードでNotionを利用してWebサービスを公開できるサービスもあります。先日、1ヶ月だけ課金して使ってみました。ただ、このサービスを利用するにしても、がっつりレイアウトを変更するにはコーディングが必須になってきます。その労力を払うのであれば自分で自作したほうが安上がりな気がしました。superをそこまで使い込んでいないので間違った認識かもしれませんが。

以下は、開発作業するにあたって参考にさせて頂きました。特に@otoyo さんのeasy-notion-blogはとても参考になりました。かなり作り込んでいてすごい。。。

• Notion Blog が簡単に始められる easy-notion-blog の紹介
• Next.js x Notion APIで個人ブログをつくりました
• https://github.com/ijjk/notion-blog

利用技術

• CMS: コンテンツ管理
• Notion
• FW
• Next.js + Vercel
• 画像配信(後述)
• AWS S3 & CloudFront

Next.jsをちゃんと触ったことがなかったので勉強がてら採用しています。Reactで開発したことがあれば、そこまで違和感なく扱える感じでした。

Notion API

https://developers.notion.com/reference/intro

このAPIを経由して自身のNotionで管理しているコンテンツを取得することができます。Notionでは、ページに登録されているそれぞれの行をblockという単位で登録しています。このAPIレスポンスをパースして、html elementに変換する作業(a, ul, code, etc.)が結構しんどいです。今回作成したサイトもまだ一部のblock typeにしかまだ対応しきれていません。合間をみて徐々に対応させていこうと思います。

画像について

Notion APIでは各記事に登録されている画像URLは有効期限付きの状態で配信されています。そのため、最終リクエストから一定期間空いてしまった画像については期限切れとなってしまいます。今回は、SSG(Static Site Generation)での実装にこだわってみたかったので、Notion APIで取得した画像リンクからデータを取得し、自分で管理しているS3 bucketに転送&AWS CloudFront経由で配信することで画像の有効期限を気にせずにキャッシュ管理できるようになっています。パフォーマンスを気にしないとか、SSRでの実装でも問題ないという場合はここまで対応する必要はないかと思います。

サイトパフォーマンス

Chromeのdeveloper toolのLighthouseでこのサイトを計測した結果は以下の通りでした

まだちゃんと作り込んでいない部分はありますが、Performanceのスコアが高く出ています。

まだ色々と手探り感があるので、綺麗に整えたらコードを公開しようかと思います。