「Astro + Cloudflare + GitHubの組み合わせなら、無料で爆速のブログが公開できるらしい」。私はネットで、そんな記事を見かけました。しかし、最新のWeb技術の具体的な手順なんて、私にはさっぱり分かりませんでした。
※この記事でいう「無料」は、ブログの構築・公開に各サービスの無料枠を使うという意味です。独自ドメインの取得・更新や、利用するAIサービスの料金は別です。無料枠にも上限があります。静的ファイルの配信については、Cloudflareの料金・制限の説明を確認してください。
そこで、AI（Codex）に向かってお願いをしてみました。「AstroとCloudflareとGitHubを組み合わせて無料で構築したいのだけど、よく分からないから手伝って！」そうやって、手取り足取り教えてもらいながら、何度かチャットで会話を重ねてみました。すると……なんと、あれよあれよという間にブログのシステムが完成してしまった（というより、構築してもらった）のです！
しかも、実はここだけの話があります。ブログに投稿している記事の文章も、私が書いているわけではありません。「こんな内容で書いて」とAIにお願いして書いてもらったものです。さらに、その記事のテイストに合うようなアイキャッチ画像も、AIに作ってもらっています。見出し（H2）直下に差し込む画像も、文章に合わせてAIに作ってもらっているのです。
つまり、私はAIと会話しているだけです。それだけで、システムの構築から執筆、イラスト作成までがすべて完結してしまったというわけです。
ただ、AIが作った文章は、日本語が少し不自然だったり、内容が「？」と思うときがたまにあります。そのため、公開前にしっかりと自分の目でチェックして、修正をする必要はあります。それでも、イチから自分で書くよりは断然ラクです。
しかし、ここで大きな問題が発生しました。ブログが「できちゃった」のは良いものの、どうやって構築されたのかが全く分かりません。裏側でどんなシステムが、どのように連携して動いているのでしょうか。ブログの持ち主である私自身が、全く分かっていなかったのです。
これでは今後の運用もできません。何かトラブルが起きても、完全にお手上げ状態です。そこで、説明の記事をCodex自身に書いてもらいました。
それがこちらの記事です。AstroブログをCloudflare Workersで公開した記録
ところが、私には読みづらく感じられました。内容が専門的すぎるだけでなく、文章もちょっと変で、よく分かりませんでした。そこで、Codexとさらに会話を重ねながら、改めてこの記事を作成することにしたのです。
このブログを設計し、裏側のシステムをまるっと管理してくれているCodexに、改めて依頼をしました。「さっきの記事をもっと初心者にもわかりやすく説明して！」とお願いしたのです。そして、「ここってどういう意味？」「ここはこう直して」と何度かやり取りを続けました。
その結果として出来上がったのが、今あなたが読んでいるこの記事です。ブログの構成と公開までの仕組みを、初心者にもわかるようにまとめ直しました。
この記事は、AIの力で「できてしまった」ブログの裏側を紐解いたものです。AI自身に解説してもらって仕組みを理解した、私の備忘録でもあります。
1. そもそも、このブログは何で作られているの？（Astroの役割）
WordPressを使わず「Astro」を採用
AIの解説：「WordPressではなく、Astroというシステムを使いました」
ブログといえば、WordPress（ワードプレス）が有名です。しかし、今回Codexが選んだのは「Astro（アストロ）」というツールでした。そして、「Fuwari」というブログ用のデザインテンプレートを使っています。
このブログでは、WordPressのようにログインして記事を書く管理画面を用意していません。私は自分のパソコン上で、記事のファイルを編集する運用にしています。「Markdown（マークダウン）」というテキストファイルに、直接文字を書いていく仕組みです。
記事の文章もAIが書いている
Markdownは、見出し（#）や太字（**）などを簡単な記号で表現するためのルールです。そのルールで書いた文章を、Markdownファイルとして保存します。
ただ前述の通り、このMarkdownファイルの中身を書いているのも実はAIです。私が「コーヒー器具のお手入れについて書いて」と指示を出します。すると、AIが文章を書いてくれます。画像も一緒に作ってくれます。私はそれらを、指定されたフォルダ（例：src/content/posts/coffee-care/）にポンポンと保存しているだけなのです。
ページを先に作っておくから、表示の負担が少ない
Astroは、このテキストファイルや画像を読み込みます。 そして、読者がブラウザで見られる「Webページ（HTML）」にあらかじめ変換してくれるツールです。
このブログは、読者がページを開くたびにデータベースから本文を取り出す仕組みを使っていません。あらかじめ作ったページを配るので、表示に必要な処理を少なくできます。ただし、実際の表示速度は画像の大きさや通信環境にも左右されます。
Astroには、アクセスに応じてページを作る機能もあります。ここで説明しているのは、このブログで採用した「先にページを作っておく」方式です。Astro公式の説明でも、この違いを確認できます。
2. ブログのデータはどこに保存されているの？（GitHubの役割）
GitHubという「非公開の金庫」
AIの解説：「記事や画像、設定ファイルはGitHubという金庫にしまってあります」
管理画面がないなら、AIが書いてくれた記事データや画像はどこに保存されるのでしょうか。Codexがデータの保管先に指定したのは、「GitHub（ギットハブ）」というサービスでした。
公開する記事や画像、ブログの設定ファイルは、このGitHubに保存しています。パスワードなどの秘密情報は保存しません。ここは「非公開リポジトリ」と呼ばれる場所です。一般の人には公開せず、私や、私がアクセスを許可した人・連携サービスだけが利用できる保管庫です。
アカウント作成からAIがお手伝い
完成したブログのページ自体は、世界中の誰でも見られます。 一方、設定ファイルや変更履歴を置くリポジトリ自体は非公開です。ただし、公開した記事の本文や画像は、ブログを通じて誰でも読んだり保存したりできます。
実は作業開始当初、私はGitHubのアカウントすら持っていませんでした。最初は自分のパソコンの中だけで、ブログの形を作りました。その後、Codexに手伝ってもらいながら、初めてGitHubのアカウントを作りました。そして自分用の保管庫を用意して、ようやくデータを移したのです。
3. どうやってインターネットに公開しているの？（Cloudflareの役割）
全自動で公開する「Cloudflare Workers」
AIの解説：「Cloudflare Workersが、全自動でブログを組み立てて配っています」
では、GitHubの金庫に入れたデータを、どうやって世界中に公開しているのでしょうか。
独自ドメイン（nishikobe.com）で表示させるためには、仕組みが必要です。
ここで登場するのが「Cloudflare Workers（クラウドフレア ワーカーズ）」です。Codexは、私の代わりに公開用のサーバーとしてCloudflareを設定してくれました。
そして、このブログ専用の「Worker（働くロボットのようなもの）」を一つ作ってくれていました。
複雑な設定もAIと二人三脚で
このWorkerに、先ほどのGitHubをつなぎます。
すると、「GitHubに新しい記事のデータが届いたら、自動的にブログを組み立てて公開してね」という指示が働きます。
このような自動化の設定（Workers Builds）が組み込まれていたのです。
Cloudflareの公式資料にも、GitHubなどへのプッシュをきっかけにビルドとデプロイを行う仕組みが説明されています。
もちろん、私はCloudflareのアカウントも持っていませんでした。 GitHubのアカウント作成に続き、Cloudflareのアカウント開設もCodexにお願いしました。
この複雑そうな自動連携の設定まで、すべてCodexに手取り足取り手伝ってもらいました。完全に二人三脚で準備を進めたのです。
4. 自動公開の罠！パソコンで保存しただけでは更新されない
ブログを更新するための3つのステップ
ゼロから一緒にアカウントを作り、AIが設定してくれた仕組みは本当に素晴らしいです。
しかし、初心者の私が一番戸惑ったのが「記事の更新方法」でした。
「パソコンでファイルを上書き保存しただけでは、ブログは一切更新されない」という事実です。
Codexに「AIが書いた記事を保存したのに、ブログが変わらないよ！」と泣きつきました。
すると、ブログを更新するには以下の3つのステップを踏む必要があると教わりました。
- ファイルの保存： AIが生成した文章と画像を、パソコン上のフォルダに保存する。
- Git（ギット）へのコミット： 「ここを追加した」という変更履歴をパソコン内に記録する。
- GitHubへのプッシュ： 記録した変更履歴を、インターネット上のGitHubへ送信する。
このブログでは、3番目の「GitHubの本番用ブランチ（main）へプッシュする」という行動がスイッチになります。
これで初めて、Cloudflareの自動公開ロボットが動き出すのです。
「ビルド」と「デプロイ」の違いでつまずく
さらに、Cloudflareが動き出した後も安心できません。公開処理には2つの段階があります。
- ビルド（生成）： Markdownのテキストファイルを、ブラウザで読めるWebページ（HTML）に変換・組み立てる作業です。
- デプロイ（公開）： 組み立て終わったWebページを、実際のサーバーに配置して世界中から見られる状態にすることです。
「ビルドに成功しました！」というメッセージが出ても、まだ終わりではありません。
その後の「デプロイ」が終わっていなければ、新しい記事は読者に届かないのです。
実際、GitHubとの連携エラーで権限が足りないことがありました。
古いサイトのキャッシュが残り続けるなど、デプロイの段階で何度もつまずきました。
だから今では、Cloudflareの管理画面で「デプロイが完了したか」を最後まで必ず見届けるようにしています。
5. 人間とAIで分担！失敗を防ぐ「公開前の入念なチェック体制」
プログラムチェックはCodex（AI）の担当
自分がよく分かっていないシステムだからこそ、いきなり本番に公開するのはとても危険です。
そこで今は、作業の役割分担をしています。
-
Codex（AI）の担当：裏側でのプログラム自動チェック 公開前には、Codexに以下のコマンド（検証プログラム）を実行してもらう運用にしています。 検査できる範囲はコマンドごとに異なります。
pnpm check（型などのチェック）：AstroやTypeScriptのコードに、型の不整合などがないか。pnpm build（ビルド）：手元のパソコン環境でエラーなくHTMLを作れるか。pnpm verify（このブログ専用の検証）：生成したページのリンク先ファイルや画像が存在するか、代替テキストなどの設定があるか。pnpm secrets:check（このブログ専用の検査）：秘密情報によくある文字列のパターンが、ファイルに混ざっていないか。
目視確認は私（人間）の担当
- 私（人間）の担当：プレビュー画面の目視確認 Codexのチェックが終わった後、まずはパソコン上でプレビュー画面を開きます。 AIが書いてくれた文章がおかしくないかをチェックします。 AIが作ってくれたアイキャッチ画像や見出し下の画像が、意図した通りに綺麗に並んでいるか。 人間の感覚が必要なこの部分を、自分の目でしっかりと確認します。
最終確認と、別サイトへの「安全装置」
- 最終確認と公開のスイッチ： Codexから、それぞれのチェック結果の報告を受けます。検査を通過しても、文章の正しさや、あらゆる不具合がないことまで保証されるわけではありません。 それを確認したら、私が最終的な公開スイッチである「GitHubへのプッシュ（送信）」を行います。
実を言うと、「後々、2つ目や3つ目の新しいブログも作れるようにしておきたいな」と思い立ちました。
そこで、Codexに頼んで複数サイトを管理できる仕組みを、追加で構築してもらっていました。
現時点では、まだ別サイトは一つも存在していません。 しかし将来を見据えて、パソコン内のフォルダ構造はすでに複数サイト対応になっています。
そのため、設定を間違えて架空のサイトや別の場所にデータを送ってしまわないように注意が必要です。
公開前には「送信先の名前（設定ファイル）が本当にこのブログ用のもので合っているか？」をチェックします。
Codexと一緒に最終確認する安全装置も整えています。
【まとめ】AIが組んだブログ公開の仕組み・対比表
Codexに教えてもらった「ブログ公開までの作業フェーズ」をまとめました。
また、「採用されているツールの役割」も一覧にしています。私のような初心者でも理解できるように作成した表です。
1. ブログ公開までの3ステップと人間・AIの役割分担
| ステップ | 作業する場所 | 主に行うこと | 誰が担当するか（注意点） |
|---|---|---|---|
| ① 執筆・事前確認 | 自分のパソコン （ローカル環境） | ・AIによる記事執筆と画像作成 ・コマンドによる各種エラーチェック ・プレビューでのレイアウト目視確認 | AI：記事執筆、画像作成、エラーチェック（自動） 人間：プレビューの目視確認 ※「上書き保存」しただけでは公開されません。 |
| ② 記録・送信 | 自分のパソコン → GitHub （非公開リポジトリ） | ・パソコン内で変更履歴を記録（コミット）する ・GitHubのmainへ送る（プッシュ） | 人間：公開の最終スイッチを押す ※このブログでは、mainへのプッシュが自動公開の合図になります。 |
| ③ 変換・公開 | Cloudflare （本番サーバー環境） | ・テキストをWebページに変換（ビルド） ・サーバーに配置して公開（デプロイ） | Cloudflareの自動ロボット ※「ビルド」と「デプロイ」は別工程です。完了まで見届けましょう。 |
2. ブログを裏側で支えるツールたちの役割
| ツール・用語名 | システム分類 | AI（Codex）が設定した役割 |
|---|---|---|
| Astro / Fuwari | ページ生成ツール / ブログテーマ | 記事データから高速なWebページ（HTML）を生成するシステム。「Fuwari」というデザインをベースに使用。 |
| Pagefind | サイト内検索エンジン | 記事を変換するタイミングで検索用のデータを作り、ブログ内でキーワード検索ができるようにする仕組み。 |
| GitHub | ソースと変更履歴の保管サービス | 記事・画像・設定を保管する「金庫」。本番用ブランチへのプッシュを、Cloudflareで公開する合図にする。 |
| Cloudflare Workers / Workers Builds | ページの配信 / ビルド・公開の自動化 | Workers BuildsがGitHubへのプッシュを受けてページを生成・公開し、Workers Static Assetsが完成したページや画像を読者へ配信する。 |
| Markdown | テキスト記述言語 | 管理画面の代わりに記事を書くためのルール。この中身の文章もAIに書いてもらっています。 |
「無料で公開したい」とAIにお願いしただけで出来上がってしまったブログですが、仕組みを紐解いてみると、複数の最新ツールが賢く連携していることが分かりました。
最初は各サービスのアカウントすら持っておらず、システムの裏側もサッパリでした。
しかし、アカウント作成から記事の執筆、画像の生成、そして面倒なエラーチェックまで、すべてAI（Codex）に任せています。
そうやって二人三脚で運用することで、自分だけでは難しかったブログ作りを進められました。
仕組みを少しずつ理解しながら、記事の内容と公開結果は、これからも自分の目で確かめていこうと思います。