Claude Code と Astro でブログを作って Cloudflare Pages で公開する

Astro（Wikipedia）は、ブログ・ドキュメント・マーケティングサイトなど コンテンツ中心のサイトを構築する Web フレームワーク。

多機能なフレームワークだが、ここでは Markdown を HTML に変換する 部分に絞って使う。.md で記事を書き、.astro でレイアウトを組み、ビルドで静的HTMLに変換する流れ。

雛形は Astro 公式の ブログテンプレート から作り、Cloudflare Pages の Git 連携 で公開するまでを体験する。Cloudflare 側でビルドが自動で走るので、こちらは push するだけ。

応用編なので、ロードマップの Git と GitHub の基本・Wranglerハンズオン を一通り体験している前提で進める。Cloudflare Pages の Git連携そのものは、応用編の CGT（Git連携） で先に触れておくとより進めやすい。

1. 何を作るか

Astro のブログテンプレートをそのまま使った、シンプルなブログサイトを作っていく。

全体像：

flowchart TD
    A["<b>ローカル</b><br>.md（記事）と .astro（レイアウト）を書く"]
    B["<b>GitHub</b><br>コードを受け取る"]
    C["<b>Cloudflare Pages</b><br>npm install<br>npm run build（.md → .html）<br>dist/ を自動公開"]
    D["https://my-astro-blog.pages.dev で公開"]
    A -- "git push" --> B
    B -- "pushを検知" --> C
    C --> D

今回の構成の特徴：

• 記事は .md で書く: 構造化された記事一覧・タグ・RSS などを Astro が自動で組み立てる
• ビルドは Cloudflare 側: dist/ は GitHub に push せず、push 後に CF 側で npm run build が走る
• 動的機能なし: 静的サイトに徹する。コメントや動的カウントは扱わない（必要なら LAP などを別途組み合わせる）

本来 Astro が備えている機能（コンポーネント、アイランド・アーキテクチャ、画像最適化、React/Vue などとの統合）からすると、最小限の使い方。実質的には「気の利いた HTML 変換ツール + 開発サーバー」として体験する。「重いフレームワーク」と構える必要はない。

2. 事前準備

Git と GitHub の基本を一通り終えて、GitHub アカウントと gh の認証が済んでいる状態から進める。GitHub 側のリポジトリは最後（5-1）に gh で作るので、ここでは作らない。

Astro の初期化は対話的なウィザードなので、まず macOS の Terminal で済ませてから Claude Code を起動する流れにする（Astro 公式チュートリアルと同じ形）。

2-1. Node.js の確認

macOS の Terminal を開く（アプリケーション → ユーティリティ → ターミナル）。Astro は Node.js 上で動くのでバージョンを確認する。

node -v

v20 以上が表示されればOK。古い場合や入っていない場合はWranglerハンズオンの 2-1を参照して LTS 版をインストールする。

2-2. Astro プロジェクトを作成

~/claude に移動して、Astro のブログテンプレートでプロジェクト my-astro-blog を生成する。

cd ~/claude
npm create astro@latest my-astro-blog

~/claude がまだ無ければ mkdir -p ~/claude で作ってから cd する。

選択肢が順に出るので、以下のように答える：

• Where should we create your new project? → ./my-astro-blog（デフォルトのまま Enter）
• How would you like to start your new project? → Use blog template
• Install dependencies? → Yes
• Initialize a new git repository? → Yes
• Do you plan to write TypeScript? → Yes（デフォルト）
• How strict should TypeScript be? → Strict（デフォルト）

名前は別のものでもよい。以降 my-astro-blog と出てきたら自分のリポジトリ名に読み替える。

公式 CLI の選択肢には他にも 基本のスターター（推奨）/ docs（ドキュメントサイト）/ minimal（空）があり、さらに Astro Themes ギャラリー からコミュニティ製の多数のテーマも選べる。詳しくは ASB 6章「ブログのデザインを変える」 を参照。本記事ではシンプルに Use blog template で進める。

完了すると以下のような構成ができる：

my-astro-blog/
├── astro.config.mjs
├── package.json
├── package-lock.json
├── tsconfig.json
├── public/                ← 静的アセット（画像・favicon など）。ビルド時に dist/ にコピーされる
├── src/                   ← ソース。ここからビルドで dist/ が生成される
│   ├── content/blog/      ← ブログ記事の .md / .mdx
│   ├── layouts/           ← レイアウト用 .astro
│   ├── pages/             ← ルーティング用 .astro
│   ├── components/
│   └── styles/
└── .gitignore             ← Astro が dist/ や node_modules/ を除外する設定

src/content/blog/ 配下にすでにサンプル記事がいくつか入っている。

配信される対象は npm run build で生成される dist/ フォルダ（src/ をHTMLに変換したもの + public/ の中身がコピーされたもの）。Astro の public/ は「配信対象」ではなく「dist/ にコピーされる静的アセット置き場」。

2-3. Claude Code を起動

Claudeデスクトップアプリを起動。

Code（Claude Code）を選択 → New session をクリック → フォルダ my-astro-blog を指定（~/claude/my-astro-blog）

3. ローカルでプレビュー

開発サーバーを起動して、ブラウザで確認する。

Claude

npm run dev を実行してローカルサーバーを起動して

表示された URL（http://localhost:4321 など）を開くと、Astro のブログテンプレートのトップページが表示される。

Astro ブログテンプレートのデフォルトのトップページ

開発サーバー起動中に .md や .astro を編集すると、保存しただけで自動でブラウザがリロードされる（HMR = Hot Module Replacement）。

開発サーバーはこのまま起動したままにしておく。以降の章でファイル編集 → ブラウザで確認、を繰り返すたびにそのまま反映される。ハンズオンの最後で止める。

4. 記事を追加してみる

Claude Code に依頼してサンプル記事を追加する。

Claude

src/content/blog/ に新しい記事を3本追加して。
それぞれ別のテーマで、フロントマター（title, description, pubDate, heroImage など）も
既存サンプル記事に合わせて埋めて。
本文は数百字程度で適当に書いてくれてよい。
ファイル名は first-post.md などの形式は避けて、今回新規追加とわかる名前にして。

起動したままの開発サーバーを見てみると、Blog 一覧（トップのナビバー → Blog）に新しい記事が確認できる。

Blog 一覧に追加した記事が並び、個別記事ページもそのまま生成される

ついでにトップページの見た目も雑に自分用にしてしまう。詳しいカスタマイズはあとで（ASB 3章「サイト情報をきちんと書き換える」）でやるので、ここではデフォルト文言を置き換えるだけでよい。

Claude

トップページとサイト全体のサンプル文言を雑に自分用に書き換えて。

- サイト名: 「日々のメモ」
- サイトの説明: 「日々の生活について気が向いたら書きます」
- 著者名: 「匿名ペンギン」

src/consts.ts などの設定ファイルや、テンプレートにハードコードされている
"Astro" や "Example Blog" などのサンプル文言をまとめて差し替えればよい。
細かい調整はやらないで、デフォルトを置き換えるだけでOK。

開発サーバーが起動したままなら、ファイル保存と同時にブラウザに反映される（Vite HMR）。差し替えた文言がトップページに出ているか確認しよう。

5. Cloudflare Pages にデプロイ（Git連携）

ローカルで動いたら、GitHub に push して Cloudflare Pages に公開する。

5-1. GitHub にリポジトリを作って push する

まずローカルの未コミット分（4章で追加した記事や、トップページの書き換えなど）をまとめてコミットしておく。Claude Code に：

Claude

変更を全部コミットして

GitHub の MCP プラグインはオフにしておく: Claudeデスクトップアプリの 設定 → カスタマイズ → プラグイン にある Github（GitHub 公式 MCP サーバ）をインストールしていると、Claude Code が gh・ローカルの git ではなく GitHub API 経由で操作してしまい、手順どおりに進まないことがある（リポジトリは作れても、ローカルと origin が繋がらず、あとの編集・push が噛み合わなくなる）。本ハンズオンは gh に統一するので、入れている場合は無効化しておく（詳しくは GBA 4章 を参照）。

その後、GBA 4-5 と同じ要領で、ビュー → ターミナル から実行する：

gh repo create my-astro-blog --private --source=. --remote=origin --push

GitHub 上に my-astro-blog リポジトリが作られ、ローカルのコミットが push される。GitHub の Web UI でリポジトリを開いて、ファイル一式が反映されたことを確認する。dist/ や node_modules/ は .gitignore に入っているので push されない（Astro が自動で除外設定済み）。

5-2. Pages プロジェクトを作成（Astroプリセット）

Cloudflare ダッシュボード を開き、左メニューの Compute → Workers & Pages をクリック、右上の Create application をクリック。

下にある目立たない Looking to deploy Pages? の Get started をクリック。

次の画面で Import an existing Git repository の Get started をクリック。初回は GitHub との連携承認を求められる。詳しい手順は CGT (Git連携) を参照(リポジトリ名は my-astro-blog に読み替え)。

リポジトリ一覧から my-astro-blog を選び、Begin setup をクリック。

Set up builds and deployments のページが開く。設定するのは以下：

• Project name: 任意（例: my-astro-blog）。公開URLの一部になる
• Framework preset: Astro を選択
  • これを選ぶと Build command に npm run build、Build output directory に dist が自動入力される
• それ以外はそのままでOK

Save and Deploy をクリックすると、Cloudflare 側で npm install → npm run build が走り、生成された dist/ が配信される。2-2 で確認した「src/ をビルドして dist/ を配信する」流れが、Astro プリセットを選んだだけで自動的に組まれる。手で Build command や Output directory を書く必要はない。

完了すると公開URL（https://my-astro-blog.pages.dev）が表示されるのでアクセスして確認する。

6. 編集ワークフローと自動反映

ここから先は 編集 → push → 自動デプロイ の繰り返しになる。動きの例として「ローカルで新規記事を作って push する」流れを示す：

Claude

src/content/blog/ に新しい記事を1本追加して。
タイトルは「時の流れ」、内容は昔買った腕時計（最近こわれた）について簡潔に書いて。

開発サーバーでローカルの動作を確認してから：

Claude

変更をgitでコミットしてpushして

しばらく（1〜2分）待ってから公開URLにアクセスして確認。Cloudflare ダッシュボードの Workers & Pages → プロジェクト名 → Deployments タブで、ビルドの進行状況とログを確認できる。ビルドが失敗した場合もここでエラー内容が見られる。

編集経路はいくつかあって、用途で使い分けられる：

6-1. ローカルで編集する

既存ファイルの編集: Claudeデスクトップアプリの ビュー メニュー → ファイル（→ CDG 5-2）で src/ → content/ → blog/ の順に開き、編集したい .md をクリック。レンダリングされた状態で表示されるので、右上の </>（ソースを表示）アイコンで編集モードに切り替え、直接書き換えて 保存 ボタンで反映する。その後、Claude Code に「pushして」と依頼すれば、コミット → push → 自動デプロイ。

新規ファイルの追加: Claude Code に依頼するのが楽。タイトルだけ決めれば本文・フロントマターは Claude が組み立ててくれる：

Claude

今日の散歩について短い記事を書いて。
タイトルは「夕方の近所を歩く」、本文は3〜5段落くらいで。
src/content/blog/ に walk-evening.md として保存して。

新規はプロンプトに任せた方が楽、既存ファイルの細かい修正はファイル GUI から直接の方が早い、と使い分けるとよい。

6-2. GitHubで編集する

ローカル環境を立ち上げていない場面（出先、他人の PC、iPad など）から記事を更新したいときは、GitHub 側で直接編集する方法もある。

• GitHub Web UI で直接編集
  • 既存ファイルの編集: リポジトリページで .md を開き、右上の 編集（鉛筆アイコン） をクリック。ブラウザ上で編集して、コミットメッセージを書いて Commit changes。
  • 新規ファイルの追加: リポジトリのトップページ（または src/content/blog/ フォルダ）を開いて、右上の Add file → Create new file をクリック（画面幅が狭い場合は Add file の代わりに + と表示される）。ファイル名欄に src/content/blog/my-new-post.md のように パス込みで入力 すればフォルダごと指定でき、本文（フロントマター + 記事）を貼り付けて Commit changes。
• github.dev でブラウザから編集: リポジトリページで . キーを押すと、ブラウザ内に VS Code が立ち上がる（→ GBA 6-4）。複数ファイルをまとめて編集でき、新規ファイル作成・コミット・push もブラウザ内で完結する。

新規記事を GitHub 側で追加するときは、ファイル先頭に Astro が要求するフロントマターを忘れずに入れる。最低限の例：

---
title: '記事タイトル'
description: '記事の説明'
pubDate: '2026-05-25'
---

title / description / pubDate の3つが揃っていないと Astro が記事として認識せず、ビルドエラーになる（必須項目の定義は src/content.config.ts にある）。ローカル（Claude Code）に依頼するときは Claude が自動で整えてくれるが、GitHub 側で手書きするときは見落としやすい点。

GitHub Web UI / github.dev で編集した場合は、ローカルでの編集作業に戻ったときは必ず git pull（または Claude Code に「pull して」と依頼）して、ブラウザ側で進めたコミットを手元に取り込む。これを忘れると次の push で衝突する（その際は Claude Code に相談する）。

7. 次のステップ

ここまでで、Astro のブログテンプレートを Cloudflare Pages に公開して、push だけで自動更新できる状態になった。次は雛形を自分のブログとして使い込むためのカスタマイズに進む。

• ASB（Claude Code と Astro で作ったブログを運営していく）：サイト情報のカスタマイズ、フロントマターの活用、SEO（OGP / sitemap / RSS）、規模感の目安など