前回、 前々回とGitLab Pagesでのサイト作成について記載しましたが、 SSL証明書の設定で躓きました。色々調べているうちに、Netlifyというサービスを 使っても、静的サイトジェネレータ+カスタムドメイン+SSL証明書が実現できるということが分かりましたので、 その方法を簡単に説明したいと思います。

概要

今回も、サイトのソースはGitLabで管理します。NetlifyはCI, 証明書, ページのホスティング, の役割を担当してもらいます。

サイトのビルド時間もGitLab Pagesで回すより高速なように思われます。 (2017/2/1追記：サイトのビルド時間は明らかにGitLabよりも高速です。GitLabでは日本時間の夜の時間だと数時間かかってしまうこともありますが、 同じ時間帯でもNetlifyだと数十秒で完了しています。) ただ、生成物の最大サイズについては記述が見当たりませんでした。GitLab Pagesは1GBという制限がありましたが、 Netlifyではどうなのでしょう? もっと制限が緩いのか、きついのか。

Netlifyにログインしたら、GitLabのボタンを押して、GitLabとの連携を行います (アカウント作成時にGitLabのアカウントで行った場合は、最初から連携しているはずです)。 それから、Netlify側でホストしたいプロジェクトを選択します。

NetlifyでのCI

NetifyでCIをする際は、すでにHugoはインストール済みです。公式ドキュメントの Continuous Deploymentに記載があります。 そのため、プロジェクトの設定で、Build Cmd: hugo, Public folder: public と設定するだけで、 指定ブランチにpushすると、Hugoにてビルドされ、publicディレクトリがサイトとして設定されます。

GitLab Pages側でのビルドが不要であれば、.gitlab-ci.ymlは削除してしまいましょう。

ドメインの設定

プロジェクトのページで、Domain:欄に、カスタムドメイン名を入力します。apexドメインは非推奨なので、 www.などのサブドメインを付けたほうが良いようです。そしてDNSの設定で、カスタムドメイン名にCNAMEレコードとして (Name:欄に記載されている内容).netlify.com を設定します。

HTTPSの設定

これもNetlifyの秀逸なところです。プロジェクト > HTTPS のタブからボタンを押すだけで、 自動的にLet’s Encryptから証明書を取得し、設定してくれます。しかも、証明書の自動更新もしてくれるようです。 もちろん、DNSの設定は先に行っておく必要があります。

参考ドキュメント：

• Netlify builds, deploys, and hosts your front end.
• 高機能ホスティングサービスNetlifyについて調べて使ってみた