Claude CodeでGitHub Pagesにサイトを公開する手順と運用ガイド

Claude CodeでGitHub Pagesに公開してできること

この記事を読み終えると、Claude Codeで作った静的サイトを自分のPCとGitHubアカウントだけでGitHub Pagesに公開し、公開後の更新やちょっとしたトラブル対応まで自分で進められるようになります。

全体の流れは、Claude Codeにサイトを作らせる、GitHubリポジトリへpushする、GitHub Pagesを有効化する、発行されたURLで公開を確認する、という4段階です。公開後は「修正を指示してpushし直すと自動で反映される」というサイクルに入るため、一度覚えてしまえば繰り返し作業になります。

この記事は、コーディング経験が少なくても「まず自分の作ったものを世に出したい」という読者を主な対象にしています。Gitやコマンドライン操作に不安がある場合は、非エンジニアがつまずきやすい点を先に確認しておくと、途中で迷いにくくなります。Claude Code自体の概要を先に知りたい場合はClaude Codeとは何かも参考になります。

Claude Code CLI版とClaude Code on the web版、どちらで進めるべきか

手順の差分はこの節にまとめてあり、以降の章ではCLI版を基本形として説明し、web版で異なる部分だけをその都度注記します。

Claude Code CLI版は、自分のPCにインストールしたClaude Codeから、ローカルのGitリポジトリを操作してGitHubへpushする方式です。ghコマンド（GitHubの公式CLIツール）やGit連携が前提になるため、事前にGitHubアカウントとの認証設定を済ませておく必要があります。導入手順はClaude Codeのインストールガイドにまとめてあります。エディタ上で使いたい場合はVSCode拡張の使い方もあわせて確認してください。

Claude Code on the webは、ブラウザ上で完結する形でコードを生成・実行できる仕組みです。ローカル環境の構築が不要な一方、Git操作の一部がCLI版と異なる可能性があります。この違いは頻繁に更新される領域のため、実際に使う直前にGitHub公式ヘルプおよびAnthropicの公式ドキュメントで最新の挙動を確認してください。

以降、指示の出し方を説明する章では、CLI版の操作を基本として提示します。web版を使う場合の違いは、都度この節を参照する形で簡潔に触れるにとどめます。

publicリポジトリとprivateリポジトリの選び方

判断基準は「不特定多数に見せたいものか、社内など限られた相手にだけ共有したいものか」の一点に絞って考えると選びやすくなります。この節は選び方に特化し、選んだあとの情報漏洩対策は後述の秘密情報の管理の章で扱います。

GitHub Pagesは、publicリポジトリであれば無料で静的サイトを公開できる仕組みとして広く知られています。privateリポジトリからの公開には有料プランなど一定の条件が必要になる場合があるため、正確な条件は執筆時点の情報のため、公開作業に取りかかる前に必ず最新の条件をGitHub公式サイトで確かめてください。

判断軸としては、ポートフォリオやデモサイトのように誰に見られても問題ない内容であればpublic、社内の検証用サイトや取引先限定の共有物であればprivateを検討する、という考え方が基本になります。業務での情報の扱い方に迷う場合は、Claude Codeの運用ルールの考え方も判断材料になります。

Claude Codeにどう指示すれば、サイト作成から公開まで進められるか

Claude Codeに対しては、サイトの内容を伝えたあとに「GitHubリポジトリを作ってpushしてほしい」と自然な日本語で指示すれば、必要なGit操作をまとめて実行してもらえます。

CLI版での指示例は次のような流れになります。

新しいポートフォリオサイトのHTMLとCSSを作ってください。
できたらGitのリポジトリを初期化して、GitHub上にリポジトリを作成し、
最初のコミットをpushしてください。GitHub認証がまだの場合は
gh auth login の実行方法も教えてください。

この指示をもとに、Claude Codeが git init、git add、git commit、git push、必要に応じて gh repo create といったコマンドを順に提案・実行してくれます。コミットやpushの実務的な注意点はClaude CodeのGit操作ガイドで詳しく扱っているので、コマンドの意味を一つずつ確認したい場合はそちらを参照してください。

web版を使う場合、指示文自体は近い内容で問題ありませんが、Git操作の実行方法がCLI版と異なることがあります。差分の詳細は前章（CLI版とweb版の違い）を参照してください。基本的な指示の出し方全般はClaude Codeの使い方ガイドにもまとめています。

GitHub Pagesの有効化と公開URLの確認

公開作業自体は、GitHubリポジトリの「Settings」から「Pages」を開き、公開したいブランチとフォルダを選択するだけで完了します。

設定を保存すると、リポジトリ名に応じた形式の公開URLが発行されます。反映には数分程度のタイムラグが生じることがあるため、設定直後にページが表示されなくても、少し時間を置いてから再度アクセスしてみてください。

GitHub Pagesはあくまで静的サイト（サーバー側でプログラムを実行しない、HTMLやCSS、JavaScriptだけで完結するサイト)を公開する仕組みです。サーバー側での処理やデータベースを使う動的なサイトは、この方法では公開できない点を押さえておく必要があります。

公開したサイトを継続的に更新するにはどうすればよいか

更新の運用は、Claude Codeに修正内容を指示してpushし直すだけで、GitHub Pages側が自動的に再反映してくれる流れになります。

具体的には、「トップページの文言を修正してpushしてください」のように追加の指示を出すと、Claude Codeがコミットとpushまで行い、数分後には公開ページに変更が反映されます。反映が確認できないときは、次の3点を順に見ていくと原因の切り分けがしやすくなります。

ブラウザのキャッシュが古いページを表示していないか(強制リロードで再確認する)
pushしてからまだ反映のタイムラグの範囲内ではないか(少し時間を置いて再確認する)
Settings > Pagesで指定しているブランチやフォルダが、実際に更新した内容と一致しているか

これらを確認しても解決しない場合は、症状別の切り分け方をClaude Codeのエラー・トラブルシューティングガイドにまとめているので、そちらを参照してください。

秘密情報をpublicリポジトリに公開しないための対策

この節は先述の「publicリポジトリとprivateリポジトリの選び方」で扱った選ぶ基準とは異なり、publicを選んだあとに秘密情報を漏らさないための具体策を扱います。

APIキーやパスワード、個人情報を含むファイルは、そもそもリポジトリに含めないことが基本の対策になります。.gitignore(Gitの管理対象から除外するファイルを指定する設定ファイル)に、機密情報を含みやすいファイルをあらかじめ登録しておくと、うっかりコミットしてしまう事故を防ぎやすくなります。

# .gitignoreの例
.env
.env.local
*.pem
secrets/
config/credentials.json

これに加えて、pushする前にClaude Code自身へ「このコミットに機密情報が含まれていないか確認してください」と指示する習慣をつけると、二重のチェック体制になります。次のような運用チェックリストを毎回のpush前に使うと、確認漏れを防げます。

.envなど環境変数ファイルが .gitignore に登録されているか
コミットに含まれる差分（git diff の内容)にキーや個人情報が写り込んでいないか
Claude Codeに機密情報の混入チェックを依頼し、指摘がないか確認したか
publicで公開して問題ない内容かどうかを、公開前にもう一度見直したか

業務でこうした運用ルールを社内標準として整えたい場合は、Claude Codeを使う際の運用ルールや、より高度なセキュリティ要件が絡む場合の企業向けセキュリティガイドも合わせて確認しておくと安心です。

公開してもサイトが表示されない・404になるときは何を確認すべきか

404エラーやページが表示されない症状の多くは、ブランチ設定のミス、公開対象フォルダに index.html が存在しないこと、パス指定のずれのいずれかが原因です。

Settings > Pagesで指定しているブランチとフォルダが、実際にサイトのファイルを置いている場所と一致しているかをまず確認してください。次に、公開対象フォルダの直下に index.html が存在するかどうかを確認します。サブフォルダにファイルを置いている場合、リンク先のパスがずれて一部のページだけ表示されないこともあります。

これらを一つずつ切り分けても解決しない場合は、Claude Codeのトラブルシューティングガイドで他の症状パターンも確認してみてください。

独自ドメイン・HTTPS・SEOへの向き合い方

個人のポートフォリオやデモサイトであれば、GitHub Pagesが自動で発行するURLとHTTPSの仕組みだけで十分なことが多く、独自ドメインの取得は「名刺代わりのURLにしたい」など明確な目的がある場合に検討すれば足ります。

独自ドメインの設定やSEO対策の詳細な手順はこの記事のスコープ外とし、実施する際は最新の設定方法をGitHubの公式サイトで確かめながら進めてください。ここでは、GitHub Pagesと他の代表的なホスティングサービスを、用途・独自ドメイン対応・ビルドの要否という軸で比較しておきます。

サービス	主な用途	独自ドメイン対応	ビルドの要否
GitHub Pages	静的サイトの無料公開	対応（設定が必要）	不要（静的ファイルのみ）
Vercel	Next.jsなどのフロントエンド公開	対応	必要な場合が多い
Netlify	静的サイト・簡易的なフォーム機能付きサイト	対応	プロジェクトによる
Cloudflare Pages	静的サイトの高速配信	対応	プロジェクトによる

Next.jsの静的書き出しなど、公開前にビルド処理が必要なプロジェクトを自動化したい場合は、GitHub Actions（GitHubが提供する自動実行の仕組み）の領域に踏み込むことになります。ビルドを伴う公開の詳細はClaude CodeとGitHub Actionsの活用ガイドにまとめているので、必要になった段階で参照してください。

まとめ：個人サイトの公開から、業務でのClaude Code活用へ

ここまでの流れをたどれば、Claude Codeで作ったサイトをGitHub Pagesで公開し、公開範囲を選び、事故を防ぎながら更新していく、という一連の作業を自分だけで進められるようになっているはずです。CLI版とweb版の違いは「Claude Code CLI版とClaude Code on the web版、どちらで進めるべきか」の章に、公開範囲の選び方は「publicリポジトリとprivateリポジトリの選び方」の章に、事故防止の具体策は「秘密情報をpublicリポジトリに公開しないための対策」の章に整理してあるので、迷ったときは該当箇所に戻って確認してください。

個人のポートフォリオ公開がひととおりできるようになると、次に出てくるのは「これをチームや会社の業務でどう展開すればよいか」という疑問です。権限設計や運用ルールの整備、チームでの学習機会づくりまで視野に入れたい場合は、Claude Codeの研修サービスの選び方も判断材料として確認してみてください。