# GitHub Pagesとは: 無料の静的サイト公開を手順どおりに解説 URL: https://skillaria.top/ja/guides/git/github-pages-guide GitHub Pagesは、GitHubに組み込まれた無料の静的サイトホスティングです。HTMLやCSS、JavaScriptのファイルをリポジトリに置き、設定でPagesを有効にすると、username.github.ioのアドレスでサイトが公開されます。独自ドメインやHTTPSにも対応しますが、PHPやデータベースなどのサーバーサイドのコードは動きません。 ## 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種類のサイトがあり、種類によってアドレスが変わります。 | 種類 | リポジトリ | アドレス | | --- | --- | --- | | ユーザーサイト | `username.github.io` | `https://username.github.io/` | | 組織サイト | `orgname.github.io` | `https://orgname.github.io/` | | プロジェクトサイト | 任意の名前（例: `docs`） | `https://username.github.io/docs/` | ユーザーサイトや組織サイトは、アカウントごとに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 " # Hello, GitHub Pages " > 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のドキュメントに記載されており、個人や学習用のサイトであれば通常は十分な範囲です。 | 制限 | 内容 | | --- | --- | | コンテンツ | 静的ファイルのみ。サーバー側のコードやデータベースは不可 | | 公開サイトのサイズ | 最大1GB | | 推奨リポジトリサイズ | 最大1GB | | 転送量 | 月100GBのソフトリミット | | ブランチからのビルド | 1時間に10回のソフトリミット（Actionsには適用されない） | | 公開時間 | 10分を超えるデプロイは中断される | 技術的な上限のほかに、利用規約もあります。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のコースで実践的に扱っています。 ## FAQ **GitHub Pagesは本当に無料ですか？** はい。公開リポジトリを使う無料プランでは、GitHub Pagesに料金はかかりません。HTTPSや独自ドメインの利用も無料です。料金が発生するのは、ドメインの取得費用、またはプライベートリポジトリから公開する場合の有料プランだけです。 **GitHub PagesでPHPやWordPressのサイトは動かせますか？** いいえ。GitHub Pagesは静的ファイルしか配信せず、サーバー側のコードを実行しません。WordPressのサイトは専用のプラグインで静的なHTMLに書き出せますが、フォームやコメント、管理画面は動きません。 **GitHub Pagesのサイトはいくつ作れますか？** username.github.ioのユーザーサイトは1つ、プロジェクトサイトはリポジトリごとに1つずつ、いくつでも作成できます。 **GitHub Pagesのサイトは検索エンジンにインデックスされますか？** はい。通常のサイトと同じように扱われます。インデックスを改善するには、ルートに sitemap.xml と robots.txt を置き、検索エンジンのウェブマスターツールでサイトを認証してください。 **GitHub Pagesのサイトを削除するにはどうすればよいですか？** Settings → Pages で、利用できる場合は Unpublish site を押します。または、Source のブランチ設定を None にします。リポジトリを削除しても、サイトは消えます。 --- Source: Skillaria.Top (https://skillaria.top)