GitHub Pages

version-control web beginner

GitHubのリポジトリに保存したファイルを直接読み込み、無料でWebサイトとしてインターネット上に公開できるサービス。

概要（サマリー）

GitHub Pages（ギットハブ・ページズ）は、ソースコード管理サービスである GitHub が提供する無料のホスティングサービスである。

GitHub上の「リポジトリ（保管庫）」に、作成したHTML、CSS、JavaScriptなどのファイルを保存し、Pagesの公開元を設定すると、Webサイトとして公開（デプロイ）できる。

詳細解説

GitHub Pagesとは何か

自分で作成したWebサイトをインターネット上で誰かに見てもらうには、ファイルを保存しておくための「サーバー」が必要になる。通常はレンタルサーバーを借りて月々の費用を払う必要がある。

GitHub Pagesは、GitHubのリポジトリから作成した静的サイトを公開できるサービスである。公開リポジトリでは無料プランでも利用できるが、非公開リポジトリで使う場合などはプラン条件が関係するため、利用前にGitHub公式の最新条件を確認するとよい。

GitHub Pagesの特徴とメリット

公開リポジトリなら始めやすい: 公開リポジトリでは無料プランでも利用でき、サーバー契約なしで静的サイトを公開しやすい。
Gitとの連携: Git を使ってファイルを更新（プッシュ）するだけで、自動的に公開サイトの中身も最新版に書き換わる。
SSL（HTTPS）対応: 最初から安全な暗号化通信（https://）に対応した状態で公開される。
URLの法則: 公開されるURLは自動的に https://[ユーザー名].github.io/[リポジトリ名]/ になる。

公開するまでの簡単な手順

基本的なHTMLファイルをGitHub Pagesで公開する手順は以下の通りである。画面名や設定項目はGitHub側の更新で変わることがあるため、実際の操作時は公式ドキュメントも確認するとよい。

ファイルを準備: プロジェクトのトップ（ルート）に index.html という名前でファイルを配置する。
GitHubへプッシュ: GitHub上に新しいリポジトリを作成し、コードをプッシュする。
Pagesの設定を有効化:
- リポジトリの画面で「Settings（設定）」タブを開く。
- 左メニューから「Pages」を選択する。
- 「Branch」の項目で公開したいブランチ（通常は main や master）を選択し、「Save（保存）」ボタンを押す。
公開完了: 数分待つと設定画面の上部に公開されたURLが表示され、アクセス可能になる。

GitHub Pagesで公開できるサイト（静的サイト）

GitHub Pagesで公開できるのは、「静的サイト（Static Site）」に限られる。

公開できるもの: HTML、CSS、JavaScript、画像ファイル。ブラウザ側だけで処理が完結するもの。ViteなどでビルドしたReactやVueなどのアプリも、最終的に静的ファイルに変換されていれば公開可能である。
公開できないもの: PHP、Ruby、Python、Node.js などがサーバー上で動作するプログラムや、WordPress（データベースが必要な動的サイト）。

カスタムドメインの設定

GitHub Pagesが発行するURL（github.io）ではなく、自分で購入したお好みのURL（カスタムドメイン）を使ってサイトを公開することもできる。

GitHubの設定画面に購入したドメインを入力し、ドメインの購入元（DNSプロバイダ）側でGitHub Pagesを指し示す設定（CNAMEレコードなどの登録）を行うと、オリジナルドメインのWebサイトとして運営できる。DNS設定を誤ると表示できなかったり、別のサイトへ向いたりするため、公式手順に沿って設定することが重要である。

AIコーディングとの関係

AIコーディングにおいて、GitHub Pagesは作成した静的サイトやフロントエンドアプリを公開し、動作テストやポートフォリオとして共有するための有力な手段である。

AIに指示を出す際は、特にビルドツール（Viteなど）と組み合わせる際の設定ミスを事前に防ぐために、以下のように質問すると良い。

AIへの指示例:
「Viteで作ったReactアプリをGitHub Pagesにデプロイしたいです。URLのパスがズレてアセットが読み込めない（404エラー）のを防ぐために、vite.config.js の base パスの設定方法を教えてください」
「ViteプロジェクトをGitHub Pagesに自動デプロイするための GitHub Actions （.github/workflows/deploy.yml）の書き方を教えてください」

特にViteやReactのプロジェクトをGitHub Pagesにアップロードする際、URLの末尾にリポジトリ名が付くため、パスの設定（base: "/リポジトリ名/"）をしておかないと画像やJavaScriptが読み込まれずに真っ白な画面になってしまうトラブルが初心者に頻出する。

この解決手順をAIに整理させることで、手動でのデプロイや自動化（CI/CD）の設定ミスを減らしやすくなる。ただし、GitHub Actionsの権限、公開元ブランチ、ビルド出力先はプロジェクトごとに違うため、実際の設定画面とログを確認しながら進める必要がある。

よくある勘違い

GitHub PagesではWordPressなどの動的サイトも動く？

動かない。前述の通り、PHPなどのプログラムを実行したりデータベースと接続したりする機能は備わっていないため、WordPressのファイルをそのままアップロードしても「プログラムのコードがテキストとしてそのまま見える」かエラーになる。もしWordPressで作ったブログをどうしても公開したい場合は、静的HTML出力プラグインなどを使って静的化してからアップロードする必要がある。

GitHub Pagesは有料になることがある？

公開リポジトリで使う場合は無料プランでも利用できる。一方、非公開リポジトリでGitHub Pagesを使う場合は、GitHub Pro、Team、Enterpriseなどの対象プランが必要になる。料金や制限は変更される可能性があるため、実際に使う前にGitHub公式のプラン条件を確認するのが確実である。

GitHub Pagesに公開すればリポジトリも自動で非公開になる？

ならない。公開リポジトリからGitHub Pagesを公開している場合、リポジトリ内のコードも基本的に公開される。APIキーやパスワードなどの秘密情報を置いてはいけない。非公開リポジトリからPagesを公開する場合でも、公開されたWebサイトの内容はインターネット上から見える前提で扱う必要がある。

まとめ

GitHub Pagesは、GitHub上のリポジトリから静的サイトを無料で公開できるホスティングサービスである
HTML、CSS、JavaScriptで構成された静的サイトのみが動作し、PHPやWordPressなどの動的システムは動かない
公開元の設定やGitHub Actionsを使うことで、変更を公開サイトに反映できる
Viteなどのプロジェクトを公開する際は、ベースパスやビルド出力先の設定ミスに注意する
公開リポジトリ、非公開リポジトリ、カスタムドメインでは条件や注意点が変わるため、公式ドキュメントを確認することが大切である

情報ソース

より詳しくAIに聞いてみよう

Viteで作成したプロジェクトをGitHub Pagesに公開する際、設定ファイル（vite.config.js）に記述すべき base プロパティの正しい書き方を教えてください。
GitHub Pagesで「404 Site not found」エラーが表示された場合、確認すべき設定項目と解決手順を教えてください。
AIを使って、GitHub PagesにデプロイしたWebアプリで、お名前ドメインやムームードメインなどで取得した「カスタムドメイン」を適用する手順を整理してください。
GitHub Actionsを活用して、GitHubにプッシュするだけで自動的にビルドとGitHub Pagesへのデプロイが完了する自動化（CI/CD）の仕組みの作り方を教えてください。
GitHub Pagesのリポジトリを「非公開（Private）」にしたままWebサイトだけを一般公開することは可能ですか？その方法と条件について教えてください。