ClaudeCode入門ガイド
トップ
Claude Code で作る Webサイト作成・ホームページ作成 12レッスン完全コース/カリキュラム/第4章: 公開する/4-3 GitHub Pages でサイトを公開する

4-3 GitHub Pages でサイトを公開する

無料

GitHub Pages の設定を ON にして、世界中からアクセスできる公開 URL を取得します。独自ドメインを取得して接続する手順と公開後の動作確認の進め方も合わせて解説します。

第4章: 公開する15分

「公開する」ということ

ローカルのブラウザで動いていたサイトを、世界中の誰でも見られる状態にする。これが今回のゴールです。コードは前回までで GitHub に push 済みなので、あと数クリックで URL が生まれます。

公開のしくみは次の通りです。GitHub のリポジトリには静的サイトを配信する機能（GitHub Pages）が付いており、それを ON にすると GitHub のサーバーが index.html を読み取り、世界中に配信してくれます。サーバーの契約も、独自のホスティング会社の登録も不要です。

このレッスンでは、実際に公開し、URL を確認し、最終的に独自ドメインと HTTPS まで設定して、Website コースを卒業するところまで進めます。

GitHub Pages を有効にする

GitHubリポジトリの設定から GitHub Pages を有効にします。前回作成した cafe-blue-website リポジトリを開いてください。

<Steps items={[{"title":"リポジトリの Settings を開く","body":"リポジトリページの上部メニュー右端にある Settings タブをクリックします。リポジトリの管理画面が開きます。"},{"title":"左メニューから Pages を選ぶ","body":"左サイドバーをスクロールし、Code and automation セクションの Pages をクリックします。"},{"title":"Source を「Deploy from a branch」に設定","body":"Build and deployment の Source ドロップダウンから Deploy from a branch を選びます。"},{"title":"Branch で main を選択","body":"Branch のドロップダウンで main を選び、フォルダは / (root) のまま、Save をクリックします。"},{"title":"ビルド完了を待つ","body":"保存後、ページ上部に「Your site is live at ...」というメッセージが表示されるまで数分待ちます。初回は最大10分かかることもあります。"}]} />

設定中に迷ったら、Claude Code に「GitHub Pages の設定画面で Source ってどれを選べばいい？」と聞けば説明してくれます。

公開 URL の確認

GitHub Pages のビルドが完了すると、次の形式の URL でサイトが公開されます。

https://あなたのユーザー名.github.io/cafe-blue-website/

たとえば GitHub のユーザー名が taro-yamada なら、URL は https://taro-yamada.github.io/cafe-blue-website/ です。Settings → Pages の画面に表示される URL をクリックすれば、新しいタブでサイトが開きます。

スマートフォンでも同じ URL でアクセスできるので、自分の電話に URL を送って表示を確認してみてください。レスポンシブ対応していれば、画面サイズに合わせてレイアウトが切り替わります。

ビルドが終わらない・404 になるとき

公開直後によくあるトラブルと対処法は下記のとおりです。

  • 「Your site is live at ...」が表示されない — リポジトリの Actions タブを開き、pages build and deployment ワークフローが緑のチェックになっているか確認します。赤い x の場合はエラー詳細をクリックし、その内容を Claude Code に貼り付けて原因を聞きます。
  • URL を開くと 404 になる — index.html がリポジトリのルート直下にあるか確認します。cafe-blue-website/index.html のように一段深いフォルダに入っていると見つけられません。
  • CSS が反映されない — <link rel="stylesheet" href="/styles.css"> のように先頭スラッシュ付きで書くと、サブパス配信ではパスが崩れます。href="styles.css" のような相対パスに直すと解決します。
  • 画像が壊れている — 画像ファイルが本当に push されているかを GitHub のリポジトリ画面で確認します。.gitignore で除外されていることがあります。

これらは全部「動かないんだけど、原因を一緒に探して」と Claude Code に投げれば、ファイルを読みながら原因を特定してくれます。

独自ドメインを設定する（任意）

username.github.io/repo-name/ という URL でも公開できますが、自分のドメイン（例 cafeblue.jp）を持っているなら、それを当てるとぐっとプロらしくなります。

設定の流れは次の通りです。

<Steps items={[{"title":"ドメインを用意する","body":"お名前.com、Cloudflare Registrar、Google Domains（現 Squarespace Domains）などで取得します。年間 1,000〜3,000 円が相場です。"},{"title":"GitHub の Pages 画面でドメインを登録","body":"Settings → Pages の Custom domain に cafeblue.jp のように入力し、Save をクリックします。リポジトリのルートに CNAME ファイルが自動生成されます。"},{"title":"DNS レコードを設定する","body":"ドメイン取得元の管理画面で DNS レコードを追加します。ルートドメイン（cafeblue.jp）なら A レコードで GitHub Pages の IP（185.199.108.153 など 4 つ）を指定、サブドメイン（www.cafeblue.jp）なら CNAME レコードで あなたのユーザー名.github.io を指定します。"},{"title":"DNS 反映を待つ","body":"数分〜数時間で反映されます。GitHub の Pages 画面で DNS check successful と表示されれば完了です。"},{"title":"HTTPS を有効化","body":"Enforce HTTPS のチェックボックスをオンにします。Let's Encrypt の証明書が自動発行され、https://cafeblue.jp でアクセスできるようになります。"}]} />

DNS の用語（A レコード、CNAME、TTL）は最初は意味不明で当然です。「ドメインは cafeblue.jp で取得した。GitHub Pages に当てたいから A レコードと CNAME の設定値を教えて」と Claude Code に聞けば、コピペできる形で答えが返ってきます。

HTTPS を有効にする

独自ドメインを使わない場合でも、username.github.io 配下のサイトはデフォルトで HTTPS 対応済みです。独自ドメインを当てた場合は、必ず Enforce HTTPS のチェックを入れてください。HTTPS でないと、検索エンジン（Google）の評価が下がり、ブラウザにも「保護されていません」と表示されます。

証明書の発行は GitHub が自動で行うため、ユーザー側で証明書ファイルを扱う必要はありません。発行に最大 24 時間かかることがあるので、独自ドメインを当てた直後にチェックボックスがグレーアウトしていたら、しばらく待ってから戻ってきます。

更新する流れ

公開した後にサイトを更新したいときは、毎回 GitHub Pages の設定をいじる必要はありません。流れは次の通りです。

  1. ローカルでファイルを編集する（Claude Code に依頼）
  2. 変更を git add → git commit → git push で GitHub に送る
  3. 数分待つと、本番サイトに自動で反映される

つまり、一度公開設定をしてしまえば、あとは push するだけ で本番が更新されます。継続的にコンテンツを足せるブログ的な使い方も自然にできます。

更新作業も Claude Code に「メニューに新メニュー『季節のフルーツタルト』を追加して、push まで実行して」と頼めば、編集とコミットを一気にやってくれます。

公開 URL を共有してみる

URL ができたら、誰かに見てもらいましょう。最初の読者は家族や友人で十分です。「自分で作ったサイトなんだけど見て」とメッセージするだけで、感想が返ってきます。これがサイト運営の最初の一歩です。

共有のときに気をつけたいのは下記のとおりです。

  • モバイルで開いたときの体験 — 友人の多くはスマホで開きます。文字サイズ、ボタンの押しやすさ、画像の重さを必ず確認する
  • 読み込み速度 — モバイル回線で 3 秒以上かかると離脱されます。画像サイズの圧縮を Claude Code に頼んでおく
  • シェア時のサムネ — LINE や X で URL を貼ったとき、味気ない見た目だとクリックされにくい。OG 画像と OG タイトルを必ず設定する

特に OG 画像は効果が大きいので、メインビジュアルがある人は早めに設定することをおすすめします。

より速くしたいなら Cloudflare Pages

GitHub Pages で十分ですが、もっと速くしたい、ビルド機能（Astro、Next.js など）を使いたい、アクセス数が多くなりそう、という場合は Cloudflare Pages への移行を検討すると良いです。

特徴は次の通りです。

  • 配信が速い — 世界 300 拠点以上の CDN から配信される
  • ビルドが自動 — Astro、Next.js、Vue などのフレームワークを自動検出してビルドしてくれる
  • 無料枠が大きい — 月 500 ビルド、無制限のリクエスト
  • 同じドメイン管理 — Cloudflare でドメインを取得していれば DNS 設定が画面内で完結

GitHub リポジトリを Cloudflare Pages につなぐだけで、main ブランチに push するたびに自動デプロイされる仕組みが整います。今回のシンプルな HTML サイトでは差を感じにくいですが、サイトが育ってきたら検討してみてください。

SEO の仕上げ

サイトを公開しても、検索結果に出てこなければ誰にも見つけてもらえません。最低限やっておきたい SEO 設定は下記のとおりです。

  • <title> と <meta name="description"> を意味のあるものにする — 各ページごとに違う内容を書く
  • <meta property="og:image"> を設定する — SNS シェア時のサムネイル画像
  • favicon.ico を置く — ブラウザのタブに表示される小さなアイコン
  • sitemap.xml を用意する — 検索エンジンにページ一覧を伝える
  • robots.txt を置く — クロールしてよいページを明示する

これらは全部「SEO 用のメタタグとサイトマップを追加して」と Claude Code に頼めば、必要なファイルを生成してくれます。

その上で Google Search Console にサイトを登録します。https://search.google.com/search-console/ にアクセスし、所有権を確認し、サイトマップを送信すれば、Google にインデックスしてもらえるようになります。

アクセス解析を入れる

「誰が、どこから、どのページを見たか」を知るためにアクセス解析を入れます。選択肢は下記のとおりです。

  • Cloudflare Web Analytics — 軽量、Cookie 不要、プライバシー配慮型。Cloudflare Pages で配信しているなら最も簡単
  • Google Analytics 4 (GA4) — 機能が豊富、無料、ただし Cookie 同意バナーが必要になることが多い
  • Plausible / Fathom — 有料だがシンプル、プライバシーに優しい

初めてなら GA4 か Cloudflare Web Analytics で十分です。「GA4 のトラッキングコードを <head> に入れて」と Claude Code に頼めば、計測ID を聞かれた上で正しい位置にスニペットを挿入してくれます。

公開後のチェックリスト

サイトを公開したら、最後に下記をひと通り確認します。

これだけ揃えば、最低限「ちゃんとしている」サイトとして公開できています。

Quiz

<Quiz question="GitHub Pages を有効化するために、Settings → Pages で最初に選ぶべき項目はどれですか？" options={["Branch を main、Source を Deploy from a branch に設定する","Repository を public に変更する","Actions を有効化する","Wiki を有効化する"]} correctIndex={0} explanation="Source で「Deploy from a branch」を選び、Branch を main に設定するのが基本の流れです。これだけでビルドが走り、数分後に URL が払い出されます。" />

<Quiz question="独自ドメインを GitHub Pages に当てて HTTPS を有効化するために必須の作業は次のうちどれですか？" options={["サーバー証明書を自分で購入して GitHub にアップロードする","DNS を設定し、Enforce HTTPS のチェックを入れる","GitHub Pro プランに加入する","リポジトリを private にする"]} correctIndex={1} explanation="GitHub Pages は Let's Encrypt の証明書を自動発行するため、ユーザー側がやることは DNS を正しく設定して Enforce HTTPS にチェックを入れるだけです。証明書の購入もプランの加入も不要です。" />

Challenge

ポイント

チャレンジ

公開した URL を SNS（X、LINE、Instagram のストーリーなど）でシェアしてみましょう。シェアしたときに表示されるカードが寂しい場合は、Claude Code に「OG 画像とディスクリプションを設定して、シェア時のカードを見栄え良くして」と頼んで仕上げてください。

余裕があれば、独自ドメインを 1 つ取得して当て、https://your-domain.com で公開する形まで進めてみましょう。年間 1,500 円ほどの投資で「自分のサイト」感が一気に上がります。

Website コース、卒業！

おめでとうございます。これで Website コース全 4 章を完走しました。あなたは今、次のことができるようになっています。

  • Claude Code の環境構築と基本操作
  • 1 枚もののランディングページ（LP）の作成
  • 複数ページサイトへの拡張、ナビゲーション、共通レイアウト
  • Git と GitHub による履歴管理
  • GitHub Pages での公開、独自ドメイン、HTTPS

ここまで来たら、もう「コードを書かない人」ではありません。コードを Claude に書いてもらえる人 です。これは、Web 制作会社に頼まないと作れなかった時代と比べて、決定的に新しい立ち位置です。

次のステップ

ここから先の伸ばし方は人それぞれですが、おすすめの方向性は下記のとおりです。

  • SEO コース — 公開したサイトを Google で見つけてもらうための実践的なテクニック。検索意図、キーワード設計、内部リンク、サイト構造、Core Web Vitals まで一通り扱います
  • 入門コース 第6章「Web アプリ」 — 静的サイトの次のステップ。フォーム送信、データベース、ログイン機能など、動きのあるサイトを作る回
  • デザインコース（準備中） — 配色、タイポグラフィ、レイアウトの基本を学び、見た目のクオリティを底上げする
  • 自分のビジネスで実戦投入 — 学んだことを使って、自社の LP、ポートフォリオ、ブログを作る。実戦が一番伸びます

サイトは「作って終わり」ではなく、作ってからが本番 です。コンテンツを足し、デザインを磨き、訪問者の行動を見ながら改善していく。その繰り返しが、検索順位もコンバージョン率も押し上げていきます。

Claude Code はそのすべての工程に伴走してくれる相棒です。これからも気軽に「こうしたい」「ここ直して」「これって何？」と話しかけてみてください。

改めて、Website コース完走おめでとうございます。あなたの作ったサイトが、世界のどこかで誰かの役に立ちますように。