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の環境を指定する。
テーマで環境による分岐等を行わない限りはそこまで関係ない?🤔
Discussion
最近の Hugo は esbuild を取り込んでおり webpack の仕事を
js.Build
で置き換えることができます。ビルド時間の大幅な短縮につながるので要件に合うようでしたらぜひ!あと、キャッシュとしての働きがありますので
resources
は ignore しなくてもかまいません。例として Hugo 公式ドキュメントでは他のファイルと同様に Git 管理下に置いています。ただ、よほど大きなプロジェクトでない限り、ビルド時間に大して影響はないので Git 管理下に置かなくても良いです。
ʕ◔ϖ◔ʔ 👍