Published on

Hugoのテーマをいじる

Authors
  • avatar
    Name
    tuxedocat
    Twitter

Hugo で個人ブログを構築した.広告なしでノイズレスで運用したかったので.

もともとは "Hemingway" というテーマを使っていた. そのあと,その Fork である"Hemingway2"へ乗り換えていた. でも結局いろいろいじる必要が出てきたので,自分の Fork1を作ってしまった.

結果,いろいろな細かい不満が解消されたと同時に,ウェブっぽい話をちょっとは知ることができた. Hugo 自体のコードは全く見てないけど,その仕組みの大部分である Go Template はなんとなくわかってきた. 本筋ではないけど,設定ファイル記述言語としての Toml がかなり簡潔でよさそうなことも実感できてよかった.

Hugo テーマの差分はだいたい以下のもの:

  • Tags/Categories などを生成するための terms.html の追加
    • Blackburn というテーマを参考にした
  • Mathjax のロード部の修正と config.toml での有効・無効切り替え
  • スタイルの変更(下記)

Web っぽいことといえば,Sass で書いたスタイルシートを CSS にビルドする仕組みを(Hucore にあったものだけど)試してみた.Sass が 2017 年的かどうかはわからないけど,元々のテーマがかなり簡潔で,JS 側も含めたそういうフレームワークに左右されない感じだったのがよかった.

もうちょっと楽をしたいので,yarn を使って(2017 年的かどうかはわからない) gulpgulp-sass を導入する.

  • yarn config set prefix /usr/local
  • yarn global add gulp gulp-sass

もともとのテーマに gulpfile.js が含まれていて,そこにタスクが定義されているので拝借する.

  • yarn gulp # デフォルトのタスク.Sassをビルドしてstatic/ 内に配置する
  • yarn gulp watch # Sassの変更を監視して,差分があれば自動的に更新する.

という感じ.日本語フォントの適用や,ちょっとした外見の変更だけで,特に大きな差分はない.

Footnotes

  1. https://github.com/tuxedocat/tuxedoneko