GitHub Pagesで無料公開する流れ
GitHub Pagesは、GitHubが提供する、作ったWebサイトを公開できるサービスです。Claude Codeで作ったHTMLサイトも、サーバーを借りずに公開できます。
Publicリポジトリで作る前提なら無料で、静的なサイト（HTML / CSS / JavaScript）を公開できます（公式: GitHubの各種プラン｜GitHub Docs ）。この記事では、作ったあとの公開に絞り、GitHubアカウントの作成からGitHub Pagesの設定、つまずきやすい点までを手順で紹介します。
※ GitHub の画面（メニュー名やボタン位置）は変わることがあります。最新は GitHub の実画面でご確認ください。本記事は 2026年5月時点です。
こんな方に読んでほしい
- Claude Code で HTML サイトは作れたけど、公開方法がわからない
- サーバーやドメインの契約はまだしたくない、まず無料で出したい
- GitHub は名前は知っているけど、使ったことがない
前提：GitHub Pages で公開できるもの・できないもの
- できる：HTML / CSS / JavaScript だけで動く静的サイト（紹介サイト、ポートフォリオ、LP など）
- できない：データベースやサーバー側の処理が必要なもの（会員機能・問い合わせの保存・WordPress そのものなど）
「Claude Code で作った1枚もの〜数ページの HTML サイト」なら、ほぼ問題なく公開できます。
手順1：GitHub アカウントとリポジトリを用意する
- github.com で無料アカウントを作成
- 新しいリポジトリ（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 に上がったら、最後に公開設定をします。ここだけは自分で画面を操作します。
- GitHub のリポジトリページを開く
- 上部メニューの 「Settings（設定）」 をクリック
- 左メニューの 「Pages」 を選ぶ
- 「Branch（ブランチ）」の欄で
mainを選び、フォルダは/ (root)のまま 「Save」 - 少し待つと、ページ上部に 公開 URL（
https://ユーザー名.github.io/リポジトリ名/）が表示される
この URL を開いて、自分のサイトが表示されれば公開完了です。反映まで数分かかることがあります。
つまずきやすいポイント
- 真っ白なページが出る：
index.htmlというファイル名になっているか確認（トップページはindex.htmlが基本） - 404 が出る：公開直後は反映待ちのことが多い。数分おいて再読み込み
- 画像が出ない：ファイルのパス（
images/photo.jpgなど）が合っているか。これも Claude Code に「画像が表示されない」と伝えれば直してくれます
次のステップ：独自ドメインとWordPress
- 独自ドメイン：
github.ioのままでも公開できますが、後から独自ドメインを割り当てることもできます - WordPress でブログにしたい：GitHub Pages は静的サイト専用なので、ブログとして育てるなら WordPress＋レンタルサーバーへ。その入口は MacでWordPressブログを始める方法 で紹介しています
まずは無料で公開して、自分のサイトのURLを持つところから始めてください。
まとめ
- GitHub Pages は無料の静的サイト公開（Publicリポ前提）。Claude Code で作った HTML サイトと相性がいい
- git の操作（保存・アップロード）は Claude Code に頼めるので、コマンドは覚えなくてOK
- 自分で操作するのは Settings > Pages で
mainを選んで Save の一手だけ - 動的な機能が必要になったら WordPress＋サーバーへステップアップ
GitHub Pagesを使えば、Claude Codeで作ったHTMLサイトを、Publicリポジトリの前提で無料公開できます。公開したら、URL を開いて表示を確認し、そこから改善していってください。
Claude Code そのものが初めての方は、Claude Codeとは？から読むと、この記事の手順がつかみやすくなります。
気になったことは、お気軽に
この記事のとおりに進めてみて、うまくいかないところがあれば遠慮なく聞いてください。
制作や設定のご相談も、同じ窓口で受けています。
