Notion をそのまま CMS に。
Astro で高速静的サイトへ。
Notion Public API からコンテンツを取得し、MDX としてコンパイル。Notion のブロックを Astro コンポーネントにマッピングして高速・SEO 最適化された静的サイトを生成します。
使い方を選ぶ
2つの使い方
テンプレートとして使う
このリポジトリをテンプレートにして、Notion でコンテンツを書き、 Vercel / Netlify にワンクリックでデプロイ。5分で Notion ブログを立ち上げられます。
クイックスタートを見る →npm パッケージとして使う
既存の Astro プロジェクトに notro を追加するだけ。 ローダーとコンポーネントをドロップインで利用できます。remark-nfm は Astro なしでも使えます。
API リファレンスを見る →使い方
3 ステップで始められる
Notion にコンテンツを書いて、コマンド一つでデプロイ
テンプレートを使う
GitHub で "Use this template" をクリックしてリポジトリを作成。 または上の Deploy ボタンから直接デプロイも可能。
Notion と環境変数を設定
Notion インテグレーションを作成し、NOTION_TOKEN と NOTION_DATASOURCE_ID を環境変数に設定するだけ。
Vercel / Netlify にデプロイ
npm run build で静的サイトを生成。Vercel や Netlify に接続して自動デプロイを設定しましょう。
機能
必要なものがすべて揃っている
Notion をヘッドレス CMS として使うためのフルスタック構成
Notion Content Loader
Astro Content Collections を Notion Public API で動かす。last_edited_time による差分ビルドで高速なインクリメンタルビルドを実現。
コンポーネントマッピング
コールアウト・カラム・トグル・KaTeX 数式など、Notion ブロックを MDX evaluate() + コンポーネントマッピングで Astro コンポーネントに変換。
TailwindCSS 4
Notion コンポーネントごとにスコープされたスタイル。classMap prop でクラス上書き、bodyClass でページ別テーマに対応。
画像の最適化
Notion の期限付き S3 プリサインド URL から X-Amz-* パラメーターを除去し、ビルド間でキャッシュを再利用するカスタム Astro 画像サービス。
ページネーション付きブログ
タグ・カテゴリフィルタリング対応の多ページブログ。ピン留め投稿・前後記事ナビゲーションもすぐに使えます。
npm ライブラリとして公開
notro パッケージを任意の Astro プロジェクトに追加するだけ。ローダーとコンポーネントをドロップインで利用できます。
モノレポ構成
3 パッケージで責務を分割
それぞれ独立して利用・公開できる設計
remark-nfm
packages/remark-nfm/
Notion Flavored Markdown 用の純粋な remark プラグイン。前処理・:::callout ディレクティブ・コールアウト変換をまとめて担当。Astro や Notion API に依存せず単独で npm 公開可能。
notro
packages/notro/
公開 npm ライブラリ本体。Astro Content Loader + MDX コンパイルパイプライン + Notion ブロックコンポーネントを提供。remark-nfm を内部で利用。
notro-tail
apps/notro-tail/
デプロイ可能な Astro 6 ウェブサイト。notro の実装例として、ブログ・固定ページ・タグフィルタを含むテンプレート。