Claude CodeでAstroサイト作成

· NOP

はじめに

Claude Codeは、Anthropicが提供するAI搭載のコーディングアシスタントです。コードベース全体を理解し、ファイルの編集、コマンドの実行、開発ツールとの統合が可能です。

Claude Code is an agentic coding tool that reads your codebase, edits files, runs commands, and integrates with your development tools. — Claude Code Documentation

このブログ自体も Claude Code で作成しました。本記事では、Claude Codeを使ってAstroブログサイトを作成するまでの手順を解説します。

1. Claude Codeのインストール

前提条件

  • Claude Pro/Max/Teams/Enterprise サブスクリプション
  • ネットワーク接続
  • ターミナル環境（macOS/Windows/Linux）

インストールコマンド

macOS / Linux / WSL:

curl -fsSL https://claude.ai/install.sh | bash

Windows PowerShell:

irm https://claude.ai/install.ps1 | iex

Windows CMD:

curl -fsSL https://claude.ai/install.cmd -o install.cmd && install.cmd && del install.cmd

Native installations automatically update in the background to keep you on the latest version. — Claude Code Documentation

インストールの確認

claude --version  # バージョン確認
claude doctor     # 診断実行

2. Claude Codeの起動

プロジェクトのディレクトリでClaude Codeを起動します：

cd your-project
claude

初回起動時にログインを求められます。Claudeアカウントで認証を完了してください。

3. サイト作成の依頼

Claude Codeに対して、自然言語でAstroブログの作成を依頼します：

Astroを使ってブログを作成

Claude Codeは以下のような処理を自動的に行います：

  1. 現在のディレクトリの確認
  2. 適切なテンプレートの選択
  3. パッケージマネージャーの確認
  4. Astroプロジェクトの作成

テンプレートやパッケージマネージャーについて質問される場合があります。今回は以下を選択しました：

  • テンプレート: ブログテンプレート
  • パッケージマネージャー: pnpm

実行されたコマンド

pnpm create astro@latest . --template blog --yes --no-git

4. 記事作成の依頼

サイト名の設定と記事の追加を依頼します：

サイト名「NOP Labo 技術メモ」を追加。
記事に「claude codeでAstroサイト作成」を追加。

Claude Codeが以下の作業を行います：

  1. src/consts.ts でサイト名と説明を変更
  2. src/content/blog/ に新しいMarkdown記事を作成

作成されたファイル

src/consts.ts:

export const SITE_TITLE = 'NOP Labo 技術メモ';
export const SITE_DESCRIPTION = 'NOP Labo 技術メモ - 開発や技術に関するメモ';

5. 結果の確認

開発サーバーを起動して確認します：

pnpm dev

http://localhost:4321/ にアクセスすると、以下が確認できます：

  • サイト名: 「NOP Labo 技術メモ」
  • 追加された記事: 「Claude CodeでAstroサイト作成」

プロジェクト構造

作成されたAstroブログの構造：

noplabo.com/
├── src/
│   ├── content/     # ブログ記事 (Markdown)
│   ├── pages/       # ページ
│   ├── layouts/     # レイアウト
│   ├── components/  # コンポーネント
│   └── styles/      # スタイル
├── public/          # 静的ファイル
└── astro.config.mjs # 設定ファイル

まとめ

Claude Codeを使うことで、以下の手順を自然言語で指示するだけでAstroブログを作成できました：

  1. インストール: ワンライナーで完了
  2. 起動: claude コマンドのみ
  3. サイト作成: テンプレート選択から依存関係インストールまで自動化
  4. 記事作成: 設定変更とMarkdownファイル作成を自動化
  5. 確認: 開発サーバー起動でプレビュー

コマンドを覚える必要なく、自然言語で開発を進められるのがClaude Codeの強みです。普段コードを書かない方でも試しやすいので、ぜひ触ってみてください。

参考資料