GitHub Pagesで静的なウェブサイトをホスティングにサブドメインを設定してHTTPSで運用する 🖥

VPSを解約して、静的なサイトはすべてGitHub Pagesに移行したのですが、その際にGitHub Pagesの仕様や制限を調べたので、まとめておきます。

GitHub Pagesとは

GitHub Pagesは、個人用、組織用、またはプロジェクト用のページをGitHubリポジトリから直接ホストするように設計された静的サイトホスティングサービスです。

https://help.github.com/articles/what-is-github-pages/ より引用

魅力としては、
 ⭕️ 無料である程度使える(詳細は後述)
 ⭕️ 独自ドメインを設定可能
 ⭕️ HTTPSに対応可能
といったところでしょうか。

逆にできないこととしては、
 ❌ サーバサイドのプログラムが触れない(後述)
 ❌ 無料アカウントのプライベートリポジトリでは公開できない
という感じです。静的なサイトのホスティングに使う分には問題ないでしょう。

Github Pagesの使い方

下記手順の通り、リポジトリにリソースファイルをコミットして設定を変更すればすぐに使えます。

❶ リポジトリをつくり、リソースファイルをmasterにプッシュする
HTML、CSS、JavaScript、イメージなどを適宜プッシュしましょう。

❷ リポジトリのSettingからGitHub PagesのSourceを変更する

SourceはデフォルトでNoneになっていますが、master branchを選択すれば、master直下をrootとして、master branch / docs folderを選択すれば、masterのdocsディレクトリ以下をrootとしてウェブサイトをホスティングできます。
個人的にはdocs以下にしておいた方が便利だと思っておりまして、SCSSなどのソースファイルをdocsディレクトリの外に逃しています。
設定を変更すると、

https://ユーザー名.github.io/ブランチ名

というURLでウェブサイトが公開されます。お手軽ですね。 ^ ^

利用制限

こちらのドキュメントにまとまっていますが、以下の制限があります。

・ GitHub Pagesにホスティングできるデータ1GB以下。
・ GitHub Pagesで通信できる帯域は1ヶ月100GB以下。
・ GitHub Pagesのビルドは1時間で10ビルドまで。

これらを越えると、サイトが表示されなくなったりするようです。

禁止事項

ドキュメントには、

オンラインビジネス、eコマースサイト、または商取引の促進またはサービスとしての商用ソフトウェアの提供

のためのサービスではない。という旨が記載されています。

また、

・利用規約で禁止されているコンテンツ
・暴力的なコンテンツ
・スパムコンテンツ
・GitHubユーザー、GitHubを危険にさらすコンテンツ
・攻略法詐欺コンテンツ
・ポルノコンテンツ
・サイトの目的を誤って表現しているコンテンツ

は禁止事項となっています。

独自ドメイン設定可能

下記手順で、独自ドメインを設定できます。

❶ リポジトリのSettingからGitHub PagesのCustom domainを設定する

Custom domainに設定したいサブドメインを入力します。

❷ こちらのサイトにある通り、YOUR-GITHUB-USERNAME.github.io.をサブドメインのCNAMEに設定します。

参考までに、ドメインナビでのDNSの設定方法を記載しますと、

https://www.onamae.com/domain/navi/dns_manage にアクセス

❷ サブドメインを切るドメインを選択し、次へを押下

❸ DNSレコード設定を利用するの設定するボタンを押下

❹ CNAMEの設定を追加

※ ドメインナビでは、YOUR-GITHUB-USERNAME.github.io.の最後の.は自動で挿入されるので入力は不要です。

という感じです。

HTTPSの設定方法

Enforce HTTPSにチェックを入れるだけでOKです。

なにも難しいことはないのですが、DNSを設定したてだと、

Enforce HTTPS — Unavailable for your site because your domain is not properly configured to support HTTPS — Troubleshooting custom domains
HTTPS provides a layer of encryption that prevents others from snooping on or tampering with traffic to your site.
When HTTPS is enforced, your site will only be served over HTTPS. Learn more.

という感じでチェックを入れることができません。時間が解決してくれるのでしばらく待ちましょう。

GitHub pagesで製作したページとリポジトリ

NOTTOLI SIMULATOR

単純にdocsディレクトリ以下をホスティングしています。


影時計 / 影の方向でなんとなく現在時刻がわかるサイト

こちらも単純にdocsディレクトリ以下をホスティングしています。


ずーしほっきーのリフティング

docsディレクトリの外にsassとコンパイルに必要なnode_modulesを置いてます。また、app.appcacheをつかっています。

SPAをホスティングしたい場合

前述の通り、GitHub Pagesではサーバサイドのプログラムを触ることができません。なので、pushStateをつかったSPAでURLにクエリやハッシュを使わないとリロードした時に404になってしまいます。

具体的に言うと、

https://kimizuka.fm

と、

https://kimizuka.fm/profile

で、同じHTMLを返すことができず、/ から /profile に遷移させたとしても、リロードすると404になってしまうということです。
対策としては、ルートディレクトリに404.htmlを用意し、一度そこにアクセスさせたあと、適宜リダイレクトさせるというのがセオリーのようです。

以上が調査結果となります。

本日の成果

【健康】
⭕️ 6.5km走った。
👆 体脂肪率が15%になった。このままキープしたいところ。

【制作】
⭕️ GitHub Pagesの調査結果を公開した。
👆 ブログで公開しようと思っていたがnoteにした。
⭕️ コーディングした。
👆 PHPがわかってきた。BEMはまだ迷いがある。
⭕️ アイデア、整理して展開した。
⭕️ Slackの仕様を調査した。
⭕️ APIを調査した。

明日の予定

【制作】
・コーディングする。

直近のタスク

【健康】
・走りつづける。

【制作】
・アダプタを無くさない仕組みを考える。
・NASを構築する。
・TypeScriptとNuxt.jsで娘用コンテンツつくる。
・契約書準備する。

本日のありがとう

・ミーティングありがとうございます。

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

日々試行錯誤しながら過ごしてます。

フリーのフロントエンドエンジニアです。 基本的にはちょちょいのほいです。😀 https://kimizuka.fm