🌬️ Hugo+tailwindcss

2023-09-16 /Development #Hugo

このブログでは Hugo を使用しておりまして、結構長い間アップデートをサボっていたのですがいつの間にかESBuildやPostCSSが使えるようになっていたそうなので、アップデートして不要になったwebpackを削除しておきました。

記事の追加・編集の時もcssなどを追記したい時も同じコマンドで開始できるので非常に快適になりました。

あと、ついでなので Bootstrap を削除して tailwindcss を入れたのですが、こちらも非常に良い感じで、比較用にブログトップのindex.htmlのファイルサイズを比べてみたら220KBから67KBに減っていました。Bootstrap、結構重かったのか…ユーティリティ多いもんな…

導入に関しては Hugoからtypescriptとtailwindを使うの記事を参考にさせていたただきました。私のサイトでは以前 HugoのLighthouseスコアを改善の時にcssとjsをhtmlに直接埋め込む処理を入れるようにしていたので、そこだけちょこっと変更しました。

コピーしました
{{ with resources.Get "css/main.scss" }}
  {{ $options := dict "inlineImports" true }}
  {{ $style := resources.Get . | resources.ToCSS | resources.PostCSS $options }}
  {{ if hugo.IsProduction }}
    {{ $style = $style | minify | fingerprint | resources.PostProcess }}
  {{ end }}
  <style>
    {{ $style.Content | safeCSS }}
  </style>
{{ end }}

コピーしました
{{ with resources.Get "js/main.js" }}
  {{ $js := resources.Get . | js.Build }}
  <script>
    {{ $js.Content | safeJS }}
  </script>
{{ end }}

みたいな感じです。何かで使うかもしれないのでメモしておこう。

Comment