黒宮丈治の備忘録 AUTHOR

Notion+Astro+Cloudflare Page構築つまづきメモ

Notion CMS

NotionをAstro + Cloudflareでヘッドレス化させるのに、最初はChatGPTと相談しつつ、途中からClaudeCodeに引き継いで、実装までいった。

今回やったことは、既存のカスタムドメインを設定しているこの備忘録ブログを、ヘッドレス化させる作業。

画像はR2にアップ。簡略化させるために一旦Raycastをつかって画像をアップ。

Cloudflare PageでAstroをつかって構築。

手間としては、記事を書くたびにプッシュしないといけないこと。このあたりはGitなどに直接置くものよりはひと手間かかるけど、普段つかってるNotion上で管理できることで、データベースとして手元にあるのがありがたい。

ということで、いろいろやったけど、途中でつまづいたことを、Claudeにまとめてもらった。備忘録的に残す

Cloudflareデプロイ設定

問題wrangler.toml に pages_build_output_dir を書いたが wrangler deploy が動かない

原因
Workers & Pages統合UIでは [assets] セクションが正しい形式

解決策

name = "your-worker-name"
compatibility_date = "YYYY-MM-DD"

[assets]
directory = "./dist"

ルートページがAstroデフォルト表示

問題
デプロイ後に / がAstroのウェルカムページになる

原因src/pages/index.astro がデフォルトテンプレートのまま

解決策

---
return Astro.redirect('/your-path', 301);
---

R2画像が403エラー（ホットリンク保護）

問題workers.dev ドメインからアクセスするとR2画像がすべて403

原因
R2カスタムドメインのホットリンク保護が workers.dev のRefererをブロック

解決策
本番カスタムドメインを先に設定してからテストする

カスタムドメイン追加で「既に使用中」エラー

問題
独自ドメインをWorkerに追加しようとするとエラー

原因
CloudflareのDNSに既存のAレコードが残っていた

解決策
該当のAレコードを削除 → Workerのカスタムドメインに追加

wwwがNotionページに繋がる

問題www.yourdomain.com にアクセスするとNotionページが開く

原因www のCNAMEが external.notion.site に向いたまま（プロキシなし）

解決策

  1. www のCNAMEを削除
  2. Workerのカスタムドメインに www.yourdomain.com を追加

DNS変更後もNotionに「公開中」と表示される

問題
DNS変更後もNotionが「yourdomain.comで公開されています」と表示

原因
Notion側のサイト設定にカスタムドメインの紐付けが残っていた

解決策
Notion → サイト設定 → 該当ドメインを削除

ファビコンがAstroデフォルトのまま（シークレットでも）

問題
デプロイ後もAstroのロゴファビコンが表示される

原因Layout.astro に <link rel="icon"> がなく、ブラウザが favicon.ico をキャッシュし続ける

解決策
data URI方式でSVGをインライン指定（ICOキャッシュを上書き）

<link rel="icon" href="data:image/svg+xml,<svg xmlns='<http://www.w3.org/2000/svg>' viewBox='0 0 32 32'><rect width='32' height='32' fill='%23000000'/><text x='16' y='23' font-family='sans-serif' font-size='18' font-weight='700' fill='%23ffffff' text-anchor='middle'>文字</text></svg>" type="image/svg+xml">

Notionブロックタイプが表示されない

問題table to_do toggle column_list synced_block がページに出ない

原因notion.ts の blockToHtml にこれらのブロックタイプの処理がなかった

解決策
各ブロックタイプに対応するHTML生成を追加する。未対応タイプは console.warn でログを出しておくと見落とし防止になる

oldpathリダイレクトがmeta refreshになる

問題Astro.redirect() を使っても真の301にならない

原因
SSGではサーバーサイドのHTTPレスポンスが存在しないため

補足
GoogleはMeta refreshを301相当として扱うため実用上は問題なし。完全な301が必要な場合はWorkerのルーティングで対応する

Raycast拡張でsharpが使えない

問題sharp でWebP変換しようとするとRaycastのバンドル環境でエラー

原因
sharpはネイティブバイナリ（darwin-arm64）を使うためRaycastと非互換。sips も試したがWebP出力に非対応

解決策
Homebrewの cwebp を child_process.execFile で呼び出す

brew install webp
execFile("/opt/homebrew/bin/cwebp", [inputPath, "-o", outputPath, "-q", "85"])

関連記事