GatsbyJSとNotionを使ってヘッドレスCMSブログを作る

本記事では、NotionをヘッドレスCMSとして活用し、GatsbyJSで静的ページ化してブログを構築・公開する方法を簡単に解説します。

なぜGatsbyJS + Notionなのか？

もともと自身のポートフォリオサイト（mkitlab.com）をGatsbyJSで構築していたことが一つの理由です。

一方で、ブログはNotionのデータベースを使って書き、Super.soで公開していました。しかし、カスタムドメインを使うためには有料プランが必要になるため、それならばGatsbyJSを利用したポートフォリオサイトに統合してしまおうと考えたのが今回のきっかけです。

また、GatsbyJSを使って静的ページ化することで、Notion APIの実行回数を記事公開時のみに抑えられるメリットもあります。

主な使用ライブラリ

• gatsby-source-notion-api：Notion APIからデータを取得する
• gatsby-remark-images-remote：Notionの画像を静的化
• gatsby-remark-link-card：記事内リンクをカード形式で表示

実装のポイント

Notionのカバー画像を処理する

gatsby-source-notion-apiのREADMEでは、ブログのカバー画像はデータベースの画像プロパティで設定する方式でしたが、Notion記事のページカバーをそのままブログのカバー画像として利用したかったので、そのように実装しました。

Notionのページカバーは外部URL（特にexternalタイプ）の場合、リンク切れのリスクがあるため、gatsby-source-filesystemのcreateRemoteFileNodeを利用して画像を静的化します。

// gatsby-node.js
const { createRemoteFileNode } = require('gatsby-source-filesystem');

exports.onCreateNode = async ({ node, actions, store, cache, createNodeId }) => {
  const { createNodeField, createNode } = actions;

  if (node.internal.type === 'Notion' && node.raw.cover) {
    try {
      const coverUrl = node.raw.cover.type === 'external' ? node.raw.cover.external.url : node.raw.cover.file.url;

      const fileNode = await createRemoteFileNode({
        url: coverUrl,
        parentNodeId: node.id,
        store,
        cache,
        createNode,
        createNodeId,
      });

      if (fileNode) {
        await createNodeField({
          node,
          name: 'remoteCoverImage___NODE',
          value: fileNode.id,
        });
      }
    } catch (error) {
      console.error('Error creating remote file node:', error);
    }
  }
};

Notion記事内の画像URLのパーミッション切れを防ぐ

Notion記事内の画像URLは1時間で有効期限が切れます。このためgatsby-remark-images-remoteを利用し、ブログ公開時に画像を静的化しておきます。

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: ['gatsby-remark-images-remote'],
      },
    },
  ],
};

内部リンクをリンクカード化する

記事内のリンクをカード形式で表示すると、視覚的に見やすくなります。今回は@okaryo/gatsby-remark-link-cardを導入しました。

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: ['@okaryo/gatsby-remark-link-card'],
      },
    },
  ],
};

こちらの記事で開発経緯などが書かれていますが、NotionのページでURLをBookmark（リンクカード）形式にすると、Markdownとしては空行を挟んだただのURLになっています。このプラグインではウェブページにするときにそれをそのままリンクカードに変換してくれるのでのですごく助かりました。

https://blog.okaryo.studio/20240102-released-gatsby-remark-link-card/

Notionからの自動デプロイ

Notionの更新をトリガーとして、Gatsbyの再ビルドを自動化すると、運用が格段に楽になります。Webhookを設定し、CI/CDツール（Cloudflare PagesやNetlifyなど）で自動デプロイしましょう。

詳しくは以下を参照してください。

https://web-team.winc.ne.jp/posts/notion-webhook/

まとめ

GatsbyJSとNotionを活用すれば、高速かつ運用性の高いブログを簡単に構築できます。
実際に運用しているポートフォリオは下記からご覧いただけます。

https://mkitlab.com