お名前.comとCloudflareでSSL対応

Hugo+Github Pagesで作ったブログを、お名前.comとCloudflareでSSL対応してみました

kinko25

1 minute read

Hugo+Github Pagesで作ったブログを、お名前.comとCloudflareでSSL対応してみました

なぜSSL対応したのか

下の記事を読めばお分かりいただけるでしょう。

【緊急】2018年7月からSSL化していないサイト「http://」は「保護されていません」と警告が表示されるようになります!-エムタメ!

https://mtame.jp/column/ssl_chrome68

もうその7月がやってきてしまったからですね。

まだSSL対応していないサイトも多いので、

対応していないとこはGoogleでの検索順位も下がりそうですね。

今回SSL化対応する際に、色々詰まるとこがあったので、皆さんの参考になればと思い、

こちらで対応方法を書かせていただきます。

SSL化するために必要なこと

①お名前.comでの、アカウント登録とドメイン取得。

※お名前.comじゃなくてもいいです。ただ、今回ご紹介するのは、お名前.comでのやり方です。

②Cloudflareでのアカウント登録

③Hugo+Github Pagesで作成したサイト

ざっくり必要だったようなことを上げていきます。

ドメインを取得

「お名前.com」でドメイン取得しましょう。

https://www.onamae.com/

ドメイン取得が出来たら、

「お名前.com Navi」にログインして

上のタブから「DNS」タブをクリックします。

遷移したら、「ドメインのDNS関連機能設定」を選択し、「次へ」。

先程、取得したドメインにチェックを入れて、「次へ進む」

ここまで来たらここは開きっぱなしにしておきましょう。

github.ioのIPアドレスをdigる

IPアドレスの調べ方について、調べてみると、

どこの記事でもdigコマンドを使っていますが、

私のPCでは、digコマンドが使えなかったので、

digコマンドを使わなくてもIPアドレスを調べられる方法を書きます。

※digコマンドを使うためにツールをインストールしたりもしましたが、ダメでした・・・。

とは言っても、下のリンク先で、ホスト名に「アカウント名.github.io」のドメインを入力して

「digを実行する」というボタンを押すだけの作業ですw

https://www.cman.jp/network/support/nslookup.html

実行すると、情報が吐き出されるので、

「;; ANSWER SECTION:」の中にある

123.xxx.xxx.xxx

456.xxx.xxx.xxx

のドットで区切られた数字がIPアドレスです。

このIPアドレスが上から1番目と2番目が必要になります。

このアドレスを次のDNS設定で使用します。

DNS登録を行う

digってIPアドレスをゲットしたら

先程、「ドメインを取得」で紹介した開きっぱなしのタブに戻りましょう。

「DNSレコード設定を利用する」の「設定する」をクリック。

DNS_image

上の画像のとこまで移動して

「VALUE」のとこにdigで取得したgithub.ioのIPアドレスを入力して「追加」しましょう。

上の流れが終わったら、

「ホスト名」に「www」と入力。

「TYPE」に「CNAME」を選択。

「VALUE」に「アカウント名.github.io」を入力して追加。

CNAMEファイルを作成

git管理しているルートディレクトリに「CNAME」を作成。

エディターでCNAMEを開き、お名前.comで取得したドメインを入力して保存。

デプロイしてリモートにも上げておきましょう。

ドメインをCloudflareに登録

CloudFlareの公式サイトです。

https://www.cloudflare.com/ja-jp/

ここでアカウントを作成してください。

CloudflareでのSSL設定

ログイン後、取得したドメインを入力して登録。

その後、上のタブから「DNS」を選択。

3つの項目を作成します。

①
「Type」:A
「Name」: 取得したドメイン名
「IPv4 address」: dig取得した1番目のIPアドレス

②
「Type」:A
「Name」: 取得したドメイン名
「IPv4 address」: dig取得した2番目のIPアドレス

③
「Type」:CNAME
「Name」: www
「IPv4 address」: アカウント名.github.io

完了したら、下にある「Cloudflare Nameservers」のとこに行きます。

この「Value」の値を「お名前.com」の

「DNSレコード設定を利用する」の「設定する」をクリックをしたページに行き、

サイドメニューにある「ネームサーバーの変更」をクリック

「お名前.com各サービスを利用」ではなく、

「他のネームサーバーを利用」を選択

「1プライマリネームサーバー」ここに「Cloudflare Nameservers」に記載されている1番目のモノを入力。

「2セカンダリネームサーバー」ここに「Cloudflare Nameservers」に記載されている2番目のモノを入力。

確認画面に進み登録。

これで大体の設定は完了です。

あとは、Cloudflareのページに戻って

上の「Crypto」タブをクリックして

「SSL」を「Flexible」から「Full」に変更

「Always use HTTPS」を「ON」 「HTTP Strict Transport Security (HSTS)」を「有効化」 「Automatic HTTPS Rewrites」を「ON」

だいたいの設定は完了です。 あとは反映を待ちましょう。

READ.MEが反映されたら

SSL化は成功です!

あとはHugoのconfig.tomlファイルを開き、「baseurl」を「http」から「https」に変更して

デプロイすれば完了です。

お疲れ様でした。

最後に

Cloudflareのタブには、色々なメニューがあるので、

色々設定してみるのもいいと思います!

それでは、お名前.comとCloudflareを使ったSSL対応については、この辺で。

ありがとうございました。