【SSL】FreenomドメインをGitHub Pagesに設定しHTTPS化しよう【完全無料】

# 何？

GitHub Pages、いいですよね。無料だし、リポジトリの変更が勝手にデプロイされるので静的なサイトを公開するときはとても便利なサービスです。強いて良くないところを挙げるなら、URLが`<gh-username.github.io>`と長い上自由に変更できないところくらいです。
そこで「独自ドメインを取得してGitHub Pagesに登録したいな」となるんですが、ドメインはどれもそこそこ高いんですよね。また「HTTPS化をサクッとしたいな」と思っても大手のドメイン取得サービスではオプション価格がかかる場合が大半です。
今回の記事では、無料で好きなドメインを取得できる[Freenom](https://freenom.com)とGitHub Pagesの便利機能であるカスタムドメインに対するSSL証明書発行を使って、誰でも簡単に完全無料で独自ドメインを取得＋HTTPS化してGitHub Pagesのカスタムドメインに設定する方法をわかりやすく解説します🎶

## Freenomでドメインを取得

まず[Freenom](http://www.freenom.com)にアクセス。好きな方法でサインインしてください。

ログインできたら[ドメイン検索画面](https://my.freenom.com/domains.php)へ。
ためしに`unko`で検索すると、`unko.ml`が取得できそうです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278919/d0818110-e4f8-6407-3831-3e8c41d44495.png)

`Get it now!`を選択し`Checkout`。
するとドメインをレンタルする期間を選択する画面に遷移します。12ヶ月まで無料で、それ以上は有料です。

毎年失効の2週間前~失効期限までに忘れず更新(自分のアカウントの管理画面から可能)することでまた12ヶ月無料でレンタルできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278919/2ab262bc-a35f-2641-8d91-a0356caeb794.png)


`Continue`を選択すると、確認画面に遷移。`Complete Order`を選択して取得完了！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278919/be2b667c-f191-d2ab-31a9-dfae5cedaa2c.png)

## Aレコード/CNAMEレコードの設定

[取得ドメイン一覧](https://my.freenom.com/clientarea.php?action=domains)に移動。ちゃんと取得したドメインが表示されていますね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278919/aec8a691-f6bb-297e-91fb-88d527c06529.png)

`Manage Domain ⚙`からドメインの管理画面に入り、`Manage Freenom DNS`タブを選択。

![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278919/9a501b1c-92ec-4df4-0561-3c913e408346.png)

するとDNSレコードを設定する画面になります。

ここから[GitHub Pages向けのAレコード/CNAMEレコード](https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site#configuring-an-apex-domain)を設定します。

|Name|Type |TTL |Target                 |
|----|-----|----|-----------------------|
|    |A    |3600|185.199.108.153        |
|    |A    |3600|185.199.109.153        |
|    |A    |3600|185.199.110.153        |
|    |A    |3600|185.199.111.153        |
|WWW |CNAME|3600|`<GitHub ID>.github.io`|

以下が入力した画面です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278919/d67df058-b323-c82d-be57-89a4d25c242d.png)

`Save Changes`で設定は完了です。DNSレコードの反映には数分かかるようなので、少し待ちましょう。

反映されたかどうかの確認として`dig`コマンドで問い合わせてみましょう。

```bash
# 自分がGitHub Pagesで使用しているegpl.gaで試してみる
$ dig egpl.ga +short
egpl.ga.                3411    IN      A       185.199.111.153
egpl.ga.                3411    IN      A       185.199.108.153
egpl.ga.                3411    IN      A       185.199.109.153
egpl.ga.                3411    IN      A       185.199.110.153
```

## GitHub Pagesへのカスタムドメイン設定+SSL証明書発行+HTTPS有効

任意のリポジトリの`Settings`->`Pages`タブからGitHub Pagesを有効化してください。

そして`Custom Domain`のフォームに取得したドメインを入力してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278919/8acb8ec2-53a4-e414-5599-6c157d4bbadf.png)

`Save`をクリックするとDNSレコードを調べてSSL化できるかどうか判定されます。

*この時DNSレコードが反映されていないとエラーが出るので、反映されるのを待って`Remove`->再度入力->`Save`で再判定されます。*

うまく行ったら下の`□ Enforce HTTPS`にチェックが入れられるようになるので、チェックを入れると、SSL化されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278919/baffd2c0-d18f-966b-7f40-21f8dbdc649a.png)

確認のためサイトに行くと…

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278919/a119fa04-b842-cf19-3866-3d59d6b349d1.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278919/acb05839-4b63-5b6a-8bc4-803633d759eb.png)

やったね🎶

## まとめ

FreenomとGitHub Pages、無料でここまで出来るのはありがたいですね🎶