Astro × microCMS × Cloudflare Pages でブログ付きサイトを公開するまで【総集編】

はじめに

このサイト cyber-blow.com を、2026年10月23日に公開しました。トップページ・技術ブログ・Webツールの一覧からなるサイトで、Astro で静的サイトを生成し、記事は microCMS で管理して、Cloudflare Pages から配信しています。

この記事は、プロジェクトの作成から公開までを Git のコミットログに沿って振り返る総集編です。作業の中身は、次の3つの連載に分けて1回ずつ詳しく書いています。

全体の流れをつかみたいときはこの記事を、特定の作業のやり方を知りたいときは各回を読んでください。

なお、開発は AI コーディングツールの Claude Code と対話しながら進めました（コミットにはすべて Co-Authored-By: Claude が付いています）。microCMS や Cloudflare の管理画面での設定は手作業です。

完成したサイトの構成

全ページをビルド時に HTML として生成し、microCMS で記事を公開したら Webhook で再ビルドする、という仕組みです。リクエストごとにサーバーで動く処理がないので、Cloudflare Pages にはビルド結果の HTML を置くだけで済みます。

コミットログ

公開までのコミットは17個です。右の列は、そのコミットを扱っている回です。

1〜7 は、あとで記事にしやすいように、ステップごとにブランチ（01-setup〜07-homepage）も残しています。各ブランチは前のブランチの続きなので、git diff 02-list-detail 03-highlight のように比べると、そのステップの変更だけを見られます。

最後の17番はコードの変更がない空コミットで、管理画面での作業と、途中で起きた問題と対応を本文に書き残したものです。公開の連載は、主にこのコミットを元にしています。

連載「Astro × microCMS でブログを作る」

サイト本体を作る連載です。

第1回：Astro プロジェクトの作成と microCMS への接続

create-astro でプロジェクトを作り、microcms-js-sdk で記事を取得するところまで進めます。microCMS のサービスドメインと APIキーは astro:env で必須の環境変数として宣言しました。こうしておくと、設定し忘れたときに、どの変数が足りないのかがビルドの時点で分かります。これが公開時のトラブルの切り分けに役立ちました。

→ 第1回を読む

第2回：記事一覧・記事詳細・ページ送り

記事一覧（12件ずつ）と記事詳細のページを作ります。一覧では microCMS の fields で本文を除いて取得し、転送量を抑えています。ページ送りは1ページ目を /blog/ に任せ、/blog/page/2/ から生成しています。

→ 第2回を読む

第3回：コードブロックのシンタックスハイライト

microCMS のリッチエディタが返すコードブロックの HTML を cheerio で読み込み、shiki でハイライトした HTML に置き換えます。ビルド時に処理するので、ブラウザ側の JavaScript は要りません。ファイル名付きのコードブロックにも対応しています。

→ 第3回を読む

第4回：OGP・サイトマップ・画像の最適化

canonical・OGP のメタタグ、サイトマップ、microCMS の画像API を使った WebP 変換を入れます。OGP 画像は 1200×630 の JPEG、本文の画像は srcset と遅延読み込みつきです。meta description が未入力の記事は、本文の冒頭から自動で作ります。

→ 第4回を読む

第5回：連載機能

microCMS に連載の API を作り、記事に「連載」と「連載の回」を指定できるようにします。「第N回」の番号は並び順から自動で振るので、途中に1本差し込んでも振り直しは不要です。連載の目次ページも作ります。この3つの連載も、この機能で並んでいます。

→ 第5回を読む

第6回：トップページをサイトの「顔」にして、ツール一覧を足す

ブログ専用だった構成を、トップページ（/）とブログ（/blog/）・ツール（/tools/）の各セクションに分けます。ツール一覧は microCMS で管理し、関連記事はドット区切りの fields で本文を除いて取得しています。途中で iCloud の競合コピーがコミットに混ざった件も紹介します。

→ 第6回を読む

連載「Cloudflare Pages で公開する」

できたサイトを公開する連載です。実際にハマった点を中心に書いています。

第1回：デプロイでハマった2つのこと

デプロイ前に、microCMS で fields に存在しないフィールド名を書いてもエラーにならないことに気づき、ダミーデータで返却値を確認しました。デプロイでは、ビルド設定がないまま「成功」して README.md や src/ 以下が誰でも見られる状態になった件と、環境変数名に全角スペースが入って「MICROCMS_API_KEY is missing」になった件を扱います。

→ 第1回を読む

第2回：404 ページと独自ドメイン

Cloudflare Pages は 404.html がないと SPA とみなし、存在しない URL にもトップページを 200 で返します（ソフト404）。404.astro を追加して正しく 404 を返すようにし、独自ドメイン cyber-blow.com を設定しました。

→ 第2回を読む

第3回：記事を公開したら自動で再ビルドする

静的サイトなので、microCMS で記事を公開しても、そのままではサイトに反映されません。Cloudflare Pages のデプロイフックを microCMS の Webhook に登録して、公開すると自動で再ビルドが走るようにしました。連載を公開して試したところ、29秒後に再ビルドが始まりました。

→ 第3回を読む

連載「技術ブログの収益化準備」

広告やアフィリエイトを始める前に整えたことの連載です。今後、アドセンスの審査などの回も足していく予定です。

第1回：ステマ規制に対応した PR 表記

2023年10月1日から、広告であることを隠した宣伝は景品表示法で規制されています。microCMS の記事に「PR表記」のスイッチを作り、ON にすると記事の冒頭に表記が出るようにしました。

→ 第1回を読む

第2回：プライバシーポリシーと Amazon アソシエイトの表記

プライバシーポリシーを Markdown で書いて Astro のページに読み込み、フッターに Amazon アソシエイトの表記を入れました。日本語の文中に書いた URL が、後ろの文章ごとリンクになってしまった件も紹介します。

→ 第2回を読む

第3回：GA4 の導入

Google アナリティクス 4 のタグを、Cloudflare Pages で main ブランチをビルドしたときだけ出すようにしました。測定ID を .env に入れても本番に反映されなかった理由も書いています。

→ 第3回を読む

公開後に残っていること

• www.cyber-blow.com の設定
• cyber-blow.net / .site / .online から .com への 301 リダイレクト
• 下書きのプレビュー機能
• 広告・アフィリエイトのタグを入れる部品

まとめ

Astro・microCMS・Cloudflare Pages でサイトを公開するまでを、コミットログに沿って振り返りました。やってみて特に大事だと感じたのは次の5点です。

1. astro:env で必須の環境変数を宣言しておくと、設定ミスがビルドの時点で分かる（作る 第1回）
2. microCMS の fields は綴りを間違えてもエラーにならないので、ダミーデータで実際の返却値を確かめる（公開 第1回）
3. Cloudflare Pages は、ビルド設定がないとリポジトリの中身をそのまま公開してしまう。「成功」でも公開された中身を確認する（公開 第1回）
4. Cloudflare Pages では 404.html を用意しないと、存在しない URL にトップページが 200 で返る（公開 第2回）
5. 静的サイト＋ヘッドレスCMS の組み合わせでは、Webhook とデプロイフックで再ビルドを自動化する（公開 第3回）