2026.04.29

備忘録: Onbit を 1 日で動かすまでに踏んだ穴

技術日記

はじめに

今日、Onbit のサイトに /blog/ を実装するところまで進めました。短い時間でできた一方、いくつか地味な穴に落ちたので、未来の自分のためにメモを残しておきます。

基礎となる知識

Cloudflare Pages の Deploy Hook: ビルドをキックする URL。HTTP メソッドの仕様に注意が必要
peer dependency: ライブラリが「このメジャーバージョンの依存ライブラリと一緒に使ってね」と宣言する依存関係。最新版に追従していないと npm install が落ちることがある
Notion API: ページのプロパティを直接読み書きできる API。UI 経由の保存が確実か疑わしい時に「実状」を確認できる

解説と使い方

今日やったこと

既存サイトのコピーの細かい修正(フッター・ナビ・values)
メインサイトに /blog/ を統合
Notion を CMS として使う仕組みを Astro に組み込む
Cloudflare Pages の Deploy Hook を npm スクリプト化(npm run deploy:blog)

躓き

穴 1: Cloudflare の Deploy Hook はブラウザで開くと GET になる

Hook の URL をブックマークしてクリックしたら 1001 method_not_allowed が返ってきました。Cloudflare の Deploy Hook は POST 専用。ブックマークレットで fetch(..., {method: 'POST'}) を仕込むか、curl で叩くか。今回は npm スクリプトに落として npm run deploy:blog で済むようにしました。

穴 2: Astro 6 と一部の Notion ライブラリが噛み合わない

notion-astro-loader の peer dependency が Astro 4-5 までで、Astro 6 にすると npm install が ERESOLVE で落ちます。apps/website/.npmrc に legacy-peer-deps=true を書いて回避しました。Cloudflare Pages 側のビルドでもこれが効きます。

穴 3: Notion で Status を変えたつもりが変わってない

Status を Draft → Published に変えたつもりで Deploy Hook を叩いたら、ライブに記事が出てきませんでした。何度ビルドしても同じ。Notion API で直接ページを取りに行ったら、Status は依然 Draft のままだった。Notion の自動保存タイミングや、別プロパティを編集していたなどで、変えたつもりが保存されていないケースがあります。変更後はリロードして目視確認が無難です。

困った時は API で直接書き換えられます:

curl -X PATCH https://api.notion.com/v1/pages/<page_id> \
  -H "Authorization: Bearer <api-key>" \
  -H "Notion-Version: 2022-06-28" \
  -H "Content-Type: application/json" \
  -d '{"properties":{"Status":{"select":{"name":"Published"}}}}'

やってみた結果

3 つの穴は全部回避策で踏み越えて、ブログ機能を 1 日で動かせるところまで持ってこれた
「ブラウザでクリック」前提の運用は罠が多い。ターミナルから 1 コマンドで叩ける形にしておくと、後の自分が助かる
ライブラリの peer dependency は最新メジャーに追従していないことがある。.npmrc で押し通すのは負債だが、運用優先で踏める
動かない時は API で実状を取りに行く。UI は「自分の認識」が正しいかどうかを保証してくれない

まとめ

仕込んでおいたのはこのあたり:

apps/website/scripts/deploy-blog.sh — Hook を POST で叩く
package.json の deploy:blog — npm run deploy:blog で走る
.env に DEPLOY_HOOK_URL(.gitignore 済み)

これで明日からは Notion で書いて Status を切り替えて、ターミナルで一発、で済むはず、という気持ちで終えました。

参考文献

関連記事: blog-launch-day(同日のセットアップ全体の記録)
関連記事: build-blog-with-notion-and-astro(構成の詳細)
Cloudflare Pages の Deploy Hook ドキュメント