GitHub

GitHub Pagesとは?できること・使い方・料金をわかりやすく解説

GitHub Pages(ギットハブ ページズ)とは、GitHubのリポジトリから静的サイトを無料で公開できるホスティングサービスです。HTML・CSS・JavaScriptで作ったサイトを、サーバーを用意せずにそのままWeb上に公開できます。リポジトリにコードをプッシュするだけでサイトが更新されるため、個人のポートフォリオ、技術ブログ、オープンソースのドキュメントサイトなどに広く使われています。本記事では、GitHub Pagesでできること、サイトの種類、使い方(公開手順)、料金、JekyllやGitHub Actionsとの連携まで、わかりやすく解説します。

GitHub Pagesとは

GitHub Pagesは、GitHubが提供するWebサイトのホスティング機能です。最大の特徴は、GitHubリポジトリと直接連携していることです。リポジトリの指定した場所にWebサイトのファイルを置くと、それがそのまま公開されます。通常のWebサイト公開で必要になるサーバーの契約や設定、管理が一切不要で、GitHubアカウントとリポジトリさえあれば誰でも始められます。

公開できるのは静的サイト(HTML・CSS・JavaScriptで構成されるサイト)です。PHPやデータベースを使う動的なWebアプリケーションは動かせませんが、その分シンプルで高速、かつセキュリティ面のリスクも小さいという利点があります。公開されるサイトは標準でHTTPS(暗号化通信)に対応しています。

GitHub Pagesの3種類のサイト

GitHub Pagesには、用途とURLの形式が異なる3種類のサイトがあります。

種類 URLの形式 主な用途
ユーザーサイト username.github.io 個人のポートフォリオ、ブログ
組織サイト orgname.github.io 企業・団体の公式サイト
プロジェクトサイト username.github.io/リポジトリ名 特定プロジェクトの紹介・ドキュメント

ユーザーサイト組織サイトは、アカウント(または組織)ごとに1つ作成でき、username.github.io のような専用URLが割り当てられます。専用リポジトリ(username.github.io という名前のリポジトリ)を作って公開します。一方、プロジェクトサイトはリポジトリごとに作成でき、そのプロジェクト専用のサイトとして使えます。オープンソースのドキュメントやプロダクト紹介ページに向いています。

GitHub Pagesでできること・主な用途

GitHub Pagesは、次のような用途で広く活用されています。

  • 個人のポートフォリオ:エンジニアやデザイナーが、自分のスキルや制作物を無料で公開できます。
  • 技術ブログ:後述のJekyllなどを使えば、Markdownで記事を書いてブログとして運用できます。
  • オープンソースのドキュメント:ライブラリやツールの使い方をまとめた公式ドキュメントサイトとして使えます。リポジトリの更新と連動して更新できるのが利点です。
  • プロダクト紹介・LP:プロダクトの紹介ページやランディングページを手軽に公開できます。

GitHub Pagesの使い方(公開手順)

GitHub Pagesでサイトを公開する基本的な手順は、次の通りです。

まず、GitHubでリポジトリを作成し、公開したいWebサイトのファイル(index.html など)を追加します。ファイルの追加には、Web上の操作のほか、gitコマンドでローカルからプッシュする方法もあります。次に、リポジトリの「Settings」→「Pages」を開き、公開方法を設定します。公開が完了すると、数分ほどで username.github.io/リポジトリ名 のようなURLでサイトが表示されます。

公開方法には、現在おもに2つの方式があります。

  • ブランチから公開:指定したブランチ(例:main)の内容をそのまま公開する方式。シンプルなHTMLサイトに向いています。
  • GitHub Actionsから公開:ビルド処理を挟んで公開する方式。静的サイトジェネレーターを使う場合や、ビルドを細かく制御したい場合に適しています。

かつては gh-pages ブランチへの公開が定番でしたが、現在GitHubはGitHub Actionsによる公開を推奨しています。Actionsを使うと、コードをプッシュするたびに自動でビルド・デプロイが行われ、より柔軟な運用ができます。

GitHub Pagesの料金

GitHub Pagesは基本的に無料で利用できますが、リポジトリの公開範囲によって条件が異なります。

  • パブリックリポジトリ:無料プラン(GitHub Free)でGitHub Pagesを利用できます。個人のポートフォリオやオープンソースのドキュメントなど、公開して問題ないサイトはこれで十分です。
  • プライベートリポジトリ:ソースを非公開にしたままサイトを公開したい場合は、有料プラン(GitHub Pro、GitHub Team、GitHub Enterprise など)が必要です。

つまり、「ソースコードを公開してよいサイト」なら無料、「ソースは隠したいサイト」なら有料プラン、と考えると分かりやすいです。なお、GitHub Pagesには公開できるサイトの容量や、ビルドの頻度・帯域に一定の制限があります。個人や小規模なサイトであれば通常問題になりませんが、大規模なサイトを運用する場合は、最新の制限を公式ドキュメントで確認してください。

静的サイトジェネレーターとの連携(Jekyll・Hugoなど)

HTMLを手作業で書く代わりに、静的サイトジェネレーターを使うと効率的にサイトを構築できます。これは、Markdownやテンプレートから自動でHTMLを生成するツールで、ブログやドキュメントの管理が格段に楽になります。

代表的なのがJekyll(ジキル)です。JekyllはGitHub Pagesに標準でサポートされており、Markdownで書いた記事を自動でHTMLに変換してくれます。ほかにも、Go言語製で高速なHugo、ReactベースのGatsby、VueベースのVitePressなどがよく使われます。

これらのうちJekyll以外は、GitHub Pagesの標準機能だけでは公開できないため、前述のGitHub Actionsでビルドして公開するのが一般的です。なお、Jekyllを使う場合でも、現在はActions経由での公開が推奨されており、好きなバージョンのJekyllやプラグインを使える柔軟性が得られます。

GitHub Actionsによる自動デプロイ

GitHub Actionsは、GitHub上でビルドやデプロイなどの作業を自動化する機能です。GitHub Pagesと組み合わせると、コードをプッシュするたびに「ビルド→公開」が自動で実行されるようになります。

たとえば、HugoやGatsbyで作ったサイトの場合、「ソースをプッシュ → Actionsが自動でHTMLを生成 → GitHub Pagesに公開」という流れを自動化できます。手作業でのビルドやアップロードが不要になり、更新のたびに最新のサイトが公開される状態を保てます。設定は、リポジトリ内の .github/workflows/ フォルダにワークフロー(YAML形式のファイル)を置くことで行います。GitHubには公式のPages用ワークフローも用意されており、これを使えば比較的簡単に自動デプロイを構築できます。

カスタムドメインとHTTPS

GitHub Pagesの初期URLは username.github.io/リポジトリ名 ですが、独自ドメイン(カスタムドメイン)を設定して、好きなURLで公開することもできます。設定は、「Settings」→「Pages」でドメインを入力し、ドメイン側のDNSで所定のレコード(CNAMEまたはAレコード)をGitHubに向けることで行います。

また、GitHub PagesはHTTPS(暗号化通信)に標準対応しています。設定画面の「Enforce HTTPS」を有効にすれば、サイトへのアクセスが常に暗号化されます。独自ドメインを使う場合もHTTPSが自動で適用されるため、セキュリティ面でも安心です。

利用上の注意点

GitHub Pagesを使う際は、次の点に注意しましょう。

第一に、動的な処理はできません。サーバー側でのプログラム実行(PHPなど)やデータベースを使う機能は動きません。問い合わせフォームなど動的な機能が必要な場合は、外部サービスと組み合わせる必要があります。

第二に、公開してはいけない情報を含めないことです。パブリックリポジトリで公開する場合、リポジトリの内容は誰でも見られます。APIキーやパスワードなどの機密情報を誤ってコミットしないよう、.gitignore を活用し、公開前に内容を確認しましょう。

第三に、容量やビルドの制限です。大規模サイトや頻繁なビルドには制限があるため、本格運用の際は公式ドキュメントで最新の上限を確認してください。アクセスが非常に多いサイトでは、CDN(コンテンツ配信ネットワーク)と組み合わせる方法もあります。

まとめ

GitHub Pagesの要点を整理します。

  • GitHub Pagesは、リポジトリから静的サイトを無料で公開できるホスティングサービス
  • サイトは「ユーザーサイト」「組織サイト」「プロジェクトサイト」の3種類
  • 「Settings」→「Pages」から、ブランチ公開またはGitHub Actions公開を設定(現在はActions公開が推奨)
  • パブリックリポジトリは無料、プライベートで使うには有料プランが必要
  • Jekyllなどの静的サイトジェネレーターや独自ドメイン、HTTPSにも対応

GitHub Pagesは、サーバーを用意せずに手軽にWebサイトを公開できる、開発者にとって非常に便利なサービスです。まずはシンプルなHTMLサイトを公開してみて、慣れてきたらJekyllやGitHub Actionsを取り入れていくと、無理なく活用の幅を広げられます。

よくある質問(FAQ)

Q. GitHub Pagesは無料で使えますか?
A. パブリックリポジトリであれば無料(GitHub Free)で利用できます。ソースを非公開にしたまま公開したい場合は、GitHub ProなどのプランでプライベートリポジトリのPagesを利用できます。

Q. 動的なWebサイト(PHPやデータベース)は公開できますか?
A. できません。GitHub Pagesは静的サイト(HTML・CSS・JavaScript)専用です。動的な機能が必要な場合は、外部のAPIやサービスと組み合わせる必要があります。

Q. 独自ドメインは使えますか?
A. 使えます。「Settings」→「Pages」でカスタムドメインを設定し、DNSをGitHubに向けることで、好きなURLで公開できます。HTTPSも自動で適用されます。

Q. JekyllとGitHub Actionsはどちらを使うべきですか?
A. シンプルなサイトならブランチからの直接公開で十分です。Jekyll以外のジェネレーターを使う場合や、ビルドを細かく制御したい場合はGitHub Actionsが適しています。現在GitHubはActionsによる公開を推奨しています。

Q. 公開してからどのくらいでサイトが表示されますか?
A. 通常は数分程度です。設定や変更が反映されるまで時間がかかることもあり、公式では最大10分程度かかる場合があるとされています。

資料請求

RELATED POSTS 関連記事