GitHub・Cloudflare・Codexで、無料ブログをつくる

AIやプログラミングで試したことを、そのまま流してしまうのはもったいない。使った方法や、途中でつまずいたことを残せる場所が欲しくなりました。

そこで、GitHub・Cloudflare・Codexを使って、新しいブログをつくることにしました。今回の立ち上げ自体も、最初の記事にします。

まず決めたのは、無料で始めること

最初から独自ドメインや有料サーバーを契約せず、記事を書いて公開する流れをつくることを優先しました。

扱うテーマは、AIとプログラミングの活用記録です。完成したものだけでなく、どんな方法を選び、どこで困り、何を変えたのかも書いていきます。

ブログ名は、ひとまず「AI実験ノート」にしています。

使うものと、それぞれの役割

使うもの	担当すること
GitHub	記事とサイトのコードを保存し、変更履歴を残す
Cloudflare	ブログをインターネットに公開する
Codex	記事の下書き、コードの作成、表示や動作の確認を手伝う
Astro	Markdownで書いた記事から、ブログのページをつくる

Astroには、複数のMarkdown記事をまとめて管理する仕組みがあります。記事のタイトルや日付、タグを本文と一緒に管理できるので、このブログにも使いました。Astroの公式ドキュメント

公開先には、Cloudflare Pagesを選びました。Astroは記事をあらかじめHTMLに変換でき、PagesはそのHTMLやCSSを配信できます。GitHubへの更新をきっかけに自動公開する仕組みも使えます。Cloudflare PagesのAstroガイド

今回つくったブログの形

最初の構成は、記事一覧、記事ページ、このブログについてのページです。スマートフォンでも本文を読みやすいように、余白と文字の大きさを調整しました。

記事はMarkdownファイルで保存します。タイトル、説明文、公開日、タグ、下書きかどうかを、ファイルの先頭に書きます。

---
title: "AIで試したことを記事にする"
description: "試した方法と、分かったことを記録します。"
publishedAt: "2026-10-02T09:00:00+09:00"
tags: ["AI活用"]
draft: true
---

下書きは公開用のページから除外するようにしました。記事を書き始めた段階では下書きにして、内容を確認してから公開する運用です。

立ち上げでつまずいたこと

ログインは、接続方法ごとに確認する

作業を始めて確認すると、公開設定に使うブラウザーではGitHubとCloudflareへのログインが必要でした。GitHubの連携が使えることと、ブラウザーや端末で公開作業ができることは別でした。

その後、GitHubは端末から接続できることを確認できました。一方、Cloudflareの端末からの公開用認証は期限が切れていました。ブラウザーでCloudflareへのログインを確認し、管理画面からPagesのGit連携を設定する方法で進めました。

Cloudflareへのログインと、GitHubの記事をCloudflareに渡す許可も別の操作でした。GitHubの許可画面では、接続対象をこのブログのリポジトリ1件に限定しました。

ログインが必要な間も、記事とブログ本体の作成は進められます。ただし、ファイルをつくっただけではブログの公開は完了しません。GitHubへの保存、Cloudflareでの公開設定、公開URLの表示確認までを済ませる必要があります。

Gitの保存先も、実際の環境で確認する

GitHubへ保存する段階で、作業フォルダーの所有者と、Gitを動かすユーザーが異なることも分かりました。Gitが所有者の違いを検出し、そのままでは保存作業を進められませんでした。

今回はセキュリティの例外設定を追加せず、管理用の新しいフォルダーに確認済みのソースをコピーし、そこでGitの管理を始めました。その後、非公開のGitHubリポジトリへ保存できました。

「無料」の範囲も確認する

2026年10月2日に確認したCloudflare Pagesの公式説明では、Functionsを呼び出さない静的ファイルへのリクエストは無料・無制限です。サーバー側の処理を動かす場合は、別の利用枠や料金が適用されます。Cloudflare Pagesの料金

今回のブログは、記事を事前にHTMLへ変換して配信する構成です。独自ドメインは購入せず、Cloudflareが提供するURLで始める方針にしました。

Cloudflare PagesのFreeプランには、月500回のビルド上限があります。GitHub Actionsの利用枠は別で、Codexの利用費もブログの配信費とは別です。「ブログの公開に新たな固定費をかけずに始める」という意味で、無料の構成を選んでいます。Pagesの利用上限

これからの記事更新の流れ

1. 試したことをメモする。
2. Codexと一緒に、記事の構成と下書きをつくる。
3. 実際に試した結果、説明、参照先を確認する。
4. 変更案とプレビューで、文章と表示を確認する。
5. 確認できた記事を公開する。

Cloudflare PagesはGitHubと連携して、自動でビルドと公開を行えます。PRのプレビューURLでは、公開前の変更を確認することもできます。このブログの下書き記事は本番用のビルドから除外するため、下書きの確認には手元の開発表示を使います。Cloudflare PagesのGit連携

Codexへの毎回の指示を短くするために、ブログ用のAGENTS.mdにも、読者、文体、出典の扱い、確認方法を記録しました。CodexのAGENTS.md

公開作業の記録

ブログ本体とこの記事を作成し、手元のプレビューで記事一覧と記事ページを確認しました。PCとスマートフォンの幅で表示を確認し、記事への移動も試しています。

コードのチェックではエラーと警告がなく、公開用のビルドでは4ページを生成できました。生成したページのタイトル、日本語設定、内部リンクも確認しています。

npm run check
npm run build
npm run verify

GitHubへの保存も完了し、GitHub上の自動チェックが成功したことを確認しました。下書きと、公開日が未来の記事が、本番用のページに含まれないことも試しています。

Cloudflare Pagesの公開設定には、本番ブランチmain、出力ディレクトリdistを指定しました。ビルドコマンドは、上記の3つのチェックを順番に行う設定です。どれかが失敗した場合、その変更の公開を止めます。

ビルド環境にはNODE_VERSION=24と、公開先のURLを入れるSITE_URLを設定しました。SITE_URLは、記事の正式なURL、RSS、サイトマップを生成するために使います。

2026年10月2日、Cloudflare Pagesでブログを公開できました。公開URLはAI実験ノートです。

公開先でも、記事一覧とこの記事をPC・スマートフォンの幅で確認しました。ブログについてのページ、RSS、サイトマップは正常に応答し、存在しないページには404が返りました。記事の正式なURL、RSSの記事URL、サイトマップの3ページのURLも、実際の公開先と一致しています。

GitHubには記事とコードを非公開で保存し、読者にはCloudflare Pagesで生成したページを公開する形になりました。これからはGitHubのmainに変更を保存すると、自動で確認と公開が行われる設定です。

今回の立ち上げで、記録を書き、変更を残し、公開先で確認する一連の流れができました。次の記事からは、この仕組みを使ってAIやプログラミングで試したことを残していきます。