Hugoで作成した静的サイトをNetlifyでデプロイするときの設定

あらすじ

HugoのサイトをNetlifyにデプロイするのは（Nuxt.jsと比べると）若干面倒くさい

Nuxt.jsのサイトをNetlifyにデプロイする時はWebページ上からBuild commandとPublish directoryを設定するだけで大体なんとかなったが、Hugoではデプロイ前の準備が必要だった🙄

というのも、

• Gitの除外ファイルを自分で準備
• Netlifyで使用するHugoのバージョンを環境変数で指定

のようなことを行う必要がある（やらなければやらないで動きそうだが、氷砂糖はその辺りにこだわってしまう性格をしている）。

Hugoのサイトをデプロイするたびに調べながらやっているので、直近の設定を記事に残しておくことにした。

Gitの設定

.gitignoreで除外するファイルを指定する。

/node_modules/
/public/
/resources/
/assets/bundle.js
/assets/css/main.css
*.log

/public/と/resources/

hugoコマンド実行時（サイトのビルド）に生成されるため除外。

/assets/bundle.jsと/assets/css/main.css

サイトのビルド前にWebpackでコンパイルするようにしたので除外。

/node_modules/

サイズが大きいので除外（サーバでインストールしてもらう）。

*.log

ログファイルのため除外。

サイトの設定（Hugo）

config.tomlでサイトの設定を行う。

baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
disableKinds = ["taxonomy", "term", "RSS", "sitemap", "robotsTXT", "404"]

baseURL

Netlifyだと一回デプロイしないとURLが分からないっぽいのでひとまず初期値のままにしておく🤔

disableKinds

disableKindsを設定していないと「カテゴリを使用していないのにカテゴリ一覧ページを生成する」ようなことが起こるので、気になるようなら追加する。

Netlifyの設定

netlify.tomlでNetlifyの設定を指定する。

Hugoの公式ドキュメントに長めのサンプルが置いてあるが、ブランチやプルリクでビルド設定を切り替えたりしないのであればbuildとbuild.environmentだけ抑えておけば問題なさそう🤔

[build]
  publish = "public"
  command = "yarn build"

[build.environment]
  HUGO_VERSION = "0.77.0"
  HUGO_ENV = "production"

build

publish

公開を行うディレクトリ。Hugoのデフォルトがpublicなのでそれを指定した。

command

ビルドコマンド。Hugoのビルド前にyarn webpackを実行したかったので、package.jsonにビルド用のコマンドを追加してそれを叩いている（おそらくnetlify.tomlでcommand = "webpack && hugo --gc --minify"と書いても動きそう）。

{
  "scripts": {
    "build": "webpack && hugo --gc --minify --cleanDestinationDir"
  }
}

公式ドキュメントのサンプルには--cleanDestinationDirオプションが無かったが、後から消したファイルが残り続けそうだったのでコマンドに追加した。

build.environment

環境変数を設定する。

HUGO_VERSION

Hugoのバージョンを指定する（現在のバージョンはhugo versionコマンドで確認できる）。

HUGO_ENV

Hugoの環境を指定する。

テーマで環境による分岐等を行わない限りはそこまで関係ない？🤔

参考

• hugo | Hugo
• Configure Hugo | Hugo
• Host on Netlify | Hugo
• Netlify.toml で Netlify の Deploy 設定を管理する | 株式会社 chatbox の Web制作レポート chatbox.note