Hugo の Quick Start と Host on Netlify をやってみる

# 概要

Hugo のドキュメントの [Quick Start](https://gohugo.io/getting-started/quick-start/) を参考にサイトを作成して、[Host on Netlify](https://gohugo.io/hosting-and-deployment/hosting-on-netlify/) に従ってデプロイしてみたので、ハマりどころも含めてメモしておく。
（環境は macOS）

# Hugo でサイトの作成

[Quick Start | Hugo](https://gohugo.io/getting-started/quick-start/) に従ってサイトを作成する。

## サイトの作成

```bash
$ hugo new site hugo_quickstart
$ cd hugo_quickstart
$ git init
$ git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
$ echo 'theme = "ananke"' >> config.toml
$ hugo new posts/my-first-post.md
/Users/username/workspace/hugo_test/quickstart/content/posts/my-first-post.md created
```

生成された `content/posts/my-first-post.md` を編集：

```md
---
title: "My First Post"
date: 2018-05-03T22:19:20+09:00
---

# Post title

This is my first post.
```

`draft: true` となっていたところは削除した。これでこの My First Post は publish され、表示されるようになる。詳細は[ドキュメント](https://gohugo.io/getting-started/usage/#draft-future-and-expired-content)を参照。

## ローカルで確認

ここで `$ hugo server` でサーバを起動すれば、 `http://localhost:1313/` からサイトを確認できる（`draft: true` のページも表示したい場合は、`-D` オプションを付ければいいみたい）。

![スクリーンショット 2018-05-04 11.56.47.png](https://qiita-image-store.s3.amazonaws.com/0/155820/ccef7a86-256f-d717-9a79-9162d7432df5.png)

## リモートリポジトリに push

ここまでできたらリモートリポジトリに push しておく。今回は GitLab を使用。
GitLab で空のリポジトリ（Project name: `hugo_quickstart`）を作成しておいて次を実行：

```bash
$ git remote add origin git@gitlab.com:silmisilon/hugo_quickstart.git
$ git add -A
$ git commit -m "Create hugo site"
$ git push -u origin master
```

# Netlify にデプロイ

[Host on Netlify](https://gohugo.io/hosting-and-deployment/hosting-on-netlify/) に従ってデプロイする。

## Netlify に sign up

[Netlify: All-in-one platform for automating modern web projects.](https://www.netlify.com/)

<img width="1431" alt="スクリーンショット 2018-05-03 22.58.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/155820/36ccb41f-cb25-7f3b-8ef8-40de81693a12.png">

GitLab アカウントで sign up した。

<img width="1251" alt="スクリーンショット 2018-05-03 22.53.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/155820/3902f1ed-d9af-ce06-d8f5-aac90b38e207.png">

`Authorize` をクリック。
（ここでなぜか Authentication error になったが、一度 `Deny` してから再度 `Authorize` したら成功した :thinking: ）

## あとは...

あとは、[公式ドキュメント](https://gohugo.io/hosting-and-deployment/hosting-on-netlify/#create-a-new-site-with-continuous-deployment)のスクショを見ながらポチポチやっていけばデプロイできるはず（雑）。
デプロイの設定はこんな感じ：

<img width="1258" alt="スクリーンショット 2018-05-03 23.37.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/155820/0726430b-e3c1-7698-378e-4259d8abc98d.png">

ただハマりどころがあったので以下にメモしておく。

# ハマりどころ

## Netlify で Hugo のバージョンを指定しないとビルドでコケる

[Continuous Deployment | Netlify](https://www.netlify.com/docs/continuous-deployment/?_ga=2.173141347.1985844188.1525359192-2094223269.1525359192#common-configuration-directives)

>For Hugo hosting, the build command hugo will build and deploy with the version 0.17 of Hugo. For versions 0.13, 0.14, 0.15, 0.16, 0.17, 0.18 and 0.19, you can specify a specific Hugo release like this: hugo_0.15. For version 0.20 and above, use the regular hugo command and create a Build Environment Variable called HUGO_VERSION and set it to the version of your choice.

ドキュメントにもあるように Hugo のバージョンを指定する。
指定しないとビルド時にエラーしてデプロイできない...。
今回は Hugo のバージョン `0.40.2` を使用しているので `Settings` で次のように設定する。

<img width="1250" alt="スクリーンショット 2018-05-04 11.23.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/155820/d6071444-0295-1da3-0b38-c6e1625b11e0.png">


## baseURL を設定しないとデプロイ後に CSS が適用されない

デプロイできたが、テーマ（`ananke`）の CSS が適用されない...。

![スクリーンショット 2018-05-04 17.39.54.png](https://qiita-image-store.s3.amazonaws.com/0/155820/97cf953a-1de5-35ef-d278-95300b560713.png)

エラーを見て HTTPS なのに HTTP で css を取得しようとしてエラーしている？などと思いつつ `config.toml` を見たら、`baseURL` がデフォルトの `http://example.org/` のままだった。この `baseURL` をホスティング先の URL にした。
（参考：[NetlifyでHugoのビルドを自動化する - Qiita](https://qiita.com/satzz/items/2c5dc8692e7cf63445d0)）

`config.toml` はこんな感じ：

```
baseURL = "https://condescending-blackwell-5a8100.netlify.com/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "ananke"
```

これで再度デプロイしたところ CSS が適用された：

![スクリーンショット 2018-05-05 23.12.32.png](https://qiita-image-store.s3.amazonaws.com/0/155820/4d5470e4-9b9b-89bc-7b74-048e801abeb7.png)