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

ASTAstroCloudflarePagesGitHub

Astro は、Markdown でブログ・ドキュメントサイトを書くための 静的サイト構築の総合的な開発ツール。.md で記事を書き、.astro でレイアウトを書き、npm run build で静的HTMLに変換する。

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

本記事は応用編。ロードマップの Git と GitHub の基本・Wranglerハンズオン・CGT（Git連携） を一通り体験している前提で進める。

1. 何を作るか

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

全体像：

[ローカル]                            [GitHub]              [Cloudflare Pages]
.md ファイル（記事）
.astro ファイル（レイアウト）
       │
       │  git push
       ▼
                            検知 →   npm install
                                     npm run build  ← .md → .html を生成
                                     生成された dist/ を自動公開
                                                  ↓
                            https://mk-astro-blog.pages.dev で公開

これまでのロードマップとの違い：

Astro は本来、コンポーネント・ルーティング・画像最適化・コンテンツコレクションなどを備えた多機能なフレームワーク。だが本記事で使うのは .md を .html に変換して配信する という最小限の機能。実質的には「気の利いた HTML 変換ツール + 開発サーバー」として体験する。Astro を「重いフレームワーク」と構える必要はない。

2. 事前準備

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

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

2-1. Node.js の確認

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

terminal
node -v

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

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

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

terminal
cd ~/Desktop/claude
npm create astro@latest mk-astro-blog

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

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

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

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

mk-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 をクリック → フォルダ mk-astro-blog を指定（~/Desktop/claude/mk-astro-blog）

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

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

prompt
npm run dev を実行してローカルサーバーを起動して。
表示された URL（http://localhost:4321 など）をブラウザで開いて確認したい。

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

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

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

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

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

4. 記事を追加してみる

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

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

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

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

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

ついでにトップページの見た目も雑に自分用にしてしまう。詳しいカスタマイズはあとで（B-2 で）やるので、ここではデフォルト文言を置き換えるだけでよい。

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

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

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

記事のフロントマターやコンテンツコレクション、テンプレートの本格的なカスタマイズは続編の ASB（Claude Code と Astro で作ったブログを運営していく） で扱う。今回は雛形をそのまま使う体験までで十分。

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

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

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

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

prompt
変更を全部コミットして

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

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

GitHub 上に mk-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連携) を参照(リポジトリ名は mk-astro-blog に読み替え)。

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

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

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

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

6. 編集 → push → 自動反映の流れ

ここから先は ローカルで編集 → push → 自動デプロイ の繰り返しになる。

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

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

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

しばらく（1〜2分）待ってから公開URLにアクセスして確認。

Cloudflare ダッシュボードの Workers & Pages → プロジェクト名 → Deployments タブで、ビルドの進行状況とログを確認できる。ビルドが失敗した場合もここでエラー内容が見られる。

一通り動作確認が終わったら、3章で起動した開発サーバーを止めておく。Claude Code に「サーバーを止めて」と依頼すればよい。

7. 次のステップ

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

ブログに動的機能（コメント・いいねなど）を足したい場合は、別途 LAP（Like API） と組み合わせる。Astro 側は静的サイトのまま、別ドメインの API を fetch する形になる。

2026-05-22 (last updated: 2026-05-24)　タツヲ (yto)

☕️ この記事が役に立ったら Vibecoding Notes を応援