GitHub Pagesとは: 無料の静的サイト公開を手順どおりに解説

GitHub Pagesとは

GitHub Pagesは、GitHubに組み込まれた無料の静的サイトホスティングです。サイトのファイルを通常のGitリポジトリに保存すると、GitHubがそれをHTTPSで配信します。対象のブランチに git push するたびにサイトが更新されるため、別途FTPやホスティングの管理画面を使ったり、手作業でファイルをアップロードしたりする必要はありません。

GitHub Pagesは「ギットハブ ページズ」「GitHub Pages」「git pages」など、さまざまな言い方で検索されます。正しくはGitHub Pagesで、これはGitそのものではなく、GitHubプラットフォームの機能です。Gitは変更履歴を保存するだけで、何かを公開することはありません。

GitHub Pagesは、プロジェクトのドキュメント、個人のページやポートフォリオ、ブログ、ランディングページ、ReactやVue、Svelteでビルドしたフロントエンドのデモなどに使われることが多いです。

Git Pagesは静的ファイルのホスティング

重要なのは「静的」という点です。GitHub Pagesは、HTML、CSS、JavaScript、画像、フォント、JSONといった完成済みのファイルをブラウザーに返します。サーバー側でコードを実行することはできません。PHP、Python、サーバー側のNode.js、データベースは動きません。会員登録、カート、データベースを使った管理画面が必要なら、通常のレンタルサーバーやクラウドのプラットフォームが必要です。

ただし、ブラウザー内のJavaScriptは通常どおり動きます。シングルページアプリケーションは外部APIにアクセスでき、フォームは外部サービスを通じて送信でき、サイト内検索もクライアント側で実装できます。

GitHub Pagesの3種類のサイト

GitHub Pagesには3種類のサイトがあり、種類によってアドレスが変わります。

ユーザーサイトや組織サイトは、アカウントごとに1つだけ作成できます。プロジェクトサイトは、リポジトリごとに1つずつ、いくつでも作れます。個人サイト用のリポジトリ名は、GitHubのログイン名と完全に一致させる必要があります。ログイン名が ivan-petrov なら、リポジトリ名は ivan-petrov.github.io です。

公開リポジトリでのPagesは、無料プランで利用できます。プライベートリポジトリからサイトを公開するには有料プランが必要です。ただし、公開されたサイト自体は、インターネット上の誰からでも見られます。

GitHub Pagesでサイトを公開する手順

最もシンプルな方法を見てみましょう。完成済みのHTMLファイルを、ブランチから公開します。GitHubのアカウントと、インストール済みのGitが必要です。

手順1. リポジトリを作成する

GitHubで新しい公開リポジトリを作成します。個人サイトなら username.github.io という名前にします。プロジェクトサイトなら、名前は自由です。そのうえでクローンし、トップページを追加します。

git clone https://github.com/username/username.github.io.git
cd username.github.io
echo "<h1>Hello, GitHub Pages</h1>" > index.html

トップページは必ず index.html という名前にします（index.md や README.md でもGitHubがトップページとして扱います）。大文字と小文字は区別されます。Index.html では動きません。

手順2. ファイルをGitHubに送信する

git add index.html
git commit -m "最初のページを追加"
git push origin main

初めてpushしてGitがログイン名とパスワードを尋ねてきた場合は、パーソナルアクセストークンか、ブラウザーでのログインを使ってください。GitHubのアカウントのパスワードは、HTTPSでの git push には使えません。

手順3. Pagesを設定で有効にする

GitHubでリポジトリを開き、Settings に進み、左のメニューから Pages を選びます。Build and deployment の Source で Deploy from a branch を選びます。その下で、ブランチ（通常は main）とフォルダを指定します。フォルダはルートの / (root) か /docs を選べます。最後に Save を押します。

/docs フォルダは、リポジトリにプロジェクトのコードがあり、ドキュメント用のサイトを別のディレクトリに置きたいときに便利です。

手順4. 公開されるまで待つ

公開には数秒から数分かかります。GitHubは最初の公開に最大10分かかることがあると案内しています。ビルドの進行状況は Actions タブで確認でき、pages build and deployment というプロセスが表示されます。緑のチェックマークが付くと、Settings → Pages にサイトのアドレスが表示されます。

その後は、ファイルを編集してcommitし、git push するだけです。サイトは自動的に更新されます。

GitHub Actionsによる公開

ブランチからの公開は、リポジトリに完成済みのファイルがある場合に向いています。サイトを公開する前にビルドが必要な場合、たとえばViteやReact、Hugoなどのジェネレーターを使う場合は、GitHub Actionsをソースに指定するほうが便利です。Settings → Pages の Source で GitHub Actions を選ぶと、GitHubがワークフローのテンプレートを提案します。

ビルド後の dist フォルダの静的ファイルを公開する、最小限のワークフローは次のとおりです。

name: Deploy to Pages
on:
  push:
    branches: [main]
permissions:
  contents: read
  pages: write
  id-token: write
jobs:
  deploy:
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run build
      - uses: actions/configure-pages@v5
      - uses: actions/upload-pages-artifact@v3
        with:
          path: dist
      - id: deployment
        uses: actions/deploy-pages@v4

このファイルは .github/workflows/pages.yml に配置します。git push すると、Actionsが依存関係をインストールし、プロジェクトをビルドして、dist の内容を公開します。この方法の利点は、リポジトリにはソースコードだけを保存でき、ビルド成果物でコミット履歴が膨らまないことです。

プロジェクトサイトでよくある落とし穴はパスです。サイトは /リポジトリ名/ のアドレスで開きますが、ビルドツールはデフォルトでリソースをルートの / から参照します。その結果、ページはスタイルもスクリプトもなしで表示されます。これは、ベースパスを設定して解決します。Viteでは base: '/リポジトリ名/' を指定し、他のビルドツールでも同等のオプションを使います。

Jekyllとその他の静的サイトジェネレーター

ブランチから公開する場合、GitHubは標準でファイルをJekyll（Rubyで書かれた静的サイトジェネレーター）に通します。そのため、ページをMarkdownで書き、テーマやテンプレートを使うことができます。GitHubが自動的にHTMLに変換します。ブログやドキュメントに便利です。.md ファイルを書けば、見た目はテーマが担当します。

副作用として、Jekyllはアンダースコアで始まる名前のファイルやフォルダを無視します。たとえば _next や _assets です。別のツールでビルドしたサイトでそれらが必要な場合は、ルートに空の .nojekyll ファイルを置きます。

touch .nojekyll
git add .nojekyll
git commit -m "Jekyllを無効化"
git push

Hugo、Astro、Eleventy、MkDocs、DocusaurusなどのほかのジェネレーターはGitHub Actionsを通じて動きます。ワークフローでビルドし、完成したフォルダを公開します。GitHub Pages自体はこれらのツールを知る必要はなく、最終的なファイルさえあれば十分です。

GitHub Pagesに独自ドメインを設定する方法

username.github.io のアドレスは学習用のプロジェクトには十分ですが、ポートフォリオやプロジェクトには独自ドメインが望ましいでしょう。設定は、ドメインの管理会社側と、リポジトリの設定の両方で行います。

DNSの設定

www.example.com や blog.example.com のようなサブドメインには、username.github.io を指すCNAMEレコードを作成します。ルートドメインの example.com の場合は、GitHub PagesのIPアドレスに対応するAレコードを作成します。

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

最新のアドレス一覧（AAAAレコード用のIPv6を含む）はGitHubのドキュメントにあります。設定前に必ず確認してください。ルートドメインと www の両方を設定するのがおすすめです。そうすれば、GitHubがある方のアドレスを別の方にリダイレクトしてくれます。

リポジトリの設定

Settings → Pages の Custom domain 欄にドメインを入力して保存します。ブランチから公開している場合、GitHubはドメイン名を書いた CNAME ファイルをリポジトリに作成します。Actionsで公開している場合は CNAME ファイルは不要で、ドメインは設定に保存されます。

GitHubは、アカウント設定（プロフィールの設定にあるPagesのセクション）でドメインを認証することを推奨しています。これは、DNSがGitHubを指している間に、他の人が自分のリポジトリにあなたのドメインを紐付けてしまうことを防ぎます。DNSの変更が反映されるまで最大で1日かかることがあるため、すぐに動かない場合は少し待ってください。

GitHub PagesのHTTPS

*.github.io のアドレスでは、HTTPSが常に有効です。独自ドメインの場合は、DNSが正しく設定されると、GitHubがLet's Encryptの証明書を自動で発行します。その後、Settings → Pages に Enforce HTTPS が表示されるので、チェックを入れてください。これにより、HTTPのアクセスはすべてHTTPSにリダイレクトされます。

チェックボックスが無効な場合は、証明書がまだ発行されていません。DNSの設定を確認して待ちましょう。Custom domain の欄からドメインを削除して、もう一度追加すると、証明書の再発行が始まることがあります。また、画像やスクリプトを http:// から読み込んでいないかも確認してください。ブラウザーは、そのようなリソースを混在コンテンツとしてブロックします。

GitHub Pagesの制限事項

ホスティングは無料ですが、いくつかの制限があります。GitHubのドキュメントに記載されており、個人や学習用のサイトであれば通常は十分な範囲です。

技術的な上限のほかに、利用規約もあります。GitHub Pagesは、ネットショップやSaaSのような商用サービスや、大容量ファイルの配布には向いていません。ポートフォリオ、ドキュメント、ブログ、プロジェクトのランディングページであれば問題ありません。

もう1つの制限は、サーバー側の設定ができないことです。独自のリダイレクト、レスポンスヘッダー、.htaccess のようなルールは使えません。ルートに 404.html という独自のページを置くことはできます。存在しないアドレスにアクセスされたときに、GitHubがそのページを表示します。

よくある問題と解決方法

GitHub Pagesで404エラーが出る

最も多い原因は、ソースに選んだフォルダに index.html がないことです。正しいブランチとフォルダ（/ (root) または /docs）が選ばれているか、ファイル名が小文字の index.html になっているかを確認してください。2つ目の原因は、サイトがまだ公開されていないことです。Actionsタブを開き、ビルドが終わるまで待ちましょう。

シングルページアプリケーションの内部ページで、ページを再読み込みしたときに404が出る場合は、ルーティングが原因です。たとえば /about というファイルが存在しないため、サーバーがそのアドレスを見つけられません。回避策は、ハッシュルーティング（/#/about）を使うか、index.html のコピーを 404.html という名前で置くことです。

サイトが更新されない

まず、変更が本当にGitHubに届いているかを確認します。git status と git log origin/main --oneline -3 を実行してください。次にActionsタブを開きます。ビルドが失敗していれば、赤いバツ印とエラーログが表示されます。Jekyllファイルの構文エラーや、ワークフローの誤りなどが原因のことが多いです。

ビルドが成功しているのにブラウザーで古いバージョンが表示される場合は、キャッシュが原因です。GitHub Pagesは数分間ファイルをキャッシュし、ブラウザーもキャッシュします。キャッシュを消して再読み込み（Ctrl+F5 または Cmd+Shift+R）するか、プライベートウィンドウで開いてください。

スタイルや画像が読み込まれない

ほとんどの場合、パスの間違いです。プロジェクトサイトで /style.css とリンクすると、リポジトリのフォルダではなく username.github.io のルートを参照してしまいます。相対パス（style.css、./img/logo.png）を使うか、ビルドツールでベースパスを設定してください。また、名前の大文字と小文字も確認しましょう。Windowsでは Logo.PNG と logo.png が同じに見えても、GitHubのサーバーは区別します。

アンダースコアで始まるフォルダが公開されない

これはJekyllの仕様です。_app のようなフォルダは公開されません。ルートに .nojekyll を追加するか、GitHub Actionsによる公開に切り替えてください。

まとめ

GitHub Pagesは、静的サイトを無料で公開する最も手軽な方法です。リポジトリを作り、index.html を置き、Settings → Pages でソースを選べば、数分後には username.github.io でサイトが開きます。ビルドが必要なサイトにはGitHub Actionsを、独自ドメインにはDNSレコードとEnforce HTTPSを使いましょう。制限も忘れないでください。扱えるのは静的コンテンツだけで、サーバー側のコードは動かず、サイズと転送量にも上限があります。GitHubの操作、変更の送信、自動化は、Gitのコースで実践的に扱っています。