Claude CodeでAstroブログを作る — インストールから執筆までの最短手順
Claude CodeのターミナルからAstroの公式CLIでブログを立ち上げ、ページ追加とCLAUDE.md整備までをひと続きで進める手順をまとめます。
Astroはブログやドキュメントサイトのようなコンテンツ中心のサイト向けフレームワークで、公式のcreate astroコマンドが最短の立ち上げ手段です。ここではClaude Codeのターミナルから同じコマンドを叩き、ページの追加やプロジェクト規約の固定までをひと続きで進める手順を扱います。
Astroとは何か、なぜClaude Codeと組むのか
Astro公式のテーマ集には、ブログやポートフォリオ、ドキュメントサイト、ランディングページ向けのテンプレートが並びます。ブログはAstroが想定する主要な用途のひとつです。プロジェクトの骨格自体はcreate astroウィザードが数十秒で作るため、そこから先の「記事ページを増やす」「設定ファイルを整える」という反復作業をClaude Codeに任せる組み合わせが向いています。
Claude Codeはターミナルで動くAIコーディングアシスタントで、プロジェクトのファイルを自動で読み込みながら会話形式でコードを編集します。VS Code・JetBrains IDE・Slack・GitHub Actionsなど複数の面で使えますが、本稿はCLIでの利用を前提にします。
前提条件 — Node.jsのバージョンとエディタ
Astroのインストールには次の環境が必要です。
| 項目 | 条件 |
|---|---|
| Node.js | 条件v22.12.0以上(v23のような奇数バージョンは非対応) |
| テキストエディタ | 条件制限なし(公式はVS Code + Astro拡張を推奨) |
| ターミナル | 条件Astroの操作はすべてCLI経由 |
| ブラウザ対応 | 条件AstroはViteをベースにしており、既定でモダンなJavaScriptに対応したブラウザを対象にする |
Node.jsのバージョンはnode -vで確認できます。奇数バージョンのNode.jsを使っている場合、create astroの実行時点でエラーになるため、先に偶数バージョンのLTSへ切り替えておきます。
Claude Codeをインストールしてログインする
Claude Codeがまだ無い場合は、ネイティブインストーラーでセットアップします。
curl -fsSL https://claude.ai/install.sh | bash
claude --versionclaude --versionがバージョン番号と(Claude Code)を表示すればインストール完了です。初回はclaudeコマンドを実行するとブラウザでのログインを求められ、Pro・Max・Team・EnterpriseいずれかのサブスクリプションかConsole(API)アカウントで認証します。OSごとの詳しいインストール手順はClaude Code install完全ガイドにまとめています。ログイン方式の使い分けはClaude Codeログイン方法3種の使い分けが参考になります。
作成方法の使い分け — CLIウィザードか、手動セットアップか
Astroの立ち上げ方は大きく2種類あります。どちらもClaude Codeのターミナルから実行できますが、向き不向きが分かれます。
| ケース | create astroウィザード | Manual Setup |
|---|---|---|
| とにかく最短でブログの土台が欲しい | create astroウィザード◎ 数十秒で完了 | Manual Setup△ ファイルを1つずつ作る手間 |
| 各設定ファイルの役割をClaude Codeに把握させながら進めたい | create astroウィザード△ ウィザードが一括生成する | Manual Setup◎ 1ファイルずつ指示・確認できる |
| GitHub上の特定テーマ・starterを土台にしたい | create astroウィザード◎ --templateで直接指定 | Manual Setup△ 手動でコピーが必要 |
最短構築が目的なら、まずウィザードを使うのが近道です。
create astroでプロジェクトを作成する
Claude Codeを起動していないターミナルでも、Claude Codeのセッション内でも同じコマンドで作成できます。
npm create astro@latest対話式のウィザードが、プロジェクト名・テンプレート・TypeScriptの設定・依存関係のインストール・Gitリポジトリの初期化を順に尋ねます。成功すると成功メッセージと次のステップが表示されます。矢印キーでの選択を含む対話画面のため、Claude Codeに実行を任せて応答が止まったように見えることがあります。その場合は一度自分のターミナルで直接実行し、プロジェクトディレクトリにcdしてから先の作業をClaude Codeに引き継ぐ進め方もできます。
全質問に既定値で答えて一気に作りたい場合や、Gitの初期化を省きたい場合は、create astroに追加のフラグを渡してセットアップ内容をカスタマイズできます。ReactやPartytownなどの公式インテグレーションを最初から組み込みたいときは--addフラグが使えます。
npm create astro@latest -- --add react --add partytownGitHub上の既存テーマを土台にする場合は--templateフラグに<GitHubユーザー名>/<リポジトリ名>を渡します。既定ではそのリポジトリのmainブランチが使われ、別ブランチを使う場合は<GitHubユーザー名>/<リポジトリ名>#<ブランチ名>の形式で指定します。
npm create astro@latest -- --template <github-username>/<github-repo>Claude Codeに最初のブログページを作らせる
プロジェクトが作成できたら、ディレクトリにcdしてClaude Codeのセッションを開始します。
cd my-astro-blog
claudeセッションを開いた直後は、コードを触る前に「このプロジェクトの構成を説明して」「ページはどこに置く?」のように質問してみます。Claude Codeにディレクトリ構成を要約させておくと、生成直後の空のプロジェクトでもどこに何を書けばよいかがすぐ分かります。Claude Codeはプロジェクトのファイルを都度読み込むため、こちらから内容を貼り付ける必要はありません。
Astroのページはsrc/pages/配下のファイルがそのままルーティングになります。ウィザードが生成するsrc/pages/index.astroは、---で囲んだフロントマター部分(ビルド時にのみ実行されるコード)と、その下のHTMLテンプレートで構成されるシンプルな1ファイルです。この構造を土台に、自然言語でページ追加を指示します。
src/pages/blog/にmy-first-post.astroという新しいページを作って。
index.astroと同じ構造で、見出しと本文の段落を1つ持たせて。Claude Codeは指示に応じて対象ファイルを探し、変更内容を提示します。プロジェクトのファイルは自動で読み込まれるため、事前にファイル内容を手動で渡す必要はありません。変更を承認するかどうかの確認は、契約しているプランと権限モードによって挙動が変わります。Pro・Max・Teamプランの対話セッションでは既定でAuto modeが有効で、分類器が操作内容を判定し、多くのファイル編集やコマンド実行は確認なしで進みます。それ以外のプランではManual modeが既定で、変更のたびに承認を求められます。モードはShift+Tabでいつでも切り替えられます。Auto modeが何を自動承認し、何を止めるかの詳しい仕組みはClaude Codeのauto mode分類器は何を止めているかに解説があります。
あとからインテグレーションを追加する(integrations)
作成時に--addフラグを付け忘れた場合や、後から機能を足したくなった場合は、Claude Codeに「Reactを使えるようにインテグレーションを追加して」のように伝えると、必要なコマンドとファイル変更をまとめて進めてくれます。プロジェクト作成時と同じ--addフラグの仕組みが、公式・コミュニティ双方のインテグレーションに対応しているため、npm create astro@latestの代わりに、既存プロジェクトのディレクトリで直接astro addを実行することもできます。
npx astro add reactこのコマンドは依存関係のインストールと設定ファイルへの反映を1つのコマンドで済ませます。Claude Codeのセッション内で実行させれば、astro.config.mjsへの追記まで含めて結果を確認しながら進められます。
プロジェクトの規約をCLAUDE.mdに固定する
複数回のセッションをまたいで同じ指示を繰り返さないために、プロジェクト直下で/initを実行してCLAUDE.mdを生成します。
/initClaude Codeがコードベースを解析し、ビルドコマンドやテスト方法、見つかった規約を含むCLAUDE.mdを自動生成します。すでにCLAUDE.mdがある場合、/initは上書きせず改善案を提示します。Astroプロジェクトは生成直後のファイル数が少ないため、/initが検出する規約はまだ薄いことが多い状況です。npm run dev・npm run build・npm run previewといったスクリプトの役割や、ページを追加する場所(src/pages/配下)を手動で書き足しておくと、以降のセッションで指示がぶれにくくなります。CLAUDE.mdの書き方を型として整理した記事はClaude CodeのCLAUDE.mdを実用に引き上げる10のパターンにまとめています。
ビルドしてローカルプレビューする
create astroが生成するpackage.jsonには、次の3つのスクリプトが既定で含まれます。
| スクリプト | 実行コマンド | 用途 |
|---|---|---|
dev | 実行コマンドastro dev | 用途開発サーバーを起動しライブプレビュー |
build | 実行コマンドastro build | 用途本番用の静的ファイルを生成 |
preview | 実行コマンドastro preview | 用途ビルド済みファイルをローカルで確認 |
npm run devClaude Codeに記事ページを追加させたあとは、「npm run buildを実行してエラーが出ないか確認して」と伝えると、ビルドの成否まで含めて確認を任せられます。ページ追加を繰り返すたびに毎回このステップを挟むと、壊れたページに気づかないまま進む事態を防げます。
よくあるつまずき
Node.jsの奇数バージョンを使っている
v23のような奇数バージョンのNode.jsではcreate astroが動作しません。node -vで確認し、v22.12.0以上の偶数系LTSに切り替えます。
Astroをグローバルインストールしてしまう
手動セットアップの手順でnpm install astroではなくnpm install -g astroのようにグローバルインストールすると、プロジェクトが正しく動きません。Astroは各プロジェクトのローカル依存として入れる設計です。
ウィザードで依存関係のインストールをスキップした
create astroの「Install dependencies?」の質問で「いいえ」を選んだ場合、node_modules/が作られていない状態です。npm install(pnpm・yarnを使っている場合はそれぞれのコマンド)を別途実行してからnpm run devを試します。
--templateのブランチ指定を忘れる
GitHubリポジトリをテンプレートに使う場合、既定ではmainブランチが対象です。別ブランチを使いたいときは<github-username>/<github-repo>#<branch>のように#でブランチ名を続けないと、意図しないブランチが使われます。
まとめ
Astroブログの最短構築は、npm create astro@latestでプロジェクトの骨格を作り、そこから先の記事ページ追加とビルド確認をClaude Codeに任せる流れです。GitHubの既存テーマを土台にしたい場合は--template、Reactなどのインテグレーションを最初から組み込みたい場合は--addで作成時に指定できます。プロジェクトが育ってきたら/initでCLAUDE.mdを生成し、src/pages/の役割やビルドコマンドを書き足しておくと、次のセッションでも同じ説明を繰り返さずに済みます。