Hugoのthemeで使用するJavascriptのパッケージは、theme/THEME_NAME/package.json で管理したい。
解決策
Hugoのthemeで使用するJavascriptのパッケージを、themeディレクトリ内のpackage.json(例: site/theme/THEME_NAME/package.json)で管理した場合、
js.Buildでエラーが発生する。
これは、js.Buildがサイトのpackage.json(例: site/package.json)を参照するためのようだ。
Hugoでは、この対策としてhugo mod npm packが用意されている。
仕組み
hugo mod npm packを実行すると以下を行う。
- プロジェクト(サイトやテーマ)に
package.hugo.jsonが存在しなければ、package.jsonをコピーしてpackage.hugo.jsonを作成 - プロジェクト配下のディレクトリにある
package.hugo.jsonとプロジェクト自身のpackage.hugo.jsonに定義されたパッケージの依存関係情報を収集 - プロジェクトの
package.jsonのパッケージの依存関係情報を、2.で取得したパッケージ依存関係情報で上書き
これにより、プロジェクトに関連するパッケージの依存関係情報をプロジェクトのpackage.jsonに集約できる。
あとは、以下を実行すれば関係する全てのパッケージをインストールでき、プロジェクトをエラーなく利用できるようになる。
npm install
使い方
1つテーマ(themes/kantas)と関連するサイトを例に、使い方を説明する。
-
テーマのディレクトリに移動し、
package.jsonをコピーしてpackage.hugo.jsonを作成cd themes/kantas cp package.json package.hugo.json -
サイトのルートディレクトリに戻り、
hugo mod npm packを実行し、package.hugo.jsonを作成し、package.jsonを更新するcd ../.. hugo mod npm pack
テーマ側のパッケージを変更する場合
例えばテーマに新しいパッケージを追加する場合は以下を実行する。
-
テーマのディレクトリに移動し、新たなパッケージをインストール
cd themes/kantas npm install xxx -
更新された
package.jsonをコピーしてpackage.hugo.jsonを上書きする 1cp package.json package.hugo.json -
サイトのルートディレクトリに戻り、
hugo mod npm packを実行し、サイトのpackage.jsonを更新する。cd ../.. hugo mod npm pack -
サイトに新たなパッケージをインストールする。
npm install
感想
複雑だ。
参考
-
テーマの
package.hugo.jsonはpackage.jsonのシンボリックリンクにするのが良さそうだが、Hugoのファイルシステムはシンボリックリンクに未対応 ↩︎