ThemeのCSSを上書きするカスタムCSSの置き場所

Hugo で Thema とは別の個人設定用の CSS ファイルをどこに置くのかわからなかったので調べました。

Themaはhugo-tranquilpeak-themeを使っているのですが、一部分だけ変更するときにthemesディレクトリなりにあるファイルを直接編集してしまうとテーマのアップデートのたびに全て初期化されてしまうしコンフリクトが起こって面倒なことになります。

てっきりHugoで共通のカスタムCSSの保存場所が決まっていると思ったのですが、各テーマの製作者が個別にカスタムCSSの指定方法を設定しているようです。ですが利用者が多いテーマは大体config.toml(yaml)にパスを指定することでカスタムCSSが使えるようになるようです。hugo-tranquilpeak-themeの場合は以下のようになります。

  # Custom CSS. Put here your custom CSS files. They are loaded after the theme CSS;
  # they have to be referred from static root. Example
  [[params.customCSS]]
    href = "css/custom.css"

h1{color: red;}

ちゃんと読み込み出来てるか確認のためにパッと見てわかる部分を変更してみましょう。

参考

Hugo: How to Properly Add Custom CSS • Matt Mayes from Chicago, IL