HugoとNetlifyで静的サイト構築するメモ(themeはsubmoduleを利用)

## TL;DR;
* HugoとNetlifyで静的サイトを構築する
* Hugoのthemeにはgit submodule を利用する

焼き回しされているネタですので、自分用メモです。
ポイントは、git submoduleでテーマを追加している場合に、netlify.tomlにビルド時のコマンドを修正するところです。

## Hugoの対応
### インストールと初期化
```zsh
brew install hugo
hugo new site hoge
```

### submodule でテーマ適用
まずはhugoで作ったサイトをgithubにプッシュ

```zsh

git init
git remote add origin https://github.com/user/remote.git
git add .
git commit -m ’init commit’
git push -u origin master
```

git submodule でテーマを追加します。
今回はDimentionというテーマを採用しました。
[GitHub - dspechnikov/dimension-hugo: Dimension template adapted for Hugo static site generator. Mirror of https://gitlab.com/dspechnikov/dimension-hugo](https://github.com/dspechnikov/dimension-hugo)

このテーマのリポジトリに推奨されている方法としてsubmoduleでの管理が記載されています。

```zsh

git submodule add https://gitlab.com/dspechnikov/dimension-hugo themes/dimension
git submodule init
git submodule update
git submodule update —remote themes/dimension
```


### config.tomlの編集とビルド
hugoコマンドでできたconfig.tomlファイルを修正し、テーマを追加します。

```
baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "dimension"
```


ビルドしてローカルでの動作確認。

```zsh
hugo -D
hugo server
```

以下のようなログが表示されて

```
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
```

ブラウザにアクセスして確認します。

<img width="1332" alt="スクリーンショット 2020-01-04 22.53.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434453/5890be11-3887-a308-becd-139e22a69fed.png">


適用されていることが確認できました。

### 静的サイトをカスタマイズする
適用したテーマのサイトに使い方が書いてある。コンテンツを作成します。いったんはサンプルで構築しました。
[documentation.md · master · Dmitry Pechnikov / Dimension for Hugo · GitLab](https://gitlab.com/dspechnikov/dimension-hugo/blob/master/documentation.md)

### *netlify.toml* を登録する
Hugoのオフィシャルサイトにnetlify.tomlのことが書かれているのでコピペして、自分のリポジトリに追加しましょう。
[Host on Netlify | Hugo](https://gohugo.io/hosting-and-deployment/hosting-on-netlify/)

ポイントとしてテーマをgit submoduleで追加している場合、*--theme=dimension*が重要です。
これを追加しておきましょう。

```
[build]
publish = "public"
command = "hugo --theme=dimension --buildDrafts --gc --minify"
```

Netlifyの管理画面にて、ビルド時のコマンドを指定できるのですが、
netlify.tomlの方が優先されるらしく、管理画面での指定は不要でした。

## Netlifyの対応
HugoのサイトにNetlifyでのデプロイの手順が丁寧に書いてあります。
[Host on Netlify | Hugo](https://gohugo.io/hosting-and-deployment/hosting-on-netlify/)

アカウント作って、Create a new siteを選択して

<img width="1288" alt="スクリーンショット 2020-01-05 3.07.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434453/462e5f27-17b4-cf29-610f-24083d487ad1.png">


NetlifyにGithubへのアクセス権を設定して、

<img width="637" alt="スクリーンショット 2020-01-05 3.07.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434453/f7bffe5a-e0f7-09a9-6bdd-ffd07d5ea10b.png">


リポジトリを選択して、
<img width="625" alt="スクリーンショット 2020-01-05 3.07.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434453/6a7767d9-2e8e-08d7-1a6c-a22cf08a39da.png">

インストールを押下するとデプロイされます。

<img width="1118" alt="スクリーンショット 2020-01-05 22.50.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434453/1c1a5579-55cb-a189-9be0-5192184aa712.png">


カスタムドメインやHTTPSの設定をして完了です。

## 参考
[Netlify \+ Hugo でのCD環境構築時ハマりどころメモ // yusuke\.iwaseのノート](https://tomtomtom.ga/posts/20190528_2/)

[blog/netlify\.toml at master · sin\-tanaka/blog](https://github.com/sin-tanaka/blog/blob/master/netlify.toml)