はじめに

今日、このブログ機能を立ち上げました。Notion で書いた記事が Astro でサイトに反映されるまでの仕組みについて、その日のメモを残しておきます。

立ち上げ時の構成判断 → 仕組みの全体像 → 苦労したところ → トーンの方針、の順でまとめます。

基礎となる知識

• Astro: 静的サイトジェネレーター。ビルド時にデータを取り込んで HTML に焼き込む
• Cloudflare Pages: 静的ファイルのホスティングサービス。Deploy Hook(後述)で再ビルドをキックできる
• Notion を CMS にする: Notion のデータベースを「記事置き場」として扱い、Status が Published のものをサイトに取り込む構成。notion-astro-loader ライブラリ経由で連携する

解説と使い方

どうしてこの構成にしたか

Onbit のメインサイトは Astro + Cloudflare Pages で動いています。あとからブログを足すときの選択肢は 3 つありました。

• メインサイトに /blog/ のパスを追加する
• 別プロジェクトとしてサブドメインに切り出す
• 別ドメインで完全に独立させる

迷った末、メインサイトに /blog/ を統合する形にしました。ヘッダーやフッター、配色(cream / sage / forest)といった既存の資産をそのまま使えること、ドメインが 1 本で済むこと、デプロイが一本化されてシンプルになること、が理由です。

仕組み

Notion で記事を書く
  ↓ Status を Published に変える
ブックマーク済み Deploy Hook を叩く
  ↓ Cloudflare Pages が再ビルド
1〜2 分でサイトに反映

Notion を CMS として扱うのが中心です。notion-astro-loader を介して、Notion のデータベースにある記事を、サイトのビルド時に取り込んでいます。

苦労したところ

ライブラリ側がまだ最新の Astro 6 に追いついていなくて、いくつか手当てが必要でした。

• .npmrc に legacy-peer-deps=true を書いて、ビルド側でも依存解決を通す
• Notion API の生プロパティを文字列・配列に展開するヘルパーを自作する
• 本文のレンダリングは Notion そっくりにせず、Onbit 用に独自のトーンで仕上げる

ひとつひとつは細かい話ですが、こういう「ライブラリの隙間を自分で埋める」作業がいちばん時間を使う部分でした。

トーンの方針

このブログは、手帳に書き留めるような気持ちで読めることを目指しました。罫線は最小限、タグはセリフ斜体で抑えめに、余白を広く取る。読み物として落ち着いて読めることを優先しています。

やってみた結果

• 1 日でメインサイトに /blog/ を統合し、Notion で書いて反映する流れまで動かせた
• 既存の配色とデザインをそのまま流用できたので、立ち上げの後も世界観がぶれない
• ライブラリの隙間を埋める作業に思ったより時間がかかったが、その分この後の運用は安定する見込み
• 後日(2026-05-02 ごろ)、この Notion 経由の構成は自前 CMS + Markdown 単一ソースに移行しました(cms-week-recap 参照)

まとめ

立ち上げ初日のメモとして、構成判断 → 仕組み → 苦労したところを残しておきました。Notion で書けば数手順でサイトに公開できる、というシンプルな運用がここからスタートしました。

参考文献

• 関連記事: dev-notes-launch-day-2026-04-29(同じ日の躓きメモ)
• 関連記事: build-blog-with-notion-and-astro(初期構成の詳細)
• 関連記事: cms-week-recap(後日この構成を捨てて自前 CMS へ移行した話)