Hugoのテーマをいろいろいじる

思ったよりめんどくさいテーマいじり

新しいブログを立ち上げて、サイトも公開しているんですが、そこにたどり着くまでにいろいろとやっておりました。
いろいろとメモを取りながらやろうと思っていたのに、メモを取ることを忘れてサクサクと進めてしまったので、思い出しながらちまちまと書いていこうかと思います。ほぼ自分のためのメモでございます。

tranquilpeakをいじる

Hugoのテーマをいじる場合には、config.tomlに上書き用のCSSを指定してやるのが一般的なようです。

[[params.customCSS]]
  href = "css/my.css"

まあすべてのテーマがそうなのかわかりませんが、上記のような記述があるのでそれを有効にしてファイルを置いてあげるいいみたいですね。
ただここでドはまりしました。
フォントを変えたいんだけどうまくいかない、細かいところは設定してもどうもうまくいかない。
ただできればテーマのファイルを変更したくなかったのですが……

どうも使っている"tranquilpeak"というテーマは、SCSSを使っているらしくそう簡単には変更できないところもあるようでして。
その辺、ユーザマニュアル読んでもさっぱりなんですよね。
hugo-tranquilpeak-theme/user.md at master · kakawait/hugo-tranquilpeak-theme

いろいろ調べていくと、結局のところテーマ内のファイルを弄るしかなさそうです。
そして私が読むべきものはデベロッパー向けのマニュアルだったのです。 hugo-tranquilpeak-theme/developer.md at master · kakawait/hugo-tranquilpeak-theme

そして読み進めたところ、どうやらbuildが必要だぞということでした。
テーマ内のファイルを更新したあとでbuildが必要。なるほどなるほど。
更新したくないなと思ってたのですが、gitで管理してるのでどこが変わったのかってのは履歴で確認できるのでどうにかなるなと気が付きました。

ちなみにコマンドはこんな感じでございました。

まずはnpmのインストールが必要。

$ sudo apt install npm

あとは以下のコマンドを実行すると、waiting状態になります。
この状態でテーマ内のSCSSファイル等々を修正すると、自動的にbuildが始まります。 プレビューで確認しながら、テーマを修正していくって感じになりますね。

npm run start

最後にテーマが確定したら、ファイルの出力と言うか最終ビルドですかね。

npm run prod

これでテーマのカスタマイズはできることがわかりました。
あとは細かな動作を確認しつつって感じですが、いったん公開したのが以下のサイトでございます。 たくちくゲームズ