NetlifyではじめるHugo

2019-01-27T22:03:23+0900

2019-03-04 追記

後にドメインを blog.tomoya.dev へ移行しました。

はてなダイアリー終了のお知らせから、ブログをどうしようか悩んでいたのですが、はてなダイアリーが終了するのであれば、はてなブログもいつかは終了するかもしれないということで、自分でブログを運用することにしました。

自分で運用する場合は、サーバーやソフトウェア（CMS）などのメンテナンスが面倒なのですが、いわゆる静的 サイトジェネレーターのHugoと静的サイトホスティングサービスのNetlifyを組み合わせれば、基本的に無料でhttpsにも対応したサイトが運用できるのでは？ということに気付き、自分で運用しても良いかなと思った次第です。

Hugoを選択した理由 #

HugoはGoで書かれた静的サイトジェネレーターです。同様のもとしてはJekyllが老舗で、最近ではGatsbyなどが有名です。

そんな中、今回なぜHugoを選択したのかと言うと、HugoとEmacs（org-mode）の相性が良さそうだからというのが一番の理由です。去年末のEmacs忘年会を機会にEmacsに本格復帰することにしたので、その肩慣らしとしてブログもEmacsと相性の良いものにしました。

テーマは、とりあえずざっとHugo Themesを見て、スマホでも見やすいEvenにしました。そのうち自分でテーマを書くかもしれまねせんが、当面はこれでいきます。

Netlifyを選択した理由 #

静的サイトのホスティングであれば、別に自前でAWSで構築しても良かったのですが、NetlifyはGitHubにプッシュすれば自動でデプロイまでしてくれるということで、無料ということもあり試してみようと思いました。

同様の無料静的サイトホスティングのGitHub Pagesとの違いについては、GitHub PagesとNetlifyの比較を用意しているので確認してみると良いでしょう。

Hugoによるサイト構築メモ #

このブログのURLがhttps://blog.tomoya.appなので、GitHubでblog.tomoya.appというリポジトリを作成しました。そして、Quick Start | Hugoを参考にしながら次のようなコマンドでサイトを構築しました。

$ brew install hugo
$ hugo new site blog.tomoya.app
$ cd ./blog.tomoya.app
$ git init
$ git add .
$ git commit -m 'Initial commit'
$ git submodule add https://github.com/olOwOlo/hugo-theme-even themes/even
$ git commit -m 'Add even theme'
$ cp ./themes/even/exampleSite/config.toml ./config.toml
# config.tomlを編集
$ git add config.toml
$ git commit -m 'Update config'
$ hugo new post/hello-world.md
# hello-world.mdを編集
$ hugo server -D
# サーバーを終了
$ git add post/hello-world.md
$ git commit -m 'Add hello-world.md'
$ git remote add origin git@github.com:tomoya/blog.tomoya.app.git
$ git push -u origin master

これでリポジトリの準備が完了したので、次はNetlifyでサーバーを準備します。

Netlifyによるデプロイと独自ドメイン対応 #

Netlifyによるデプロイは驚くくらい簡単でした。Netlifyのアカウントを作成してログインした後、「New site from git」でリポジトリを選択していくと、自動的に初回のビルドが始まりました。

（前略）
1:42:56 PM: Installing Hugo 0.42
1:42:56 PM: Started restoring cached go cache
1:42:56 PM: Finished restoring cached go cache
1:42:56 PM: unset GOOS;
1:42:56 PM: unset GOARCH;
1:42:56 PM: export GOROOT='/opt/buildhome/.gimme/versions/go1.10.linux.amd64';
1:42:56 PM: export PATH="/opt/buildhome/.gimme/versions/go1.10.linux.amd64/bin:${PATH}";
1:42:56 PM: go version >&2;
1:42:56 PM: export GIMME_ENV='/opt/buildhome/.gimme/env/go1.10.linux.amd64.env';
1:42:57 PM: go version go1.10 linux/amd64
1:42:57 PM: Installing missing commands
1:42:57 PM: Verify run directory
1:42:57 PM: Executing user command: hugo
1:42:57 PM: ERROR 2019/01/25 04:42:57 Current theme does not support Hugo version 0.42. Minimum version required is 0.50
1:42:57 PM: Building sites …
1:42:57 PM:
Total in 81 ms
1:42:57 PM: Error: Error building site: logged 1 error(s)
（後略）

すると、Netlifyが使用するHugoのバージョン（0.42）がテーマが要求するバージョンよりも古かったようで、上記のようなエラーでデプロイが失敗したので、「Settings > Build & deploy > Continuous Deployment > Build environment variables」にあるHUGO_VERSIONを0.53に変更したところ、問題なくビルドが成功してデプロイされました。

次にドメインですが、まず 「Settings > Domain management > Domains > Custom domains」から「Add domain alias」ボタンを押して blog.tomoya.app を追加します。

そして、tomoya.appはGoogle Domainsで取得しているので、そちらで「Check DNS configuration」をクリックして表示される以下のDNSの設定を「DNS > Custom resource records」から追加しました。

blog CNAME vigorous-cori-3167a4.netlify.com.

すると、数分でURLへアクセスできるようになり、20分くらい待てばSSL証明書も自動的に取得されHTTPSでアクセスできるようになりました。

最後に、static/_redirects ファイルを以下の内容で作成して、コミット&プッシュすれば、netlify.comドメインによるアクセスをリダイレクトしてくれるようになります。

# Redirect default Netlify subdomain to primary domain
https://vigorous-cori-3167a4.netlify.com/* https://blog.tomoya.app/:splat 301!

リダイレクトについてはRedirect & Rewrite Rulesに詳しく書かれています。

まとめ #

こんな感じで、無料でサクっとHTTPSなブログを構築できて、いい時代になったなぁとしみじみ思いました。Emacsについてはまた今度色々と書きますので、今後ともこちらのブログを宜しくお願いします。