更新日:
GitHub Pagesを使い、無料でサイトを公開しよう
GitHub Pagesとは
GitHub Pagesは、GitHubが提供する無料のホスティングサービスです。このサービスを使えば、HTML、CSS、JavaScriptを使って作成した静的なウェブサイトをインターネット上で簡単に公開することができます。特に、個人のポートフォリオサイトやプロジェクトのデモページ、ブログなどに最適です。
GitHub Pagesの大きな魅力は、何といっても無料でサイトを公開できることです。さらに、GitHubのリポジトリと連携して動作するため、リポジトリを更新するだけでサイトも自動的に更新される便利さがあります。
ただし、無料で使うにはpublicなリポジトリである必要があります。privateリポジトリで使用するにはGitHub Enterpriseコースへの課金が必要です。
GitHub Pagesの使い方
この章ではGitHub Pagesの基本的な使い方を解説していきます。
GitHubにリポジトリを作成
GitHub Pagesの設定はリポジトリごとに行います。そのため公開するサイトのリポジトリを作成する必要があります。GitHubのアカウントを作成していない方は、こちらの記事を参考に、作成してください。
リポジトリを作成するにはメニューバーの「+」ボタンをクリックすると表示されるメニューから「New repository」をクリックします。
リポジトリ作成画面が表示されるので、リポジトリ名を入力します。無料で使用するにはPublicにする必要があるので、Publicを選択し、左下の「Create repository」をクリックします。これで作成完了です。
ローカル環境でサイト作成
次に公開するサイトをローカル環境で作成します。公開するURLにアクセスした際に表示するファイルはindex.htmlとして検索されます。必ずルートディレクトリにindex.htmlというファイル名で作成しましょう。
GitHubリポジトリへアップロード
作成したファイルをリモートリポジトリにアップロードします。
まずは以下のコマンドでローカル環境にリポジトリを作成します。
1
git init
次に以下のコマンドでファイルの変更をコミットします。
1
2
git add .
git commit -m "first commit"
次にリモートリポジトリの関連付けを行います。
まずは作成したリポジトリの「Code」をクリックし、赤枠のボタンをクリックしてHTTPSをコピーします。
以下のコマンド内でコピーしたHTTPSを使用します。
1
git remote add origin コピーしたHTTPSを貼り付ける
そしてリモートリポジトリにプッシュして完了です。masterブランチがmainの場合はmainに変更してください。
1
git push origin master
これでリポジトリの準備ができました。
GitHub Pagesの設定
次にGitHub Pagesの設定を行っていきます。
リポジトリのページに表示されている「Settings」をクリックします。権限によっては表示されないので、管理者に連絡をしましょう。
settingsの画面に遷移するので、左メニューから「Pages」をクリックします。
GitHub Pagesの設定画面になるので、公開するBranchの設定を行います。デフォルトだと「None」になっているので、「None」をクリックし、公開するブランチに変更します。
「Save」ボタンをクリックし、変更を保存します。
数分経つとデプロイされるので、リロードするとアドレスを確認することができます。デフォルトだと「https://アカウント名.github.io/リポジトリ名」になります。「Visit site」で表示を確認できます。
404エラーが表示された場合
URLにアクセスした際、以下のように404エラーが表示される場合があります。
このように404エラー（ウェブサーバーがリクエストされたページやリソースを見つけられなかったことを示すHTTPステータスコード）が発生するとGitHubのデフォルトのエラー画面が表示されます。自分でデザインしたい場合は404.htmlというファイル名でファイルを作成します。
もし404エラーが出た場合は以下のことをチェックしてみましょう。
index.htmlファイル
GitHub PagesはルートのURLにアクセスするとエントリーファイルとしてindex.htmlが検索されます。そのため、リポジトリのルートディレクトリにindex.htmlが作成されているか確認をしましょう。
ディレクトリ構造
URLはリポジトリのルートディレクトリから検索されるため、URLとディレクトリ構造が合っているか確認をしましょう。
GitHub Statusの確認
GitHub Pagesサイトの構築中に404エラーが発生した場合は、まず、GitHub Statusページで現在発生している問題や障害がないか確認してみましょう。
ブラウザのキャッシュ
GitHub Pagesサイトが非公開で、404 エラーが表示される場合は、ブラウザのキャッシュをクリアする必要がある場合があります。
サイトの更新方法
サイトの更新はGitHub上でファイルの変更があった際に自動で行われます。具体的にはプルリクエストがマージされた時などです。
独自ドメインの設定方法
サイトを公開するとURLはデフォルトだと「https://アカウント名.github.io/リポジトリ名」になります。独自ドメインを取得していれば、このアドレスを独自ドメインに変更することができます。
独自ドメインの左側に.とホスト名がつかないドメインをAPEXドメインと呼びます。
具体的には「example.com」のように、左側にサブドメイン（wwwやblog）が付いていないドメインのことです。サブドメインがついているアドレスのことを完全修飾ドメイン名（FQDN）と呼びます。
| APEXドメイン | https://example.com |
|---|---|
| FQDN | https://www.example.com |
Apexドメインを独自ドメインとして設定するには利用しているDNSプロバイダーでの設定が必要になるので、使っているDNSプロバイダーに移動します。
例えばお名前.comであれば、以下の流れでドメインのDNSレコード設定を行います。
まずはトップページの「ネームサーバー設定」から「ドメインのDNSレコード設定」をクリックします。
次に、設定したいドメインを選択し、「次へ」をクリックします。
DNS設定画面に遷移するので、「DNSレコード設定を利用する」の「設定する」をクリックします。
次にAレコードを作成します。その際、ApexドメインがGitHub PagesのIPアドレスを指すようにする必要があるので以下のアドレスで設定します。
- 185.199.108.153
- 185.199.109.153
- 185.199.110.153
- 185.199.111.153
「ホスト名」の欄には何も入力せず、以下のように入力したら「追加」をクリックします。
同じようにして残りの3つも追加します。
確認をし、以下のようになっていればOKです。
次に、GitHubのGitHub Pages設定画面でCustom domainの欄に独自ドメインを入力し、saveをクリックして完了です。
その後、自動DNSチェックが開始されます。このチェックでは、DNS設定がGitHubによる証明書の自動取得を許可するように構成されているかどうかが確認されます。チェックが正常に完了すると、GitHubは[Let's Encrypt]からTLS証明書をリクエストします。有効な証明書が発行されると、GitHubはそれを自動的にPagesのTLSターミネーションを処理するサーバーにアップロードします。
設定から数時間経つとhttpsでのアクセスが可能になります。
すると「Enforce HTTPS」のチェックボックスにチェックが入れられるようになり、チェックすることで常時httpsでの接続にすることができます。
アクセス制限
GitHub Enterpriseを使用することで、privateで公開されているリポジトリは、サイト公開元のリポジトリにアクセス可能なユーザーのみアクセスするよう制限することができます。この機能を使うことで、社内ドキュメントのような外部に漏らしたくない情報を扱うページを安全に作成することができます。
お問合せフォームの公開方法
GitHub Pagesは静的なウェブサイトのみを公開できるため、お問い合わせフォームのような動的な機能を含むページを作成することはできません。しかし、無料で利用できるGoogleフォームを活用すれば、簡単にお問い合わせフォームを設置することが可能です。
興味ある方はこちらの記事を参考にして、実装してみてください。
- 無料で利用可能：データベースの利用料金が発生しないため、コストを抑えられます。
- デザインのカスタマイズが柔軟：HTMLとCSSを使用してデザインを変更できるため、Googleフォームを使っていることを目立たせない工夫が可能です。
- サーバーサイドの実装が不要：入力内容は直接Googleフォームに保存されるため、データ保存用のサーバーを構築する必要がありません。
まとめ
GitHub Pagesは、静的なウェブサイトを簡単かつ無料で公開できる便利なツールです。この記事では、リポジトリの作成からサイトの公開、独自ドメインの設定までの手順を解説しました。無料で利用するにはリポジトリをPublicに設定する必要がありますが、その分、公開後の更新が自動で行われるなど、効率的に運用できます。また、独自ドメインを設定することで、サイトのURLをわかりやすくしたり、ブランドイメージを強化したりすることが可能です。
GitHub Pagesを活用すれば、プロジェクトのデモサイトやポートフォリオを手軽に公開し、管理することができます。この機能を使って、あなたのウェブサイトをぜひインターネット上に公開してみてください。
この記事のまとめ
- GitHub Pagesは静的なウェブサイトを無料で公開できるサービスです。
- リポジトリ単位で設定を行います。
- 無料で使用するにはpublicなリポジトリである必要があります。
