GitHub Pages

Page content

GitHub Pages は、GitHub が提供するサービスで、GitHub リポジトリにホストされているコードから静的なウェブサイトを公開できます。完全に無料で利用でき、ブログ、プロジェクトのドキュメント、個人サイトなどに広く使われています。

ここでは、GitHub Pages の基本的な使い方を、最も一般的な方法である「ユーザー/組織サイト」と「プロジェクトサイト」に分けて説明します。

1. 準備：GitHub アカウントとリポジトリ

GitHub Pages を利用するには、まず GitHub アカウントが必要です。そして、ウェブサイトのコードを保存するリポジトリを作成します。

2. GitHub Pages の2つの主要なタイプ

GitHub Pages には主に2つのタイプがあります。

A. ユーザーサイト / 組織サイト (User/Organization Site)

  • 特徴: あなたの GitHub ユーザー名（または組織名）に紐づくサイトで、https://<ユーザー名>.github.io の形式のURLになります。
  • リポジトリ名: 特定のリポジトリ名 (<ユーザー名>.github.io または <組織名>.github.io) にする必要があります。
  • 内容: このリポジトリの main ブランチのコンテンツがサイトとして公開されます。

B. プロジェクトサイト (Project Site)

  • 特徴: 既存のプロジェクトリポジトリのサブディレクトリまたは別のブランチから公開するサイトです。URL は https://<ユーザー名>.github.io/<リポジトリ名> の形式になります。
  • リポジトリ名: 任意のリポジトリ名で構いません。
  • 内容: 設定により、main ブランチの /docs フォルダー、または gh-pages ブランチのコンテンツがサイトとして公開されます。

3. 各タイプの具体的な設定方法

A. ユーザーサイト / 組織サイトの作成方法

  1. リポジトリの作成:

    • GitHub にログインし、新しいリポジトリを作成します。
    • リポジトリ名を あなたのユーザー名.github.io に設定します。（例: your-username.github.io）
    • 「Public」を選択し、必要であれば README を追加します。
    • 「Create repository」をクリックします。

  2. ファイルの追加:

    • 作成したリポジトリに index.html ファイルをアップロードまたは作成します。
    • 簡単な内容で構いません。 
      <!DOCTYPE html>
<html>
<head>
  <title>My User Page</title>
</head>
<body>
  <h1>Hello from my User Page!</h1>
  <p>This is my personal website hosted on GitHub Pages.</p>
</body>
</html>

  3. デプロイ (自動):

    • このタイプのリポジトリは、main ブランチにプッシュするだけで自動的に GitHub Pages が有効になります。
    • 数分待ってから、https://あなたのユーザー名.github.io にアクセスしてみてください。

B. プロジェクトサイトの作成方法

プロジェクトサイトには、主に2つのデプロイ元があります。

方法1: main ブランチの /docs フォルダーを使用する

  1. リポジトリの作成:

    • プロジェクトの既存のリポジトリ、または新しく任意の名前でリポジトリを作成します。（例: my-project）

  2. docs フォルダーの作成とファイルの追加:

    • リポジトリのルートに docs という名前のフォルダーを作成します。
    • その docs フォルダーの中に index.html ファイルを作成します。 
      <!DOCTYPE html>
<html>
<head>
  <title>My Project Page</title>
</head>
<body>
  <h1>Hello from my Project Page!</h1>
  <p>This is the documentation for my project.</p>
</body>
</html>

  3. GitHub Pages の設定:

    • リポジトリのページに移動し、「Settings」タブをクリックします。
    • 左側のサイドバーで「Pages」をクリックします。
    • 「Source」セクションで、main ブランチを選択し、その横のドロップダウンで /docs フォルダーを選択します。
    • 「Save」をクリックします。

  4. デプロイ:

    • 設定を保存後、数分待ってから、「Pages」ページの上部に表示されるURL（例: https://あなたのユーザー名.github.io/my-project）にアクセスしてみてください。
方法2: gh-pages ブランチを使用する

この方法は、静的サイトジェネレーター（Vite, React, Vue CLIなど）で生成されたビルド済みのファイルをホストするのに特に適しています。

  1. リポジトリの作成:

    • プロジェクトの既存のリポジトリ、または新しく任意の名前でリポジトリを作成します。（例: my-vite-app）

  2. gh-pages ブランチの作成とファイルの配置:

    • ローカル環境でプロジェクトをセットアップし、ビルドします。（例: Vite プロジェクトなら npm run build で dist フォルダーが生成されます）
    • 重要: ビルドされたコンテンツ（通常は dist フォルダーの中身）を gh-pages という名前の新しいブランチにプッシュします。このブランチには、ビルド後のファイルのみをコミットするのが一般的です。 
      # 例: Viteプロジェクトの場合
# ビルド
npm run build

# gh-pagesブランチにデプロイするためのツールを使うと便利 (例: gh-pages npmパッケージ)
npm install gh-pages --save-dev

# package.json にスクリプトを追加
# "deploy": "gh-pages -d dist"

# デプロイ実行
npm run deploy
      または手動で: 
      # gh-pages ブランチを新しく作成し、コミット履歴を共有しない
git checkout --orphan gh-pages
# .gitignore を無視して全てのファイルをステージング
git add -f dist
git commit -m "Initial gh-pages commit"
# dist ディレクトリ以外を削除
git rm -rf .
# dist ディレクトリの中身をルートに移動
mv dist/* .
rm -rf dist
# 再度コミット
git add .
git commit -m "Move built files to root"
# gh-pages ブランチをプッシュ
git push origin gh-pages

  3. GitHub Pages の設定:

    • リポジトリのページに移動し、「Settings」タブをクリックします。
    • 左側のサイドバーで「Pages」をクリックします。
    • 「Source」セクションで、gh-pages ブランチを選択し、その横のドロップダウンで / (root) を選択します。
    • 「Save」をクリックします。

  4. デプロイ:

    • 設定を保存後、数分待ってから、「Pages」ページの上部に表示されるURL（例: https://あなたのユーザー名.github.io/my-vite-app）にアクセスしてみてください。

4. カスタムドメインの設定

GitHub Pages はカスタムドメイン（例: www.example.com）にも対応しています。

  1. ドメインの取得: ドメインレジストラ（お名前.com, GoDaddyなど）でドメインを取得します。
  2. DNS 設定:
    • ドメインの DNS 設定で、A レコードを GitHub Pages のIPアドレス (185.199.108.153, 185.199.109.153, 185.199.110.153, 185.199.111.153) に設定します。
    • CNAME レコードを あなたのユーザー名.github.io に設定します（www サブドメインを使用する場合など）。
  3. GitHub Pages の設定:
    • GitHub リポジトリの「Settings」→「Pages」に移動します。
    • 「Custom domain」セクションに取得したドメイン名を入力し、「Save」をクリックします。
    • リポジトリのルートに CNAME という名前のファイルが自動的に作成され、そこにドメイン名が記述されます。

注意点

  • 静的サイトのみ: GitHub Pages は静的コンテンツ（HTML, CSS, JavaScript, 画像など）のみをホストできます。サーバーサイドの処理（PHP, Ruby, Node.jsの実行など）はできません。
  • SSL (HTTPS) の自動適用: GitHub Pages は自動的に HTTPS を適用してくれます。
  • ビルド時間: リポジトリへのプッシュからサイトが更新されるまで、数分かかる場合があります。
  • プロジェクトのルートパス: プロジェクトサイト (https://<ユーザー名>.github.io/<リポジトリ名>) の場合、サイトのルートパスが / ではなく /<リポジトリ名>/ になるため、JavaScript フレームワークなどでパスを解決する際に base オプションなどの設定が必要になることがあります。（例: Vite の base: '/<リポジトリ名>/')

GitHub Pages は非常に手軽で強力な静的サイトホスティングサービスです。ぜひ活用してみてください。