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

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

## 環境

Node.js:  v8.9.4
VuePress: 0.8.4

## 課題

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

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

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

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

## VuePress、その使用感

<div style="text-align: center;">
<img src="https://qiita-image-store.s3.amazonaws.com/0/105411/9f71759a-3615-c0ed-65ae-b3e82007e665.png">
</div>

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

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

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

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

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

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

![gp.png](https://qiita-image-store.s3.amazonaws.com/0/105411/39d9dfed-0127-d3f4-b0b3-97d278c2409d.png)

そんな折、日本時間の2018年5月2日、このような[アナウンス](https://blog.github.com/2018-05-01-github-pages-custom-domains-https/)を目にしました。

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

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

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

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

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

### 1. 独自ドメインを購入

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

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

![vp_onamaedns.png](https://qiita-image-store.s3.amazonaws.com/0/105411/607c70fa-d006-e243-62b8-671bf091c07e.png)

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

> VALUEに 192.30.252.153 と 192.30.252.154 を入力

という記述が多数挙げられていたのですが、
今回の`Github Pages 独自ドメインのHTTPS化`に伴い、このアドレスが変更されたようです。
[公式](https://help.github.com/articles/setting-up-an-apex-domain/)下段の記述にのっとり、`VALUE`に

> 185.199.108.153
> 185.199.109.153
> 185.199.110.153
> 185.199.111.153

を設定します。

![vp_dns.png](https://qiita-image-store.s3.amazonaws.com/0/105411/95e77ab9-ebb2-478c-f64e-80240f5205ee.png)

こちらとて2018年5月初頭時点の情報です。正確を期すために、[公式](https://help.github.com/articles/setting-up-an-apex-domain/)の記述をご確認ください。

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

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

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

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

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

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

[VuePressの公式ドキュメント](https://vuepress.vuejs.org/guide/deploy.html#github-pages)もご参照ください。

その他、デプロイの自動化...なども行いたい場合、
プロジェクト直下に`deploy.sh`も生成し、適宜設定をするとよいでしょう。
自分の場合は[公式](https://vuepress.vuejs.org/guide/deploy.html#github-pages)をもとに、こんな感じで用意。

```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 git@github.com:ユーザ名/レポジトリ名.git master
cd -
```

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

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

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

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

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

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

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

・`Custom domain`に取得した独自ドメインを設定し、`Save`ボタンをクリック([参考](https://help.github.com/articles/using-a-custom-domain-with-github-pages/))
(↑の`deploy.sh`内で`CNAME`ファイルを作成している場合、このステップは必要ありません)

![vp_custom.png](https://qiita-image-store.s3.amazonaws.com/0/105411/0d768f50-27fb-72db-0eb9-1bf2ec19cdc2.png)

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

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

![vp_notwork.png](https://qiita-image-store.s3.amazonaws.com/0/105411/91c1bc3f-9f80-4019-4130-b3329ee7e657.png)

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

![vp_cbavailable.png](https://qiita-image-store.s3.amazonaws.com/0/105411/ebeb48f2-fbc2-9e9b-4f98-f38e6c93c34d.png)

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

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

## 所感

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

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

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

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

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