何番煎じかわからないネタですが、自分の備忘録としてGitHub Pages + 独自ドメイン + HTTPS (SSL) でサイトを公開したときの方法を書きます。
作成したサイトは 、この間作成したシェルスクリプト用のテスティングフレームワーク shellspec の公式サイトです。必要ないかなーとも思っていたのですが、もう少し検索に引っかかって欲しくなったので。ドメインもとっちゃったし。
やること
- GitHub Pagesでウェブサイト作成
- 独自ドメインのためのDNS設定
- 独自ドメイン + HTTPS (SSL) 有効化
- その他
GitHub Pages でウェブサイト作成
まずは独自ドメインのことは一旦忘れて、GitHub Pages でウェブサイトを作成します。サイトの目的は github のプロジェクトページへの流入を増やすためで詳細な説明などをする予定はありません。トップページ1枚程度で shellspec がどんなものかをざっくり見せるだけのものとします。
GitHub Pages でウェブサイトを作成するにリポジトリにサイトのソースコードを入れて設定するだけですが、以下のいずれかから選ぶ必要があります。
- master ブランチ
- master ブランチの docs フォルダ
- gh-pages ブランチ
今回は、shellspec リポジトリとは別管理にしたかったので、shellspec.info 専用のリポジトリ shellspec-website を作成し 、1. の master ブランチからウェブサイトを作成することにしました。
まずはプロジェクトの Settings から GitHub Pages の設定に移動します。
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/
) が表示されます。
設定は終わりましたが、ウェブサイトが更新されるタイミングはリポジトリに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通りあります。
ALIASレコード または ANAMEレコード であれば、IPアドレスを書かずに簡単にかけるのですが、shellspec.info で使用している namecheap ではサポートされていません。なのでAレコードを使用して設定しました。(IPアドレスは変更になることがあるかもしれないので 最新の github のドキュメントを参照してください)
しばらく待って、shellspec.info でgithubのIPアドレスが引けるようになれば完了です。
独自ドメイン + HTTPS (SSL) 有効化
GitHub Pagesの設定に戻ります。独自ドメインに切り替えるには、custom domain の設定に使用するドメインを設定するだけです。
custom domain の設定を有効にするとリポジトリに独自ドメイン名が書かれた CNAME
ファイルが追加されます。
設定を行うと、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 を書き換えた程度です。