GitHub Pages + 独自ドメイン + HTTPS (SSL) でサイトを公開した

何番煎じかわからないネタですが、自分の備忘録としてGitHub Pages + 独自ドメイン + HTTPS (SSL) でサイトを公開したときの方法を書きます。

作成したサイトは 、この間作成したシェルスクリプト用のテスティングフレームワーク shellspec の公式サイトです。必要ないかなーとも思っていたのですが、もう少し検索に引っかかって欲しくなったので。ドメインもとっちゃったし。

shellspec.info

やること

  • GitHub Pagesでウェブサイト作成
  • 独自ドメインのためのDNS設定
  • 独自ドメイン + HTTPS (SSL) 有効化
  • その他

GitHub Pages でウェブサイト作成

まずは独自ドメインのことは一旦忘れて、GitHub Pages でウェブサイトを作成します。サイトの目的は github のプロジェクトページへの流入を増やすためで詳細な説明などをする予定はありません。トップページ1枚程度で shellspec がどんなものかをざっくり見せるだけのものとします。

GitHub Pages でウェブサイトを作成するにリポジトリにサイトのソースコードを入れて設定するだけですが、以下のいずれかから選ぶ必要があります。

  1. master ブランチ
  2. master ブランチの docs フォルダ
  3. gh-pages ブランチ

今回は、shellspec リポジトリとは別管理にしたかったので、shellspec.info 専用のリポジトリ shellspec-website を作成し 、1. の master ブランチからウェブサイトを作成することにしました。

まずはプロジェクトの Settings から GitHub Pages の設定に移動します。

f:id:koichi_nakashima:20190304131016p:plain

Source の項目に「gh-pages branch]「master branch」「master branch /docs folder」「None」とあるので 「master branch」を選びます。(「gh-pages branch」はGitHubにgh-pagesブランチがなければ表示されません)

余談ですが、gh-pages ブランチを使用した場合の例をぐぐってみると、master ブランチから gh-pages ブランチを作成しているのをよく見かけたのですが、通常 master ブランチは伸びていくものなので、そこから gh-pages ブランチを枝分かれさせるのは気持ち悪い気がします。gh-pages ブランチを使用してプロジェクトと GitHub Pages を同じリポジトリに作成する場合は、master ブランチと切り離して gh-pages ブランチを作成したほうが良いと思います。(つまり git checkout --orphan gh-pages を使用して gh-pages ブランチを作成するということです。)

設定を終えると次のような画面になり、ウェブサイトのURL (https://ko1nksm.github.io/shellspec-website/) が表示されます。

f:id:koichi_nakashima:20190304161252p:plain

設定は終わりましたが、ウェブサイトが更新されるタイミングはリポジトリにpushしたタイミングみたいなので、リポジトリの README.md (もしくは index.md)に適当な内容を書いて github に pushします。(更新まで少し数十秒程度時間がかかることがあるようです。)

トップページは index.md があれば index.md、なければ README.md が使用されるようです。markdownを使いたくない場合は、拡張子をhtmlにしてHTMLを書くことも出来ます。markdownで書いた場合、対応するHTMLが自動的に作成されます。(例えば index.md であれば、index.html が作成されます。ただし README.md からも index.html が作成されます。)

さて、これでGitHub Pagesでサイト作成ができたわけですが、少しさみしいのでデザインを調整してみます。GitHub Pages の設定の Theme Chooser からテーマを選ぶとテーマが反映されます。この時リポジトリに _config.yml が追加・更新されるので注意してください。

独自ドメインのためのDNS設定

次にGitHub Pagesでカスタムドメインの設定を行う前に、DNS設定を行います。DNS設定のやり方は使用しているDNSサービスによって違います。

まず方針として最終的に https://shellspec.info でウェブサイトを公開するわけですが、これは www などのサブドメインのない apex domain です。この場合の DNS 設定方法には「ALIASレコードを使用する」「ANAMEレコードを使用する」「Aレコードを使用する」の3通りあります。

help.github.com

ALIASレコード または ANAMEレコード であれば、IPアドレスを書かずに簡単にかけるのですが、shellspec.info で使用している namecheap ではサポートされていません。なのでAレコードを使用して設定しました。(IPアドレスは変更になることがあるかもしれないので 最新の github のドキュメントを参照してください)

f:id:koichi_nakashima:20190304170307p:plain

しばらく待って、shellspec.info でgithubのIPアドレスが引けるようになれば完了です。

独自ドメイン + HTTPS (SSL) 有効化

GitHub Pagesの設定に戻ります。独自ドメインに切り替えるには、custom domain の設定に使用するドメインを設定するだけです。 custom domain の設定を有効にするとリポジトリに独自ドメイン名が書かれた CNAME ファイルが追加されます。

f:id:koichi_nakashima:20190304171028p:plain

設定を行うと、https://ko1nksm.github.io/shellspec-website/http://shellspec.info に変わり、旧URLにアクセスすると独自ドメインのURLにリダイレクトするようになります。

独自ドメインの設定が終わってもHTTPSが有効にならない場合があります。(Enforce HTTPS が押せない。)これはDNSの設定が正しく設定されてないか、GitHubがまだIPアドレスを引けないからです。(DNSの設定に問題がなければ)しばらく待てば有効にできるようになると思います。

Enforce HTTPS を有効にすれば、HTTPS対応も完了です。証明書は Let's Encrypt のものが使用されていました。はてなブログもそうですが、Let's Encrypt ができてから独自ドメインでも自分で証明書を取ることなく簡単にHTTPS対応ができるようになったので便利ですね。

  • その他

公開した後は、プロジェクトURLの設定だとか、サイトマップの生成だとか、Googleアナリティクスの設定だとか、サイトの内容を書くとかするわけですが、GitHub PagesではJekyllが使用されているので、あとは Using Jekyll as a static site generator with GitHub Pages - GitHub Help とか Jekyll • Simple, blog-aware, static sites | Transform your plain text into static websites and blogs を参照しつつ作業します。

今はテーマ (jekyll-theme-slate) のCSSを少し調整して、_config.yml を書き換えた程度です。

サブドメインなし→ありへのリダイレクトに namecheap の URL Redirect Record が便利だった

このブログは、はてなブログを使用しているのですが、独自ドメインで運用する時はサブドメインを設定する必要があるようです。

help.hatenablog.com

サブドメインでブログを運用すること自体は別に問題ないんですが、サブドメインなしの http://nksm.name にリンクしている所があったので、サブドメインなしでアクセスしたら、https://blog.nksm.name にリダイレクトさせようと思いました。

リダイレクトさせるには例えば .htaccess にリダイレクト設定を記述すれば良いのですが、その .htaccess を配置するサーバーが必要になってきます。一応VPSサーバーをレンタルしているので配置するサーバーはあるのですが、現在はプライベートリポジトリ用のgitlabにしか使用しておらず、GitHubのプライベートリポジトリが無料になったのでVSPサーバーを解約しようと思っています。もしサーバー立てたくなったらその時はクラウドでも使えばいいですし。

なので、どこか無料で.htaccessが使えるサーバー無いかなと探していたのですが、現在使用しているレジストラの namecheap にそういう機能があったのを思い出しました。(今まで気にしたことがなかったのですが、URL転送などの名称で提供してる所がいくつか見つかりますね)

www.namecheap.com

設定方法は、Domain List から対象のドメインの [MANEGE] をクリックして、Advanced DNS から TypeURL Redirect Record のレコードを追加するだけです。

f:id:koichi_nakashima:20190224213029p:plain

赤枠の一行上の、CNAME Record の行が、はてなブログを独自ドメインで運用するための CNAME の設定で、赤枠の行でサブドメインなし(@)でアクセスされたら、https://blog.nksm.name にリダイレクトするという設定を行っています。Value の値にはリダイレクトのタイプを指定することができ、 Permanent (301)(301リダイレクト)、Unmasked (302リダイレクト)、Masked(URL frame)が選べるようです。

設定後 nksm.name のIPアドレスを調べてみた所、namecheap 管理だと思われる IPアドレスが返ってきたので、http://nksm.name にアクセスしたら一旦 namecheap のウェブサーバーが受け取り、 https://blog.nksm.name にリダイレクトさせるという仕組みのようです。

ということで、namecheap の URL Redirect Record の機能のおかげで、追加でサーバーをレンタルすることなく実現することが出来ました。