カスタムドメインの GitHub Pages で HTTPS を使う

2018/5/10 追記: GitHub が公式にカスタムドメインの HTTPS での配信をサポートしたため、下記の手順を利用する必要がなくなりました:tada: 詳しくは [Custom domains on GitHub Pages gain support for HTTPS \| The GitHub Blog](https://blog.github.com/2018-05-01-github-pages-custom-domains-https/) を参照してください。

---

GitHub Pages では `*.github.io` のドメインが割り当てられて HTTPS も有効になっていますが、カスタムドメインを使うと HTTPS を使うことができません。ここでは CloudFlare を使ってカスタムドメインの GitHub Pages で HTTPS を使う方法を紹介します。

## GitHub Pages にサイトを構築する

まず GitHub Pages でサイトを構築しないことには始まりません。今回はカスタムドメインで HTTPS を使うことがメインなので GitHub Pages の使い方はドキュメントを参照してください。

- [Creating Project Pages manually - User Documentation](https://help.github.com/articles/creating-project-pages-manually/)
- [Adding a CNAME file to your repository - User Documentation](https://help.github.com/articles/adding-a-cname-file-to-your-repository/)

ここから `superbrothers.jp` ドメインを使っていく例になっているので必要に応じて使いたいドメインに置き換えて考えてください。

```
$ git clone git@github.com/superbrothers/superbrothers.jp.git && cd superbrothers.jp
$ echo 'It works!' > index.html
$ echo superbrothers.jp > CNAME
$ git add index.html
$ git commit -m 'Initial commit'
$ git push origin master:gh-pages
```

これで `*.github.io` でアクセスできるようになります。ここではカスタムドメインを使うために `CNAME` ファイルのコミットを忘れないようにしてください。

- http://superbrothers.github.io/superbrothers.jp/
- https://github.com/superbrothers/superbrothers.jp

## CloudFlare にサイトを追加する

GitHub Pages は HTTPS でも配信されますが、カスタムドメインで使うと当然ですが GitHub が用意してくれている証明書は使えなくなるので HTTPS では使えなくなります。カスタムドメインで HTTPS を使うには前段に HTTPS を入れることになります。そこで CloudFlare の DNS サービスを利用します。
CloudFlare は CDN サービスを主に提供するサービスです。DNS サービス + SSL も提供しています。いくつかの制限がありますが、無料で利用できます。

- [CloudFlare | The web performance & security company](https://www.cloudflare.com/)

ここから CloudFlare の設定を行っていくのでアカウントを持っていないときは作成してください。

## ネームサーバを変更する

GitHub Pages で使うカスタムドメインのネームサーバを CloudFlare に変更する必要があります。まず CloudFlare に使うカスタムドメインを追加してください。追加すると `*.ns.cloudflare.com` のふたつのネームサーバのドメインが表示されるはずです。このネームサーバをカスタムドメインを取得したサービスでネームサーバの変更してください。`dig` コマンドでネームサーバを確認して変更できていれば成功です。

```
% dig superbrothers.jp +nostats +nocomments ns

; <<>> DiG 9.8.3-P1 <<>> superbrothers.jp +nostats +nocomments ns
;; global options: +cmd
;superbrothers.jp.              IN      NS
superbrothers.jp.       104943  IN      NS      sima.ns.cloudflare.com.
superbrothers.jp.       104943  IN      NS      marty.ns.cloudflare.com.
```

## DNS を設定する

ネームサーバが正しく設定されたら次は DNS の設定をします。GitHub Pages では CNAME と A レコードどちらでも設定を行えるようになっています。今回はルートドメインを使うため A レコードで設定を行っています。

- [Tips for configuring an A record with your DNS provider - User Documentation](https://help.github.com/articles/tips-for-configuring-an-a-record-with-your-dns-provider/)

以下のふたつの IP アドレスを A レコードとして設定します。反映されるまで時間がかかることがあります。

- `192.30.252.153`
- `192.30.252.154`

この時点でブラウザからアクセスすると正しくカスタムドメインで GitHub Pages のサイトが表示されるはずです。

<img width="737" alt="Screenshot 2015-12-13 11.39.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/3780/1c76aa08-18ec-08fb-108a-7f37010d5b3b.png">

## SSL を有効にする

DNS の設定がうまくいったら次は Crypto タブから SSL を有効にします。プルダウンでいくつかの設定が選択できまずが、ここでは `Flexible` を選択してください。`Flexible` では訪問者と CloudFlare 間の通信は SSL が使われますが、CloudFlare と GitHub Pages 間は平文になります。
正しく設定されていればブラウザから HTTPS でアクセスできるようになっています。

<img width="734" alt="Screenshot 2015-12-13 11.45.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/3780/80581fe6-2987-de75-7879-08e5a0312180.png">

## 常に HTTPS を使うように設定する

HTTPS でアクセスできるようになったので、HTTP の利用を止めて全て HTTPS を使うように設定します。Page Rules タブから Add new rule に進み HTTPS を有効する URL パターンを入力します。全てのパスで HTTPS のみを使うときは以下のように設定してください。

正しく設定されると HTTP でのリクエストは全て HTTPS にリダイレクトされるようになります。

<img width="720" alt="Screenshot 2015-12-13 11.49.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/3780/84d6e8f6-1e38-6b16-c165-98789639a223.png">

## HSTS を有効にする

ここまででカスタムドメインの GitHub Pages で HTTPS を使うことができていますが、最後に HSTS の設定をやっておきましょう。HSTS はブラウザに次からこのサイトへのアクセスには HTTPS を使ってくださいと約束させるセキュリティ機能です。

- [HTTP Strict Transport Security - Security | MDN](https://developer.mozilla.org/ja/docs/Security/HTTP_Strict_Transport_Security)

Crypto タブから HSTS の設定を行うことができます。この中で `include subdomains` を有効にするとサブドメインに対しても HSTS が有効になりますが、もし社内などでこのドメインのサブドメインを利用していると正しく接続できなくなる可能性があります。注意してください。

<img width="740" alt="Screenshot 2015-12-13 11.57.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/3780/a96684b4-4e2f-c4ec-f8be-3cb1c6563b10.png">

HSTS を設定することで以下の SSL 評価サイトでの評価も A+ グレードになります。
<img width="909" alt="Screenshot 2015-12-13 12.13.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/3780/cb2a8e3a-5dd5-8864-1ec1-46022c358450.png">

- [SSL Server Test (Powered by Qualys SSL Labs)](https://www.ssllabs.com/ssltest/)

## まとめ

CloudFlare を使うことでカスタムドメインの GitHub Pages で HTTPS を使うことができました。ちなみに CloudFlare では HTTP/2 もデフォルトで有効になってます。

- [chrome://net-internals/#http2](chrome://net-internals/#http2)
<img width="667" alt="Screenshot 2015-12-13 12.03.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/3780/eaeefe9c-51b5-fa88-d4c8-cc1f0e86a690.png">

無料でここまでできる CloudFlare サイコウ！ :beers: