同じ構成でブログを再現する手順

このブログは Astro 製の静的サイトを GitHub で管理し、Codex CLI と VSCode で記事制作を自動化しながら Cloudflare Pages にホスティングしています。同じ構成を再現するためのセットアップを順を追って整理しました。

1. VSCodeとCodexの制作環境を整える

  1. VSCodeをインストールし、code コマンドを有効にしておくとCLIから起動しやすくなります。
  2. Node.js 20 LTS 以上（nvm推奨）を入れたら、npm install -g @openai/codex で Codex CLI を導入します。
  3. codex login を実行してブラウザ認証を済ませると、以降 codex chat でブログ記事の生成依頼が行えます。

2. Astroプロジェクトを用意する

  1. GitHubでリポジトリを作成し、git clone でローカルに取得します。
  2. ルートで npm install を実行し、npm run dev で開発サーバーを起動して基本レイアウトを確認します。
  3. レイアウトやスタイルは src/layouts/BlogPost.astro と src/styles/global.css を軸にカスタマイズすると、全記事へ一括で反映できます。

3. 記事追加フロー

  1. src/content/blog に日付プレフィックス付きのMarkdownを置くと、AstroのContent Collectionsが自動で読み込みます。
  2. Codexに記事生成を頼む際は、例えば次のように依頼します。
    • 「AIコンテストに出すネタ3本 という内容のブログ記事を追加して」
    • 仕上がったら「コミット&プッシュして」と続けるだけで git add → git commit → git push まで自動化できます。
  3. 記事の差分は git status で確認し、必要ならVSCodeで最終チェックを行います。

4. GitHubとCloudflare Pagesで公開

  1. ローカルの変更を git commit したら GitHub の main ブランチへプッシュします。
  2. Cloudflare Pagesで新規プロジェクトを作成し、GitHubリポジトリを紐づけます。ビルドコマンドは npm run build、公開ディレクトリは dist を指定します。
  3. デプロイ後に npm run build && npm run preview でローカル確認しておくと、Cloudflareのビルドログと差異が起こりにくくなります。

VSCodeでの編集・Codexによるライティング・GitHubの履歴管理・Cloudflare Pagesの自動デプロイが揃うと、記事制作～公開までがほぼコマンド2〜3個で完結します。上記のプロンプト例をベースに自分用のテンプレートを作り、更新サイクルを高速化してみてください。