🛠

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

2 min read 1

あらすじ

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

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

書いてて思ったが、*.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を設定していないと「カテゴリを使用していないのにカテゴリ一覧ページを生成する」ようなことが起こるので、気になるようなら追加する。

どのようなファイル群が生成されるかは、ローカルでもhugoコマンドで確認できる。

Netlifyの設定

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

Hugoの公式ドキュメントに長めのサンプルが置いてあるが、ブランチやプルリクでビルド設定を切り替えたりしないのであればbuildbuild.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.tomlcommand = "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 管理下に置かなくても良いです。

ʕ◔ϖ◔ʔ 👍

ログインするとコメントできます