GitLab Pagesで独自ドメインのSSLサイトを公開する（Let's Encrypt + 証明書自動更新）

ため息が出るほど簡単です

GitHub Pages と GitLab Pagesの違い

GitHub PagesとGitLab Pages、似ているようですが実はちょっと違います。
GitHub PagesはリポジトリそのものをWebサイトとして公開します。
そのため基本的には静的なWebサイトを公開するのに向いており、 Hugo等の静的サイトジェネレータを使用する場合は、コンパイルした結果をコミットします。 ¹
一方、GitLab PagesはCIでビルドした結果をリポジトリにコミットするのではなく、ビルド成果物を静的なWebサイトとして公開します。

これだけをみて別に優劣はないと思いますが、ビルド成果物がリポジトリにコミットされることには好き嫌いはある気はします。

GitLab Pagesを作成

gitlab.ioドメインでサイトを作成

リポジトリ作成

Pagesを作成するためにPages用のリポジトリを作成します。

New project から Create from template を選択します。

テンプレートとしていくつか静的サイトジェネレータやPlain HTMLのテンプレートが公開されていますので、好きな物を選択します。
今回はHugoを選択します。
リポジトリ名は、 username.gitlab.io で作成します。

Hugoの設定

リポジトリ内の config.toml の baseUrl を https://username.gitlab.io へと書き換えます。
ファイルを選択すると、GitLab上から直接Editできます。

Pipelineを実行

上記 config.toml を編集すると、自動的にPipelineが実行されます。

初期ページがビルドされ、 username.gitlab.io にHugoをビルドした初期ページが表示されるかと思います。
(ビルドが完了してから反映まで数分掛かります)

これでGitLab Pagesの公開自体は終了です。
後は通常のHugoと同様、ブログ記事をコミットすると、再度GitLab CIによってページがビルドされて公開されます。

独自ドメイン化

設定

GitLab Pagesも、GitHub Pages同様独自ドメインを用いることができますので、設定していきます。
Settings -> Pages -> New Domain へアクセスし、設定したい自身のドメインを入力します。
Automatic certificate management using にもチェックをつけましょう。 Let's Encrypt を用いて自動的にSSL証明書管理² もしてくれます。

ドメインを追加すると、本当にそのドメインの所有者であるか確認するため、認証する必要があります。

まず、独自ドメインを username.gitlab.io に紐付けるため、CNAMEを設定します。
今回は www を割り当てています。
(画像はGoogle Domainsの設定画面)

認証

次に、GitLab Pages設定画面のVerification Statusで認証を行います。
同じようにカスタムリソースレコードに、TXTレコードを追加し、データ欄に認証コードを設定します。

設定を行ったら、GitLab Pagesの設定ページの認証をリトライしてみましょう

このように、 Veryfied となれば認証OKです。

確認

ここまで設定終わったら、自分のドメインにアクセスしてみましょう。
DNS設定が浸透するまで少し時間が掛かる場合がありますが、問題なければHugoのコンテンツが表示されるはずです。
また、私が試したときは証明書が *.gitlab.io のものが落ちてきて証明書エラーになりました。
こちらも1時間ほど経ってから再度アクセスしたところ、正しく独自ドメインの証明書が落ちてくるようになってました。

1. 【2018年版】Hugoとgithub pagesでブログ作る方法【Circle CIも回します】 ↩

2. 本当はもっと手順があるのかなと思って記事を書き始めたのだけれど、このチェックボックスにチェックを入れるだけだったなんて… ↩