Notion を 11ty の CMS として使う

2025年12月11日
#Notion #11ty #Web
This post thumbnail

💡 このサイト (dd.necora.cc)は、Notion で作成した記事を Markdown 形式でローカルに保存し、静的サイトジェネレータ（以下、SSG）である 11ty でビルドして作成されています。「Markdown 形式でローカルに保存」の部分を自作したのですが、便利なライブラリのおかげで割とすんなり作ることができました。とは言え「テンプレートがあれば楽なのになぁ…」と思わなくもなかったので、そんな過去の自分のためにメモを残します。

必要なモノ

  • Notion アカウント
    アカウント作成については他サイトに任せます。
  • Node.js
    ローカル PC で最新版が動作するようにします。
  • Eleventy
    よりシンプルな静的サイトジェネレータ
  • Linux Bash（または Windows GitBash）
    それ以外の環境の場合、適宜読み替えてください。 Notion で記事を作成し、静的サイトジェネレータ 11ty でローカル環境に静的サイトをビルドします。デプロイ（ホスティング）については他サイトにお任せします。

Notion でデータベースを作成

サイドバーの「プライベート」横の「＋（ページを追加）」をクリック

クリックで拡大

次の画面の最下部「ここから始める」の「データベース」をクリック

「空のデータベース」をクリック

次のような空のデータベースができるので

クリックで拡大

プロパティを追加するなどして次のようにします。

クリックで拡大

プロパティの種類についてはアイコンで判断してください

Notion でページを作成

左端のセルにカーソルを乗せると「開く」アイコンが現れるので、これをクリックするとページの編集をすることができます。

サンプル ※このサンプルは Notion の「Web 公開」で公開したものですが、見え方は編集画面とほとんど同一なのでご参考までに。

ローカルに静的サイトジェネレータ (SSG) を準備

11ty Starter Project のオフィシャルブログテーマ「eleventy-base-blog」を使用します。ローカルに git clone するか ZIP ファイルをダウンロードして解凍してください。

クリックで拡大

eleventy-base-blog（または eleventy-base-blog-master）ディレクトリで npm install を実行後、 npm start でサンプルサイトがビルドされ、ローカルサーバが起動します。通常 http://localhost:8080/ でアクセスできます。問題なくビルドされているか確認してください。確認後は Ctrl+C で終了します。

ローカルに Notion-to-MD v4 をインストール

Notion の記事を Markdown に変換する Node.js パッケージです。リリース版 v3 ではなく、アルファ版 v4 をインストールします。v4 は v3 の機能に加え、テキストカラーなど文字レベルの変換設定が可能になっています。@notionhq/client は Notion から記事を取得するためのパッケージです。

npm install notion-to-md@alpha @notionhq/client

次の Gist コードを eleventy-base-blog ディレクトリに保存します。
→ n2e-example.cjs

次に同ディレクトリ内の eleventy.config.js ファイルをエディタで開き、

export default async function (eleventyConfig) {

という行の下に

	// Notion から記事を取得
	eleventyConfig.on("eleventy.before", async () => {
		const { n2e } = await import("./n2e-example.cjs");
		await n2e();
	});

を追加します。

Notion で接続（コネクト）を作成する

なんかインテグレーションとやらを開発して接続を管理するみたいです。 データベース画面の右上端の３点メニュー（・・・）をクリックしてメニューを開き、「接続」→ 「インテグレーションを開発」を選択します。

次の画面で「新しいインテグレーション」をクリック。（アプリで作業している場合、ブラウザが開くかもしれない）

「新しいインテグレーション」画面で「インテグレーション名」を入力、「関連ワークスペース」を選択（たぶんひとつしかない）、「種類」は「内部」として「保存」をクリック。

「インテグレーションが作成されました」の下の「インテグレーション設定」をクリック。

「機能」画面で「コンテンツを読み取る」にチェック。場合によって「コンテンツを更新」にもチェックを入れます。「保存」をクリック。

データベース画面に戻り、もう一度「接続」メニューを開くと一覧に先ほど作成したインテグレーション名があるので選択します。次の画面で「はい」を選択。

データベース ID とコネクトトークンを取得する

前の方で作成した Notion のデータベースのテーブルビューの画面の右上３点メニューを開き「リンクをコピー」します。この URL は次のようになっています。

https://www.notion.so/12a34（中略）789yz?v=12a（中略）89&source=copy_link

この例で云えば 12a34（https://www.notion.so/ の後）から、789yz（?v= の前）までの部分がデータベース ID です。

また、サイドバーの「設定」をクリックすると「アカウント」画面が開くのでサイドバーの「コネクト」をクリック、先ほど作成したインテグレーション名の右端にある３点メニューを開き「トークンをコピーする」ことができます。

notion-base-blog ディレクトリに適当な名前のシェルスクリプトファイルを作成し（serve.sh とします）、次のように記述します。

#!/usr/bin/env bash

export NOTION_DBID=データベースID
export NOTION_TOKEN=コネクトトークン

npm start

実行してみる

serve.sh を実行します。 bash serve.sh 問題がなければ最初の動作確認と同様ローカルサーバが起動するので、新しく作成したページを確認することができます。
eleventy-base-blog/content/blog/ に Notion の記事から生成された Markdown ファイルと画像が保存されます。最終的な静的サイトのファイルは eleventy-base-blog/_site/ に生成されます。

サンプル ※「Notion でページを作成」のサンプルを cloudflare pages にデプロイしたものです。

ミミィ

「n2e-example.cjs」は文字通りサンプルだから必要に応じて各自カスタマイズしなさいヨ！

ねこら

記事（ファイル）削除の自動化とかの便利機能は無いのでヨロシク…

コメント

Gravatar 対応

Notion を 11ty のヘッドレス CMS として使ってみる