VuePress+GitHub Pagesで独自ドメイン＋HTTPS対応のサイトを作る in 2018

私ごとでありますが、先日ポートフォリオサイトを更新しました。
その過程でGitHub Pagesの独自ドメイン運用＋HTTPS化に触れ、
おまけにVuePressともちょっぴりだけ仲良くなれました。

環境

Node.js: v8.9.4
VuePress: 0.8.4

課題

これまで、自身のポートフォリオは、BootstrapベースのベタなHTMLサイトで作っていました。
ですが、よりシンプルなものへの志向(レイアウト・ファイル構成)や、飽きも感じていたので、
静的サイトジェネレータで作り直してみるのはどうか、という欲望を抱いていました。

静的サイトジェネレータはこれまでHugo、ちょっぴりGatsbyJSを試してみたことがありました。

いずれも優れたソフトウェアであることは論をまたないと思います。
しかしいざ始めてみると、コンテンツ生成のための暗黙的な規約の量、実現したい機能のために強いられる学習(主にテンプレート関数)に、心をかき乱されました。

実現したかったことは、コンテンツを作成・更新し続けること、それに集中できる環境の構築でした。
にもかかわらず、そこに集中できた気に一向になれず、その運用には常にストレスが伴っていました。

VuePress、その使用感

2018年4月中旬にリリースされた、JavaScriptのエコシステムに根ざした静的サイトジェネレータ。
公式サイト・ドキュメントはこちらです。

認知したのはTwitterのTL、またGitHubのフィードからでした。
Vueという目下IKEIKEなワードを冠していたため、何ぞ？と調べてみたところ、
新たな静的サイトジェネレータだということが判明した故、とりあえず試してみることにしたのです。

最初の数時間こそ、フォルダツリーの構成 | ファイルの配置方法の把握に手間取り、
「お前もか...」な心境だったことを率直に告白いたします。(怠慢・短気・傲慢)
ですが、ドキュメントもほぼ完読できてしまうほどコンパクトな分量だったことなどもあって、
「最低限、これくらいのレイアウト感があるものが欲しい...」を満たしたサイトの骨組みを、
4日ほどで完成させることができました。
(サイドバーのカスタマイズ方法を調べないと...😓)

デプロイは以前と同様、GitHub Pagesの非独自ドメインで。ここは大きな困難もなくクリア。

かくして目的のサイトがネットの海に忽然と姿を現します。この時点で私の欲望は満たされておりました。

GitHub Pagesが、標準で独自ドメインのHTTPS化に対応した

そんな折、日本時間の2018年5月2日、このようなアナウンスを目にしました。

これまでは独自ドメインを使用する場合、CloudFlareなどといった技術をかませないとHTTPS化がされなかった…という状況だったなか、
GitHub内の設定だけで独自ドメインでもHTTPS化が可能になった、ということのようです。
(実際にはこのアナウンスより少し前から、既に対応済だったっぽい...？※参考)

非独自ドメインならばデフォルトでHTTPS化されていたわけですし、そのまま運用していくとしても不満はありませんでした。
ですが、GitHub Pages上でサイト構築中な手前、タイムリーなニュースだったのと、
現在読んでいた本にあった、

(自身のブログの運用は)必ず独自ドメインを登録すること

という記述がトリガーとなり笑、じゃこの際そうしますか、という心境へと駆り出されました。

GitHub Pages上で独自ドメインのサイトを設定する手順は、ざっくり以下の3ステップ。
ついでに個人的につまずいたポイントなんかも...。

1. 独自ドメインを購入

この後の行程は、どこのサービスでドメインを購入したかでやや手順が変わってくるみたいです。
自分の場合はお名前.comで。

・お名前.comのドメイン管理画面に移動し、DNSレコードを設定します。

ネット上の資料を検索すると

VALUEに 192.30.252.153 と 192.30.252.154 を入力

という記述が多数挙げられていたのですが、
今回のGithub Pages 独自ドメインのHTTPS化に伴い、このアドレスが変更されたようです。
公式下段の記述にのっとり、VALUEに

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

を設定します。

こちらとて2018年5月初頭時点の情報です。正確を期すために、公式の記述をご確認ください。

2. VuePress上で、config.jsの設定を確認する

config.jsは、VuePressで生成するサイトの設定を定義するファイル。

確認すべきはbaseの設定です。まずここで、若干つまずいてしまいました...。
今回のケースのようにトップレベルのドメインでデプロイしたい場合、baseは取り除きます。

config.js

module.exports = {
  ...
  // `base`は設定しないでOK
  title: "foo...",
  description: "bar...",
  ...
}

一方、サブドメインでデプロイしたい場合、baseにディレクトリ名を設定します。
例として、https://renamemiya.com/portfolio/ というドメインで運用したい場合、
baseを/portfolio/のように設定します。

config.js

module.exports = {
  ...
  base: "/portfolio/",
  title: "foo...",
  description: "bar...",
  ...
}

VuePressの公式ドキュメントもご参照ください。

その他、デプロイの自動化...なども行いたい場合、
プロジェクト直下にdeploy.shも生成し、適宜設定をするとよいでしょう。
自分の場合は公式をもとに、こんな感じで用意。

#!/usr/bin/env sh

# abort on errors
set -e

# build
npm run docs:build

# navigate into the build output directory
cd .vuepress/dist

echo '自サイトのURL' > CNAME

git init
git add -A
git commit -m 'deploy'

# if you are deploying to https://<USERNAME>.github.io/<REPO>
git push -f [e-mail]:ユーザ名/レポジトリ名.git master
cd -

3. リポジトリのsettingから各種設定を行う

ここまで来たら、GitHubのレポジトリにプロジェクトをプッシュします。

# 適宜ご変更ください
$ git remote add origin https://github.com/`accountName`/`projectName`.git
$ git push -u origin master

あるいは、↑でdeploy.shを用意したのであれば、それを直接叩く感じで。

$ chmod +x deploy.sh
$ ./deploy.sh

その後、GitHubのリポジトリへ移動し、Settings -> GitHub Pagesの項目に着目します。

・自分はmaster branchを設定し、masterブランチの内容が直接ホストされる設定にしました。

・Custom domainに取得した独自ドメインを設定し、Saveボタンをクリック(参考)
(↑のdeploy.sh内でCNAMEファイルを作成している場合、このステップは必要ありません)

・Enforce HTTPSのチェックボックスをオン

もう一つ、ここでハマりました。
私が取得した独自ドメインの場合、チェックボックスをクリック出来なかったのです。

Not yet available for your site because the certificate has not finished being issued...。
新規取得したドメインなことだし、時間が経てば解決するだろう...とは感じつつも、
やはり何か設定を見落としているのではないか、なんて疑念を拭いきれず、もがいて数時間。
ここを参考に、
「有効になるのに、現在時間が掛かっている模様。とどのつまり、やはり時間が解決してくれるはず」
という判断をひとまず下しました。
一夜明けると、無事チェックボックスがクリックできるようになっており、ひと安心でした。

リンク先の議論をざっくり追った限りだと、
ここは人によって数分でクリアできたり、あるいは十数時間を要したりするかもしれません。

以上の3ステップで完了です。
当初の想定よりずっと時間が掛かってしまいましたが...なんとか目的のサイトをHTTPS化できました！

所感

静的サイトジェネレータは今後も新たなソフトが続々登場してくるのでしょうが、
仮に新しいものへ移行したくなっても、マークダウンで記事を管理するようなタイプであれば、
比較的ラクに行けるだろう、という。
この可搬性の高さは、心を身軽にしてくれます。

そして、規約が極めて少なく、普段使いのストレスから開放してくれたVuePress。
今のところ、自分にとっては手のなじむ、価値あるツールとなりました。

一方、現状のVuePressはブログ機能(タイムスタンプ・タグ・フィード)を一切サポートしておらず、
本格的なブログを運用していきたい、というニーズに対しては無力でしょうし、
公式テーマなども存在せず、デフォルトのまま使用する限り、デザインも他人と丸かぶり。
現行で使用しているものを投げ打ってまでお引越したい！と思わせる求心力は、まだないのかもしれません。
(この現状の機能不足感にこそ、今の自分は掬われたのですが。
それと、ちょっとでもフロントエンドやVue.jsの知見があれば、差別化は十分できるはず)

ただし、ブログ機能のサポートは今後の改善事項として挙げられてはおり、開発スピードも速いため、
現状抱える問題の多くも、早々に解決されるのかもしれません。

また、Github Pagesの他にも、Firebase・Netlifyなど、
昨今の無料枠のあるホスティングサービスの選択肢の多さはありがたく思います。
今回のようなケース以外にも、例えば
「ちょっとこのサイトをテストマーケティングしてみたい」...突然そんな企みが湧き上がったときに、
上記のようなサービスを息を吐くようにカンタンに試せる...そんな所作を身に纏っていたらグッドなので、
それぞれ理解を深めていきたいです。
いつも身軽な心で開発に向き合えたらいいな。