Nix Advent Calendar 2021の12日目の記事になります。
概要
最近、Nixにはまっているのでブログ環境にもその思想を導入していきたいと思います。 今回のアドカレ駆動開発によって、環境の構築からビルドまでNixの恩恵を受けられるようになりました。
僕がNixを使う理由については Nixを使うと何が嬉しいのか という4日目の記事に書かれているのでそちらを参照ください。
コード
- ブログ本体

- Nixと連携するdirenvなどが入った環境

ざっくり解説
今回SSGにはHugoを利用します。
大まかな構成はDirectory Structureに従います。
hugo
本体やtheme
などをNixで管理します。
.
├── archetypes
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes
環境の構築とビルドの様子
実際にブログの環境を構築し、hugo serve
を実行したり、nix build
を実行している様子です。
Nixによるimpureな(直和的な?)環境では丹精込めて育てたvim
なども利用可能です。
(asciinema埋め込みもそのうちやりたい。)
詰まった箇所
Nixを利用することで強力な支援を得ることができますが、Nixを使う上で必要な工夫がいくつかあったので共有します。
HugoのJavaScript BuildingでWriteが発生する
hugo内でjs.Build
を利用するとassets
へjsconfig.json
の書き込み要求が発生します。
assets
はNixで管理されたテーマ配下、つまりimmutableな領域ですのでビルドが失敗してしまいます。
解決方法としてはv0.78.0
で追加されたnoJSConfigInAssets
を利用します。(configration)
Turn off writing a jsconfig.json into your /assets folder with mapping of imports from running js.Build. This file is intended to help with intellisense/navigation inside code editors such as VS Code. Note that if you do not use js.Build, no file will be written.
説明の通りhugoのconfigファイルで設定を有効にしますと書き込みが発生しなくなりビルドが通るようになります。
assetsに自分のファイルを置けない
多くのhugoテーマでassets
から画像を読み込む実装がなされていると思います。
<!-- ... 略 -->
{{ $avatar := resources.Get (.src) }}
通常はassets
にファイルを置くなどすることで対応可能ですが、
先に述べたようにNixで管理する以上assets
はimmutableなので、それはできません。
解決方法としてはhugoのmounts
を利用します。
mounts
は文字通りマウントを行うことができます。
(configuration)
module:
mounts:
- source: myAssets/img # assetを配置したパス
target: assets/img # assetが配置されてほしいパス
テーマを改変したい
現在テーマにはhugo-theme-stackを利用しています。

落ち着いたテーマで機能性にも優れているのでほぼそのまま利用しているのですが、 一点気になるところがありまして、デフォルトの設定だとフォントに中華フォントが指定されています。
改変が想定されたHugoテーマにはユーザが利用する用のファイルが用意されていることが多いです。 ユーザはそのファイルにCSSなどを書き込むことで設定を上書きできるようになっています。 しかしNixで管理された…(略)
解決方法としてはテーマのフォークなどもありますが、 小さな変更を行うだけなのでNixのpatch を利用してみます。
以下の中華フォントを利用しないユーザ設定patchを用意します。
diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss
index 61fa80f..0b31ff4 100644
--- a/assets/scss/custom.scss
+++ b/assets/scss/custom.scss
@@ -1 +1,5 @@
-/* Place your custom SCSS in HUGO_SITE_FOLDER/assets/scss/custom.scss */
\ No newline at end of file
+:root {
+ --sys-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Droid Sans", "Helvetica Neue";
+ --base-font-family: "Lato", var(--sys-font-family), sans-serif;
+ --code-font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+}
\ No newline at end of file
これを以下のようにして反映します。
# ... 略
themeDrv = stdenv.mkDerivation {
name = theme.name;
src = theme.src;
patches = [ ./custom.scss.patch ]; # パッチを反映
installPhase = ''
mkdir -p $out
cp -r ./* $out
'';
};
すると導出されたユーザ定義ファイルにパッチが反映され、中華フォントの指定が解除されました🎉
:root {
--sys-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Droid Sans", "Helvetica Neue";
--base-font-family: "Lato", var(--sys-font-family), sans-serif;
--code-font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}
最後に
Nixは相変わらず難しく日本語記事も少ないですが、 Rustがこんなにも流行るなら相性のいいNixも多少流行ってもいいなと思ってます。
Nixはいいぞー
今回初めてHugoを触りましたが、細かいオプションが素晴らしいですね。