複数の Hugo サイトで同じテーマディレクトリを参照する (themesDir)

2017-10-14

ローカル PC 上でいくつもの Hugo サイトを作成していて、さらに共通したテーマも同時に作成している場合は、同一のテーマディレクトリを参照して開発できると便利です。

複数の Hugo プロジェクトから、同一のテーマを参照するには、下記のような方法があります。

GitHub などにテーマ用のリポジトリを作成して、そのリポジトリを複数の Hugo プロジェクトに clone する。
各 Hugo プロジェクトの themes ディレクトリを、共通のテーマディレクトリへのシンボリックリンクへ置き換える。
設定ファイル (config.toml) で、共通のテーマディレクトリを参照するように設定する。

1 番目の方法は王道ですが、Git を介して各サイトのテーマを同一に保つのは、開発段階ではちょっと手間がかかって面倒かもしれません。そんなときオススメなのは 2 番目と 3 番目の方法です。

シンボリックリンクで共通のテーマディレクトリを参照する

Linux や macOS などのようにシンボリックリンクを作成できる OS では、共通のテーマディレクトリをシンボリックリンクで参照してしまうのがお手軽です。例えば、下記のように共通で使用するテーマディレクトリ (hugo_themes) と、参照元となる３つの Hugo プロジェクト (site1、site2、site3) があるとします。

- hugo_themes/    （共通のテーマディレクトリ）
   +-- mytheme/
       +-- archetypes/
       +-- layouts/
       +-- static/
       +-- ...
- site1/  （Hugo サイト 1）
- site2/  （Hugo サイト 2）
- site3/  （Hugo サイト 3）

各 Hugo プロジェクト内の themes ディレクトリを、hugo_themes へのシンボリックリンクに置き換えてしまえば、すべてのサイトから同じテーマディレクトリを参照できます。

$ cd site1
$ rmdir themes
$ ln -s ../hugo_themes themes

使用するテーマ名の設定はあいかわらず必要なので、各 Hugo プロジェクトの設定ファイル (config.toml) でテーマ名を設定しておくことを忘れないでください。

site1/config.toml

theme = "mythemes"

設定ファイルで共通のテーマディレクトリを設定する

Hugo の設定ファイル (config.toml) で、共通のテーマディレクトリを設定する方法もあります。テーマディレクトリの設定は themesDir という変数で設定するのですが、このディレクトリパスには、その Hugo プロジェクトよりも上位のディレクトリのパスを設定することができます。

config.toml

themesDir = "../hugo_themes"
theme = "mythemes"

例えば、各 Hugo プロジェクトの設定ファイルで、上記のように設定しておくと、上位のディレクトリに置いた共通のテーマディレクトリ (hugo_themes/mythemes/) を使用することができます。

設定ファイルを使わずに、hugo コマンドの --themesDir オプションでテーマディレクトリを指定することもできます。

$ hugo server --themesDir ~/gitwork/hugo_themes

設定ファイルの themesDir 変数と、コマンドライン引数の --themesDir の両方が指定された場合は、コマンドライン引数の方が優先されます。

2017-10-14