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

AST AstroCloudflarePagesGitHub

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 で公開

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

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

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 上で動くのでバージョンを確認する。

node -v

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

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

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

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

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

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

Where should we create your new project? → ./mk-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（デフォルト）

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

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

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

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. ローカルでプレビュー

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

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

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

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

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

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

4. 記事を追加してみる

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

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

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

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

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

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

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

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 に：

変更を全部コミットして

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

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 のページが開く。設定するのは以下：

Project name: 任意（例: mk-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://mk-astro-blog.pages.dev）が表示されるのでアクセスして確認する。

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

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

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

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

変更を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 が組み立ててくれる：

今日の散歩について短い記事を書いて。
タイトルは「夕方の近所を歩く」、本文は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）、規模感の目安など

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

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

☕️ Vibecoding Notes を応援