tenonekoAIのてならい帖
はじめての人へ

Webサイトができるまでの全体図｜Claude Code・GitHub・Cloudflare Pages で作って公開する

コース4 Webサイト編 1 / 6・読む時間 約6分・最終確認日

このレッスンの要点

  • Webサイトは、ファイルの集まりです。Astro が文章や部品のファイルから、公開するページ（HTML）を作ります
  • 作るのは Claude Code、置き場所は GitHub、公開は Cloudflare Pages。push すると自動で公開されます
  • 自分のドメインをつなぎ、準備ができたら検索に出るようにします。コース4はこの順で6本です

Webサイトは、ファイルの集まり

ブラウザで見るページは、HTML などのファイルでできています。全部を手で書くのは大変なので、 という道具を使います。文章（Markdown）や、何度も使う部品（ヘッダーやフッター）のファイルから、Astro がのときにページを作ります。

1文章・部品のファイル（Claude Code が作る）
2npm run build（Astro がページを作る）
3dist/ にページのファイルができる
4これを公開する
Astro は、ふつうはビルドのときに全ページを作っておきます。見に来た人には、できあがったファイルを渡すだけです。

道具と、それぞれの役わり

このコースで使う道具は、下の表のとおりです。この講座のサイト（AIのてならい帖）も、同じ組み合わせで作っています。Cloudflare は、新しいプロジェクトには Workers という別のしくみもすすめていますが、このコースは Pages で進めます（レッスン4でくわしく）。

場所道具すること
作るClaude Code・Astroページや部品のファイルを作る・直す
置くGitHubファイルと変更の記録（）をしまう
公開するGitHub から取ってきてビルドし、インターネットに出す
住所（レジストラで取る）example.com のような、自分のサイトの名前
探してもらうGoogle の Search Consoleサイトのページの一覧を Google に知らせる
（イラスト）道具の名前は覚えなくて大丈夫。「作る・置く・公開する・探してもらう」の4つの場所と、住所（ドメイン）だけ押さえます。

push すると、自動で公開される

Cloudflare Pages を GitHub のリポジトリとつなぐと、（手元のコミットを GitHub に上げること）するたびに、自動でビルドして公開してくれます。本番の（main など）に入れたものは本番に、ほかのブランチに入れたものは、本番に影響しない確認用の「プレビュー」の URL に出ます。

1Claude Code と、手元でページを直す
2コミットして、GitHub に push
3Cloudflare Pages が自動でビルド
4main なら本番、ほかのブランチならプレビュー
（イラスト）1回つないでしまえば、あとは「直して push」をくり返すだけです。

Git とコミットのことは、コース3のレッスン8でくわしく説明しています。

コース4の6本の地図

このコースは、全体図の左から右へ順に進みます。公開してもすぐに検索に出るわけではなく、Google は自動でサイトを見つけますが、新しいサイトに気づくまで数週間かかることもあります。

レッスンすること
1 全体図道具と流れを知る（このレッスン）
2 決めるだれに・何を・どのページを、を決めてメモにする
3 作るClaude Code に Astro のサイトを作ってもらい、手元で見る
4 選ぶ置き場所と、ドメインの取り方を知る
5 公開するCloudflare Pages を GitHub とつなぎ、ドメイン・HTTPS・転送を設定する
6 検索noindex を外し、Search Console にサイトマップを送る
（イラスト）レッスン5までは、検索に出ないようにしたまま進めます。
よくある勘違い

「サイトを公開するには、サーバーを自分で管理しないといけない」わけではありません

サーバーを借りて、ファイルを手で上げ続ける
直すたびに上げる手間がかかり、上げ忘れや上げまちがいも起きます
GitHub に push すると、自動で公開される
Cloudflare Pages を GitHub とつなげば、push のたびにビルドから公開までやってくれます

やってみよう

  1. 下の「道具と、それぞれの役わり」の表を見て、作る・置く・公開する・探してもらうの4つの場所を確かめます
  2. 作りたいサイトを1つ思いうかべて、だれに向けたサイトかを1文で書いてみます
  3. 下の依頼文を Claude Code に送って、自分のパソコンに必要な道具（Node.js・Git）が入っているかを確かめてもらいます
準備を確かめる依頼文（Claude Code に）これから Astro で Webサイトを作って、GitHub と Cloudflare Pages で公開したい。このパソコンに Node.js と Git が入っているか、入っていれば版（バージョン）を確かめて。入っていなければ、入れ方を公式のページで確かめて教えて。まだ何もインストールしないで。

確認問題

Q1. Cloudflare Pages を GitHub とつないだあと、サイトを直して公開するには？
Q2. 本番のブランチ（main）以外のブランチに push すると、どうなる？
今日の練習

作りたいサイトについて「だれに」「何を届けるか」を1文ずつ書いておきましょう。レッスン2で使います。

コースのはじめ
コース4 Webサイト編の目次

この記事の用語

コース4 Webサイト編の目次

  1. 1Webサイトができるまでの全体図
  2. 2どんなサイトにするか決める
  3. 3Claude Code でサイトを作る
  4. 4サーバーとドメインを選ぶ
  5. 5公開する
  6. 6検索に出るようにする