GitHub PagesでHugo & 独自ドメイン & httpsなブログ環境の構築

今回ブログ環境を用意するに当たって考慮したのは以下のポイント。

1. 書くことに集中したいのでなるべく手間を掛けない
2. 独自ドメイン
3. https

ブログCMSはセキュリティ周りで気にすることが多いのと環境を用意するのが面倒なので、静的ページで単純に表示できれば良かった。

上記を満たして採用したのは以下。

• GitHub Pages
• Hugo
• Cloudflare

GitHub Pagesで静的なWebページを公開できる事は色々なツールのプロダクトページを見て知っていたし、Markdown記法のテキストからサイトジェネレータを使って静的ページを生成出来る事も知っていた。 なのでこれらに独自ドメインとhttpsを組み合わせて環境を構築した。

GitHub Pagesについては 公式のドキュメントを読めば十分に理解できる。
気軽にWeb検索してしまうと古い情報に当たったりして逆に理解が遠くなるのであまりオススメはしない。

サイトジェネレータについてはHugoを選択した。
Go言語を愛しているという理由が強くそれだけの理由なんだけど Octopressを少し触った感じであまり好みでなかった。
この辺は好みの問題だと思う。

独自ドメインは久しぶりに購入をしたんだけれど.shopとか面白いドメインにしようかな。
なんて深夜のノリにやられて考えてしまったが翌朝起きて作業する頃には選択肢にも残っていなかった。
真夜中の魔法こわい。

https化についてはCloudflareを今回初めて使った。
本当に無料でここまで出来てよいのか？と思う位に素晴らしいサービスだと思う。
今後も積極的に使っていきたい。

いくつか、時間が掛かってしまった部分があったのでその辺りを以下にピックアップしてみる。

1. GitHub Pagesにおけるリポジトリ名とPublic/Private

GitHub Pagesのドキュメントを読んでいるとusername.github.ioというリポジトリ名を良く目にする。
GitHub Pagesのデフォルトでサイト構築する際にはこれが楽なんだけど、独自ドメインにする時には関係なくなって来る。

RepositoryはPrivateでも大丈夫。
Hugoを使うと、 Draftという概念があって下書き状態の記事を書きっぱなしにする事も出来る。
今回はRepositoryをPrivateにした。

2. Hugo config.tomlの書き方

Hugoは設定をconfigファイルに記述していく。
Web検索しているとconfig.toml config.yaml config.json などの表記があり、一瞬考えてしまうかもしれない。

これは Hugoのドキュメントを読めばすぐに解決するんだけど、toml -> yaml -> jsonの順番に探しに行くらしい。
デフォルトで .tomlだったのもありconfig.tomlで使っている。

注意点は記法をちゃんと拡張子の意味に合わせる事。
当たり前なんだけど、Web検索していると .toml表記や .yaml表記など色々な記事が出て来る。
そのままコピーして使ったりしていると混在してしまう。

今回 .tomlというものについて真面目に調べたりして良いきっかけになった。
個人的にはその他いろいろな設定ファイルと合わせた方が楽だと思うので、.yamlにすればよかったかも。

ただ、そんなに変更する場所でもないので暫くは.tomlでいく。

3. 独自ドメインとDNSの設定

今回購入したドメインの管理は godaddyで行っていて、DNSレコードの変更画面が最初まったく理解出来なかった。
個人的にはDNSレコードの管理画面にリッチなUIは必要なくて、シンプルなテキストを流し込んだらそれを単純に理解してくれればそれで良い。

Cloudflareでhttps対応をする為にDNSレコードの管理をCloudflareで行うことになるんだけど、godaddyよりはマシかなという程度。
まぁ、この辺の感じ方は人それぞれだと思う。

4. GitHub Pagesを独自ドメインにする

GitHub RepositoryのSettingsから変更するだけで出来るように感じるが、 CNAMEというファイルが公開するRepositoryに必要になる。このファイルに独自ドメインを書く。
独自ドメインを www.stakada7.comのようなサブドメインとするか、stakada7.comのようなApex domainとして公開するかで 若干設定の手順が異なる.
また、ドメインによってはApex domainのレコード変更を許容していない場合もあるらしいので注意が必要かもしれない。
今回はGitHubが指定してくる ２つのIPアドレスでAレコードを更新した。

と、偉そうに書いてあるがこれもGitHub Pagesのドキュメントを読めば全て書いてある。

5. https対応

今回作業していて一番楽しかったというか学びがあったのがこの作業かもしれない。

やる事は、Cloudflareにアカウントを作って独自ドメインをスキャンさせる。
CloudflareからNSドメインが発行されるのでそれを自分のDNSレコードのNSレコードに反映させる。
大抵はすでにNSレコードの設定はされていると思うのでそれを上書きする。

NSレコードの更新がCloudflare側で検知出来たらSSLのオプションを指定してPage Rulesを追加して終わり。
本当に簡単。

SSLオプションに関してはとりあえず Flexibleで運用している。

Page Rulesは基本的には/*の指定で良いと思う。
これだけですべてhttps化出来るのは本当に素晴らしい。

1つ見つけるまでに時間が掛かった箇所は、HugoのConfig.tomlで baseURLの値を更新し忘れていた事。 HugoのQuickstartを見て作業を始めたのでここが適当な値のままだった。
https://stakada7.github.io/stakada7.comとか、GitHub Pagesの標準の値のままの場合も修正が必要だ。
.jsや .cssなどのファイルがhttpsとして読み込めないエラーなどで怒られる場合はこの辺を見直してみると良いかも。

だいぶ個人的なメモみたいになってしまったが、これで最低限のメンテナンスだけで運用出来ると思う。
後はドメインの支払いを忘れなければ大丈夫なはずだが、次回更新時は面倒だし複数年で更新しようかなと思っている。