Claude Code で作った HTML を GitHub Pages で公開する方法

Claude Codeでサイトは作れた。でも「公開の仕方」でつまずく

Claude Code に頼めば、HTML のサイトは驚くほど簡単に作れます。けれど、「作れたのに、ネット上に公開する方法がわからない」——ここで止まってしまう人がとても多いです。

いちばん手軽なのが、GitHub Pagesを使う方法。Publicリポジトリで作る前提なら無料で、静的なサイト（HTML / CSS / JavaScript）ならこれで公開できます（公式: GitHubの各種プラン｜GitHub Docs ）。この記事では、「作ったあとの公開だけ」を、つまずきやすいポイントにしぼって解説します。

※ GitHub の画面（メニュー名やボタン位置）は変わることがあります。最新は GitHub の実画面でご確認ください。本記事は 2026年5月時点です。

---

こんな方に読んでほしい

• Claude Code で HTML サイトは作れたけど、公開の仕方がわからない
• サーバーやドメインの契約はまだしたくない、まず無料で出したい
• GitHub は名前は知っているけど、使ったことがない

---

前提：GitHub Pages で公開できるもの・できないもの

• できる：HTML / CSS / JavaScript だけで動く静的サイト（紹介サイト、ポートフォリオ、LP など）
• できない：データベースやサーバー側の処理が必要なもの（会員機能・問い合わせの保存・WordPress そのものなど）

「Claude Code で作った1枚もの〜数ページの HTML サイト」なら、ほぼ問題なく公開できます。

---

手順1：GitHub アカウントとリポジトリを用意する

1. github.com で無料アカウントを作成
2. 新しいリポジトリ（repository＝サイトの保管場所）を作成（例：my-site）
   
   – 公開（Public）で作成（GitHub Pages の無料公開は Public が前提）

リポジトリは「サイトのファイルを置く箱」というイメージで大丈夫です。

---

手順2：git の操作は Claude Code に任せる

ここがこの記事のラクなところ。git の操作（保存・アップロード）は、Claude Code に日本語で頼めばやってくれます。

たとえば、こう頼みます。

「このフォルダを git で初期化して、さっき作った GitHub のリポジトリ（URL）に push して」

すると Claude Code が、git init（初期化）→ git add（ファイル登録）→ git commit（保存）→ git push（GitHub へアップロード）までを順にやってくれます。コマンドを覚える必要はありません（中で何をしているかは Claude Codeとは も参考に）。

💡 初回は GitHub へのログイン（認証）を求められます。画面の案内に従って認証すれば、次回からはスムーズです。

---

手順3：GitHub Pages を「オン」にする（ここがゴール）

ファイルが GitHub に上がったら、最後に公開設定をします。ここだけは自分で画面を操作します。

1. GitHub のリポジトリページを開く
2. 上部メニューの 「Settings（設定）」 をクリック
3. 左メニューの 「Pages」 を選ぶ
4. 「Branch（ブランチ）」の欄で main を選び、フォルダは / (root) のまま 「Save」
5. 少し待つと、ページ上部に 公開 URL（https://ユーザー名.github.io/リポジトリ名/）が表示される

この URL を開いて、自分のサイトが表示されれば公開完了です。反映まで数分かかることがあります。

---

つまずきやすいポイント

• 真っ白なページが出る：index.html というファイル名になっているか確認（トップページは index.html が基本）
• 404 が出る：公開直後は反映待ちのことが多い。数分おいて再読み込み
• 画像が出ない：ファイルのパス（images/photo.jpg など）が合っているか。これも Claude Code に「画像が表示されない」と伝えれば直してくれます

---

もっと本格的にするなら（次のステップ）

• 独自ドメイン：github.io のままでも公開できますが、後から独自ドメインを割り当てることもできます
• WordPress でブログにしたい：GitHub Pages は静的サイト専用なので、ブログとして育てるなら WordPress＋レンタルサーバーへ。その入口は MacでWordPressブログを始める方法 をどうぞ

まずは「無料で、世界に公開できた」という成功体験を作るのがいちばん大事です。

---

まとめ

• GitHub Pages は無料の静的サイト公開（Publicリポ前提）。Claude Code で作った HTML サイトと相性がいい
• git の操作（保存・アップロード）は Claude Code に頼めるので、コマンドは覚えなくてOK
• 自分で操作するのは Settings > Pages で main を選んで Save の一手だけ
• 動的な機能が必要になったら WordPress＋サーバーへステップアップ

「作っただけ」で止めず、まず公開して、URL を持つ。そこから改善していくのが、いちばん早く前に進む方法です。

---

同じHTMLを別の場所に出したい場合は、Cloudflare Pages で公開する方法もあります。独自ドメインを当てたいときはこちらが向いています。

Claude Code そのものが初めての方は、Claude Codeとは？から読むと、この記事の手順がつかみやすくなります。