はじめに

このサイト自体の仕組みをメモしておきます。「Notion で書いて、Status を Published に変えるだけでサイトに反映される」というよくある構成を、Onbit ではどう組み立てたかの記録です。

注: この構成は数日後に自前 CMS + Markdown 単一ソースに乗せ替えています(cms-week-recap 参照)。この記事は当時の設計の記録として残しています。

基礎となる知識

• Astro: 静的サイトジェネレーター。ビルド時に外部 API を叩いて記事を取得する仕組みを書ける
• Notion API: Notion の DB(データベース)から記事を取り出すための公開 API
• Cloudflare Pages の Deploy Hook: 任意のタイミングでビルドをキックできる Webhook URL
• Notion Automation: DB の値が変わった時に Webhook を飛ばせる Notion の組み込み機能
• MCP(Model Context Protocol): Claude などの AI ツールが外部サービスと話すためのプロトコル

解説と使い方

やりたかったこと

• Notion で記事を書く
• 公開したら、サイトに即時で反映される
• デザインは Notion ライク、でもサイトとしての体裁は保つ
• MCP 経由で Claude に記事作成を手伝ってもらう

構成

[Claude (Notion MCP)] → [Notion DB: Onbit Blog]
                              ↓ Webhook
                        [Cloudflare Pages]
                              ↓ ビルド
                        [サイトに反映]

使う技術

• Astro: 静的サイトジェネレーター。ビルド時に Notion API を叩いて記事を取得
• notion-astro-loader: Notion DB を Astro Content Collection として扱えるローダー
• react-notion-x: Notion ブロックを Notion そっくりの見た目でレンダリング
• Cloudflare Pages: ホスティング + Deploy Hook
• Notion Automation: Status=Published になったら Webhook 送信

即時反映の仕組み

Notion の Automation を使って、Status プロパティが Published に変わったら Cloudflare Pages の Deploy Hook URL に Webhook を飛ばします。それを受けて Cloudflare Pages がビルドを走らせ、約数十秒でサイトが更新されます。

やってみた結果

• Notion で書いて Status を切り替えるだけ、という意図した運用は実現できた
• ただ、ライブラリの隙間(Astro 6 と peer dep の衝突など)を埋める手当てが思ったより必要だった
• 数日運用してみたところ、商品として「お客さんに自分のサイトの管理画面で書いてもらう」体験を作りたい場面が出てきた → 自前 CMS に移行することにした(cms-week-recap)

まとめ

Notion + Astro の組み合わせは「自分一人で書く前提なら」かなり快適でした。商品の都合で乗り換えはしましたが、この構成自体は今でも個人ブログには素直にお勧めできます。

参考文献

• 関連記事: blog-launch-day(同日の立ち上げメモ)
• 関連記事: dev-notes-launch-day-2026-04-29(立ち上げ時のハマりどころ)
• 関連記事: cms-week-recap(自前 CMS への移行)
• notion-astro-loader