Claude CodeでAstroのサイトを作る：フォルダーから公開まで

コードを一行も書いたことがない人でも、Claude Codeを使ってAstroでサイトを作れます。私はずいぶん前から手でコードを書くのをやめ、AIに言葉で伝えて作業しています。Astroでサイトを作るのも同じです。必要なものを説明すれば、Claudeがコードを書いてくれます。

通常、問題はサイトの構築そのものではなく、その手順がいくつもの断片に分かれていることです。ある記事ではインストールを説明し、別の記事ではコマンドを扱い、さらに別の記事では公開方法を説明しています。そのため、全体の流れが頭の中でつながりません。ここでは、空のフォルダーからインターネット上のリンクで開けるサイトまで、順を追って説明します。インストールするもの、プロジェクトを始めるコマンド、Claude Codeを使ってページを作る方法、そして完成したサイトを無料で公開する方法を紹介します。Astroの公式ドキュメントを参考にしています。

サービスの使い方については、Ailootのドキュメントをご覧ください。

始める前に必要なものは？#

Astro自体は事前にダウンロードする必要がありません。次の手順で実行するコマンドが取得してくれます。ただし、それらを動かす環境は必要です。Astroは、始めるために次の3つが必要だと説明しています。

それぞれが実際には何を意味するのか、見ていきましょう。

1. Node.js — Astroや、ほとんどのバイブコーディング用ツールを動かすために必要なプログラムです。nodejs.orgからダウンロードし、通常のアプリケーションと同じようにインストールします。ドキュメントに記載されたバージョン番号は時間とともに変わるため、始める前にAstroのインストールページを開いて要件を確認してください。必要なのは偶数バージョン（22、24）です。奇数バージョン（23、25）は避けるのが無難です。
2. VS Code — Microsoftの無料エディターです。ここでプロジェクトフォルダーを開き、Claude Codeも起動します。Claude Codeがコードを書いてくれます。
3. ターミナル — コマンドを入力するウィンドウです。別途インストールする必要はありません。VS Codeのメニューから開き、以下のコマンドをすべてそこで実行します。

Claude Codeをすでにインストールして何かを作ったことがあれば、必要なものはすべてそろっているので、この手順は飛ばせます。まだの場合は、Claude Codeのインストール方法を別のガイドで説明しています。

1つのコマンドでAstroプロジェクトを作る方法#

ここからプロジェクト作成に入ります。必要なコマンドは1つだけです。ターミナルを開き、次を入力します。

npm create astro@latest

インストールウィザードが起動します。ドキュメントには次のように書かれています。

ウィザードの案内に従っていくつか質問に答えます。プロジェクトフォルダーの名前、最初に使うテンプレート、依存関係をすぐにインストールするかどうかなどです。最初のサイトなら、すべての質問に既定の選択肢を選んでかまいません。空のテンプレートや最小限のテンプレートで十分です。依存関係のインストールについて「いいえ」と答えた場合は、後でプロジェクトフォルダー内でnpm installコマンドを実行して手動で追加してください。

ウィザードが終わると、プロジェクトが作成されたことが表示され、次の手順としてプロジェクトフォルダーへの移動を提案されます。

cd your-project-name

これだけでプロジェクトを作成できます。中には、ページを作るためのファイルやフォルダーがすでにいくつか用意されています。手作業で編集する必要はありませんが、何がどこにあるか知っておくと便利です。Astroが必須としているフォルダーは1つだけです。

つまり、src/pagesはサイトの各ページを置くフォルダーです。ホームページ、「私たちについて」、お問い合わせページなどがここに入ります。通常、その近くにはsrc/components（ヘッダーやボタンなど再利用できる部品）、src/layouts（ページ共通の枠組み）、画像やファイルを置くpublicフォルダーもあります。構成を暗記する必要はありません。ページはsrc/pagesにあると覚えておき、Claudeに「お問い合わせページを追加して」と頼むときに参照すれば十分です。

Claude Codeを使ってサイトを作る方法#

ひな型の準備ができたら、そこからサイトを作ります。ここからはClaude Codeの出番です。VS Codeでプロジェクトフォルダーを開き、Claude Codeを起動して、必要なものを言葉で説明します。Claudeがsrc/pagesやその近くにあるフォルダーのファイルを編集するので、あなたは作業を頼み、結果を確認するだけです。

私の経験では、小さな手順に分けて進めるのが最もうまくいきます。「会社のウェブサイトを作って」といった巨大な依頼は、修正しにくい雑然とした結果になりがちです。そこで、短く明確な作業に分けて、1つずつ頼みましょう。

1. 「ホームページを作って。大きな見出し、私の仕事についての短い説明、問い合わせページへのリンク付きボタンを入れて。」
2. 「3つのセクションからなるサービスページを追加して。」
3. 「電話番号とTelegramへのリンクがある問い合わせページを追加して。」
4. 「スタイルを変更して。明るい背景にして、読みやすい大きなフォントを使って。」

次に進む前に各手順を確認してください。問題に気づきやすく、必要なら前に戻りやすくなります。小さな作業がより確実な理由や、AIの作業を軌道に乗せる方法は、コンテキストエンジニアリングの考え方の一部です。指示とプロジェクト構成が明確であるほど、結果も予測しやすくなります。

Astroはこの作業に適した構造をAIに与えます。ページの内容とスタイルが分かれており、ページは共通のルールに沿って作られます。この構造により、Claudeが混乱することが減り、ある箇所を編集したときに近くの別のものを壊す可能性も低くなります。Claudeが突然ファイルを認識しなくなったり、的外れな返答をしたりする場合は、Claude Codeがプロジェクトファイルを参照できない理由のガイドをご覧ください。

AstroはAIを使った作業を支える要素の1つにすぎません。もっともらしい推測に頼らず、Claudeが必要なものを一貫して作れるようにするには、プロジェクトに必要なセットアップとして、AIクローン + セカンドブレイン + コンテキストエンジニアリングがあります。

公開前にサイトをプレビューする方法#

サイトを公開する前に、まず自分のパソコンでプレビューします。そのためにAstroの開発サーバーを使います。サイトをパソコン上でリアルタイムに表示できます。プロジェクトフォルダー内のターミナルで、次のコマンドを実行してください。

npm run dev

Astroがローカルプレビューを起動し、ターミナルにアドレスを表示します。既定ではlocalhost:4321です。このアドレスをコピーしてブラウザーで開けば、サイトを確認できます。今のところ、このアドレスを開けるのはあなただけです。外部の人はアクセスできません。これは下書きです。

便利なのはプレビューがリアルタイムで更新されることです。Claudeがファイルを編集すると、ブラウザー上のページも自動的に更新されます。手動で再読み込みする必要はありません。すばやく進められます。Claudeに頼み、ブラウザーで確認し、修正を加えて、もう一度確認します。この段階でサイトを仕上げます。結果に満足したら、オンラインで公開しましょう。

Astroのサイトを無料でオンライン公開する方法#

完成したサイトを、ほかの人がリンクから開ける場所に置く必要があります。最も簡単な無料ルートはGitHubです。まずプロジェクトのコードをリポジトリにアップロードし、次にサイトをビルドして公開するホスティングサービスを接続します。手順は次のとおりです。

1. GitHubにリポジトリを作成する。 リポジトリとは、プロジェクトファイルを送るオンラインのコード保管場所です。自然な言葉で指示すれば、Claude Codeが手伝ってくれます。「プロジェクトを新しいGitHubリポジトリにアップロードして」と頼むと、コマンドを提案してくれます。GitHubを使うのが初めてなら、登録とサインインの手順も手元に用意しておきましょう。
2. ホスティングを接続する。 NetlifyやVercelなどのサービスを開き、GitHubアカウントでサインインして、リポジトリを選びます。Astroのドキュメントでは、この方法を次のように説明しています。ホスティングサービスがリポジトリを監視し、サイトをビルドして公開します。
3. ビルド設定を確認する。 通常、ホスティングサービスはAstroを認識し、必要な設定を入力してくれます。手動入力を求められた場合、ドキュメントに記載されているビルドコマンドはastro build（またはnpm run build）で、完成したサイトはdistフォルダーに配置されます。
4. 「公開」をクリックする。 サービスがサイトをビルドし、site-name.netlify.appのようなリンクを発行します。このアドレスから誰でもサイトを開けます。

リポジトリをホスティングサービスに接続する方法について、ドキュメントには次のように書かれています。

その後は公開が自動化されます。リポジトリに新しい変更を送ると、サイトが自動で再ビルドされ、更新されます。ほかにクリックするものはありません。

もう1つの無料オプションはGitHub Pagesです。GitHub独自のツールを使って、リポジトリから直接サイトを公開できます。Astroには公式のスターターがあります。

この方法では、your-name.github.io/repository-nameのようなアドレスでサイトを開けます。後から独自ドメインを接続することもできます。ここでもClaude Codeに設定を任せられます。作業を言葉で説明すれば、必要なファイルを用意してくれます。

Astroのサイトを作る費用はいくら？#

費用について説明しましょう。Astroは無料のオープンソースツールで、別途料金はかかりません。基本的なホスティングサービスにも無料プランがあります。GitHub Pagesのほか、NetlifyやVercelのスタータープランがあり、軽量なAstroサイトには通常十分です（無料プランにはトラフィック制限がありますが、名刺代わりのサイトやランディングページなら通常は足ります）。

実際に費用がかかる可能性があるのは2つで、どちらも必ず必要というわけではありません。1つ目は、サイト作成に使うAIツールです。2つ目は、name.netlify.appのようなアドレスの代わりに使う独自ドメインです。これは任意で、年間費用もわずかです。「サイトを作ってオンラインで公開する」まで、Claudeの利用料だけで済ませることもできます。

AstroのサイトとClaude Codeについて、ほかによくある質問#

バイブコーディングの完全なセットアップ：AIクローン + セカンドブレイン + コンテキストエンジニアリング。

Ailootについて知る。