Hugoとtailwindcssをアップデートした

こんにちは、たかしです。
このブログは割と昔に作ったので Hugo と tailwind のバージョンが低いままでした。

• Hugo v0.89
• tailwindcss 2.2.19

昔のバージョンでもちゃんと動いてくれていたのですが、Github actions で「Node のバージョンが古いぞ！」と警告が出ていました。
また、Markdown から生成した HTML にスタイルを当てるためにtailwindcss/typographyを使用しているのですが、昔のバージョンだと細かいスタイルの調整ができない問題がありました。
（具体的には見出し間の margin を小さくしたいのにできませんでした）
tailwindcss の purge 指定も昔のバージョンだとうまく動かなかったので、hugo-stats.jsonという使用しているクラスが出力されたファイルを使用して postcss で purge していました。
現行のバージョンだとそれも必要なくなるため、アップデートするとたくさん良いことがありそうだと判断しました。 備忘録代わりに作業を記録しておきます。

Hugo のアップデート

僕は linuxbrew でパッケージ管理をしているので、そちらでアップデートします。

brew update

brew upgrade hugo

簡単ですね。

tailwindcss のアップデート

僕の場合は tailwindcss 関連のもの以外は特にインストールしていなかったので、npm-check-updatesでまとめてやってしまいます。

# アップデート可能なパッケージの確認
npx -p npm-check-updates  -c "ncu"

# package.jsonの更新
npx -p npm-check-updates  -c "ncu -u"

# packageのインストール
npm install

終わりに

あとはconfig.tomlを編集して stats.json を出力しないようにしたり、tailwindcss の設定ファイルを更新したりしました。
github actions もバージョンの記載を上げて、動作確認して完了です。
思ってたよりもサクッと終わってよかったです。

今後は Hugo の標準機能を使った OGP の自動生成や、devcontainer で環境を作ったりしたいです。
読んで下さってありがとうございました。 それでは、また。