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