GitHub Pagesの使い方完全ガイド｜無料でのWebサイト公開から独自ドメイン設定まで

GitHub Pagesは、開発者がWebサイトを完全無料で公開できる強力なホスティングサービスです。手軽に静的サイトを構築できる一方で、独自のURLを持たせる独自ドメインの設定や、Reactを使ったアプリケーションのデプロイにはいくつかの注意点が存在します。

本記事では、GitHub Pagesの基本的な使い方から、商用利用の制限、GitHub Pagesで独自ドメインを設定しHTTPS化する手順、そしてGitHub PagesにReactアプリをデプロイする際のルーティング対策まで、実践的なノウハウを網羅的に解説します。

GitHub Pagesとは？基本機能と無料枠の仕組み

GitHub Pagesは、エンジニアや開発チームが手軽にWebサイトを公開できる強力なツールです。本セクションでは、基本的な仕組みと、導入を判断するためのポイントを整理します。

静的サイトホスティングの基本機能

GitHub Pagesは、リポジトリに保存されたHTML、CSS、JavaScriptファイルを直接取得し、Webサイトとして公開する静的サイトホスティングサービスです。サーバーの構築や複雑なインフラ設定が不要なため、開発したプロダクトを素早くユーザーに届けることができます。

プラン別の利用条件と無料枠

導入を検討する際、リポジトリの公開設定と利用しているGitHubのプランが重要な判断ポイントになります。公開リポジトリ（Public）であれば、無料で提供されるプラン（GitHub Free）のまま、GitHub Pagesを利用可能です。

一方、ソースコードを非公開にしたままサイトを公開したいプライベートリポジトリの場合は、GitHub Proなどの有料プランが必要になります。社内向けの業務マニュアルサイトや、一般公開前の新規事業のティザーサイトを構築する場合、セキュリティの観点からプライベートリポジトリでの運用が前提となります。

商用利用の制限とシステムの注意点

GitHub Pagesは手軽に利用できる反面、利用規約やシステム上の上限に関する明確な制限が設けられています。

商用利用に関する規約

GitHub Pagesは、オンラインビジネス、Eコマースサイト、SaaS（Software as a Service）などを提供するウェブサイトとして利用することは意図されておらず、商用利用は制限されています。そのため、ユーザーから直接料金を徴収するような商用プロダクトのメイン基盤として採用することは避けるべきです。 ただし、寄付ボタンの設置やクラウドファンディングへのリンク掲載など、プロジェクトを支援するための限定的な用途は許可されています。

システム上の利用制限

システム面でも、以下の要点に注意して運用する必要があります。

• サイト作成数の上限: 1つのユーザーアカウント、または組織アカウントにつき作成できるメインサイトは1つのみ（プロジェクトごとのサイトは複数作成可能）
• データ容量の制限: ソースリポジトリおよび公開されるサイトのサイズはそれぞれ1GB以下が推奨される
• トラフィックと帯域幅: 月間100GBのソフトな帯域幅制限がある
• ビルド制限とタイムアウト: デプロイ処理は10分でタイムアウトし、カスタムGitHub Actionsを使用しない場合、標準ビルドは1時間あたり10回まで

これらの制限から、GitHub Pagesは小〜中規模のプロジェクトやプロトタイプの公開に最適です。スモールスタートで静的サイトを立ち上げ、プロジェクトが成長した段階でVercelやNetlifyへ移行するアプローチが現実的です。

独自ドメインの設定とHTTPS化の手順

GitHub Pagesを本格的に運用する際、カスタムドメイン（独自ドメイン）を利用して信頼性を高める設定が欠かせません。

カスタムドメインの設定とトラブルシューティング

独自ドメインを設定した場合、セキュリティの観点からHTTPSの有効化は必須です。HTTPSを有効にするには、リポジトリ内に「CNAMEファイル」が正しく配置されており、お名前.comなどのドメイン管理サービス側でDNS設定（AレコードやCNAMEレコード）が適切に構成されていることを確認する必要があります。

HTTPSが反映されない場合の解決策

設定後、証明書が発行されてHTTPSが有効になるまでに最大1時間程度かかる場合があります。既存のDNS設定を更新したにもかかわらずHTTPS化が完了しない場合は、GitHubのリポジトリ設定（Settings > Pages）からカスタムドメインを一度削除し、再度追加し直してみてください。これにより、HTTPSの有効化プロセスが強制的に再トリガーされ、問題が解決することがあります。

Reactアプリのデプロイとルーティング対策

モダンなフロントエンド環境であるReactとGitHub Pagesを連携してデプロイする際、特有のルーティングエラーに直面することが多くあります。

404エラーの原因と解決策

React Routerを使用するシングルページアプリケーション（SPA）をデプロイすると、下層ページ（例: https://example.com/about）に直接アクセスした際やブラウザをリロードした際に404エラーが発生します。これは、GitHub Pagesがサーバーサイドでの動的なルーティングに対応しておらず、リクエストされたURLの物理ファイルが存在しないと判断されるためです。

この問題の解決策は以下の通りです。

1. HashRouterの利用: BrowserRouterの代わりにHashRouterを使用することで、URLにハッシュ（#）が含まれるようになり（例: https://example.com/#/about）、サーバー側での404エラーを防ぐことができます。
2. パスの適切な設定: package.jsonに homepage フィールドを追加し、リポジトリのURLを正しく指定します。また、Viteを使用してビルドを行っている場合は、vite.config.js内で base パスをリポジトリ名に合わせて設定してください。
3. Jekyllのバイパス: GitHub PagesはデフォルトでJekyllによるビルドを試みるため、ビルドされたファイルの中にアンダースコア（_）で始まる隠しファイルがあると無視されてしまいます。これを防ぐため、リポジトリのルート（または公開ディレクトリ）に .nojekyll という空のファイルを配置します。

デプロイ自動化（GitHub Actions）の活用

GitHub Pagesの基本機能だけでも静的サイトの公開は可能ですが、運用を効率化するには「GitHub Actions」の活用が効果的です。

GitHub Actionsを利用することで、サイトへのデプロイワークフローを完全に自動化できます。具体的には、リポジトリの main ブランチへソースコードを push したことをトリガーとして、npmモジュールのインストール、ビルド、テスト、そしてGitHub Pages環境へのデプロイに至る一連のジョブを、.github/workflows フォルダ内のYAMLファイルで定義できます。

手動でのビルドやアップロード作業を省くことで、開発者はインフラ管理にリソースを割くことなく、コンテンツやコードの品質向上に集中できる環境が整います。GitHub ActionsによるCI/CDの詳細な構築手順については、GitHub ActionsでCI/CDを自動化！開発を加速するワークフローと導入手順もあわせて参照してください。

代替サービスとの比較｜Vercel・Netlifyの具体例

ポートフォリオやオープンソースのドキュメントであれば、GitHub Pagesは最適な選択肢です。しかし、「商用利用の禁止」「1GBの容量制限」「React Routerの制約」「サーバーサイド処理ができない」という壁に直面した際は、VercelやNetlifyといった代替サービスへの移行を検討するタイミングと言えます。

それぞれのサービスには明確な強みがあり、プロジェクトの要件に応じた使い分けが重要です。

ホスティングサービスの比較表と具体的なユースケース

各プラットフォームの特徴と、代表的なフロントエンドフレームワークとの親和性を整理しました。

サービス名	特徴・強み	GitHubリポジトリ連携	サーバー処理 / Edge機能	主な対応フレームワーク
GitHub Pages	完全無料で手軽。静的サイトホスティングに特化	パブリック（無料枠）	なし	素のHTML/JS, React (SPA), Vue
Vercel	Next.jsの開発元が提供。高度なビルド設定とSSRが強力	パブリック / プライベート	あり (Serverless/Edge Functions)	Next.js, React, SvelteKit
Netlify	CI/CDワークフローが強力。Formsや認証など独自機能が豊富	パブリック / プライベート	あり (Netlify Functions)	React, Vue, Gatsby, Nuxt
Cloudflare Pages	エッジネットワークによる圧倒的な表示速度と低コスト	パブリック / プライベート	あり (Cloudflare Workers)	React, Next.js (SSG), Remix

具体的なユースケースの例:

• 個人の技術ブログやOSSドキュメント: GitHub Pages。完全に無料で、リポジトリと一体化して管理できるため運用が最も簡単です。DocusaurusやHugoなどの静的サイトジェネレーターとの組み合わせが定番です。
• Next.jsを使った商用SaaSやメディア: Vercel。SSR（サーバーサイドレンダリング）やAPI Routesなど、Next.jsの機能をフル活用したい場合に必須の選択肢となります。Vercelの機能やメリットについてさらに詳しく知りたい方は、Vercelとは？仕組み・料金・使い方を初心者向けに完全解説【2026年版】もあわせてご覧ください。
• お問い合わせフォームや認証機能を持つコーポレートサイト: Netlify。Netlify FormsやNetlify Identityといった機能が標準で用意されており、バックエンドのAPIを自作せずに動的なフォーム機能やログイン画面を追加できます。
• アクセスが急増する大規模なプロモーションサイト: Cloudflare Pages。グローバルなCDNの強みを活かし、大量のトラフィックを効率的に捌きながら高速に表示させたい場合に最適です。帯域幅の制限が緩い点もメリットです。

プロジェクトの要件に合わせた技術選定と将来の拡張性を考慮しながら、最適なホスティングサービスを選んでください。

まとめ

GitHub Pagesは、静的サイトを無料で公開し、手軽に運用したい開発者にとって非常に有効なホスティングサービスです。本記事では、基本的な使い方から独自ドメインの設定、Reactアプリのデプロイ、そしてGitHub Actionsによるデプロイの自動化まで、実践的なポイントを解説しました。

• GitHub Pagesは、HTMLやJavaScriptなどの静的サイトを無料枠で手軽にWebサイトとして公開できます。
• 独自ドメインの設定やHTTPS化は必須ですが、DNSとCNAMEファイルの設定で実現可能です。反映されない場合は再追加が有効です。
• ReactなどのSPAをデプロイする際は、404エラーを防ぐためにHashRouterの利用や.nojekyllファイルの配置を行いましょう。
• 商用利用には制限があるため、プロジェクトの目的やサーバーサイド機能の有無に応じて、VercelやNetlifyなどの代替サービスへの移行を検討する必要があります。

プロジェクトの要件に合わせてGitHub Pagesを賢く活用し、効率的で安定したWebサイト運用を実現してください。