Claude Code でサイトを作る｜Astro のひな形から、手元で見て直し、GitHub に置くまで

コース4 Webサイト編 3 / 6・読む時間約8分・最終確認日 2026-10-26

このレッスンの要点

ひな形は npm create astro@latest で作ります。Claude Code に頼めば、コマンドを覚えなくても大丈夫です
npm run dev で、手元のブラウザで見ながら直せます。ファイルを保存すると、表示もすぐ変わります
npm run build が通ったらコミットして、GitHub のリポジトリに置きます。ここまでがレッスン5の準備です

ひな形を作ってもらう

レッスン2でメモ（docs/設計.md）を作ったフォルダで Claude Code を起動して、のひな形を作ってもらいます。Astro の公式の始め方は npm create astro@latest です。Astro を動かすにはが必要なので、入っていないときや版が古いときは、先に教えてもらいます。

Claude Code（イラスト）

このフォルダに Astro のサイトのひな形を作って

Node.js が入っていることを確かめました。npm create astro@latest でひな形を作ります。

npm create astro@latest

↑ 実行してよいか聞かれたら、内容を読んでから許可します

コマンドの意味がわからないときは、「このコマンドは何をするの？」と聞いてから許可します。

フォルダの中身

ひな形ができたら、フォルダの中身を1行ずつ説明してもらいます。全部を覚えなくても、下の5つがわかれば十分です。

場所	入れるもの
`src/pages/`	ページ。ここに置いたファイルが、そのまま URL になる
`src/components/`	何度も使う部品（ヘッダー・フッターなど）
`src/layouts/`	いくつものページで同じ、ページの外わく
`public/`	手を加えずにそのまま出すもの（画像・robots.txt など）
`astro.config.mjs`	サイト全体の設定

（イラスト）記事がたくさんあるサイトなら、記事の形（題名・日付など）を src/content.config.ts で決めておくと、項目の書きもれがあったときに Astro がエラーで知らせてくれます（content collections）。

手元で見ながら直す

「手元で見られるようにして」と頼むと、Claude Code が npm run dev を動かします。ブラウザで http://localhost:4321/ を開くと、作っているサイトが見られます。これは自分のパソコンの中だけの表示で、ほかの人には見えません。

localhost:4321（イラスト）

はじめての子猫　トップ｜記事｜このサイトについて

子猫をむかえる前に知っておきたいこと

新しい記事：子猫のごはんの選び方

src/ のファイルを直して保存すると、ブラウザの表示もすぐ新しくなります。

1ページできるたびにブラウザで見て、気になるところを「見出しをもう少し小さく」「スマホの幅でも読みやすく」のように伝えて直してもらいます。

ビルドを通して、GitHub に置く

形になったら、npm run build で公開できる形にしてもらいます。できたページは dist/ フォルダに出ます。ビルドが通ったらして、GitHub のリポジトリに上げます（）。

1npm run build が通る

2「説明つきでコミットして」

3「GitHub に非公開のリポジトリを作って push して」

（イラスト）GitHub のコマンド（gh）が入っていて、ログインしてあれば、gh repo create で手元のリポジトリをそのまま上げられます。まだのときは、Claude Code に「gh を入れてログインするまでを、公式のページを見ながら手伝って」と頼みます。

Git・GitHub・コミットのことは、コース3のレッスン8でくわしく説明しています。リポジトリを GitHub に置いたら、レッスン5で Cloudflare Pages とつなぎます。

よくある勘違い

「ページを全部作り終えてから、まとめて確かめればいい」わけではありません

10ページ作ってもらってから、はじめて見る

どこで崩れたのかがわからず、直してもらうのも大変になります

1ページずつ、手元のブラウザで見ながら進める

npm run dev を動かしたままにしておけば、直すたびにすぐ確かめられます

やってみよう

レッスン2でメモ（docs/設計.md）を作ったフォルダで、claude を起動します
下の「ひな形を作る」依頼文を送り、Astro のひな形を作ってもらいます
「手元で見られるようにして」と頼み、ブラウザで localhost:4321 を開きます
レッスン2のメモを読んでもらい、トップのページを1つだけ作ってもらって、ブラウザで確かめます
「ビルドして、通ったらコミットして」と頼み、最後に「GitHub に非公開のリポジトリを作って push して」と頼みます

ひな形を作る依頼文（Claude Code に）このフォルダに Astro のサイトのひな形を作って。npm create astro@latest を使って。docs/ フォルダはそのまま残して。途中で選ぶところがあれば、選ぶ前に聞いて。Node.js が入っていない・古いときは、作る前に教えて。できたら、フォルダの中身をそれぞれ1行で説明して。

1ページずつ作る依頼文（Claude Code に）docs/設計.md を読んで、トップのページだけを作って。共通のヘッダーとフッターは src/components/ に、ページの外わくは src/layouts/ に分けて。作ったら npm run dev のままブラウザで見られるようにして、何を作ったかを短く教えて。

GitHub に置く（gh を入れて、ログインしてあるとき。ターミナルで）gh repo create --source=. --private --push

確認問題

Q1. npm run dev を動かしているあいだに、src/ の中のファイルを直して保存すると？

Q2. npm run build をすると、公開できる形のファイルはどこにできる？

Q3. public/ フォルダに入れたファイルは、ビルドのときにどうなる？

今日の練習

トップのページの見出しの文を、Claude Code に1か所だけ変えてもらい、保存したあとブラウザの表示が変わるのを見てみましょう。

前のレッスン
2. どんなサイトにするか決める次のレッスン
4. サーバーとドメインを選ぶ