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

ローカルPCで複数のHugoサイトを作成し、共通テーマも同時に作成する場合、同じテーマディレクトリを参照して開発できます。
Tags:

複数のHugoプロジェクトで同じテーマを参照させる方法は次のとおりである。

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

1つ目の方法が最も一般的だが、Gitで各サイトのテーマを同じように適用する場合、開発段階では少し面倒なことがある。そのような場合におすすめなのが2つ目と3つ目の方法である。

シンボリックリンクで共通テーマディレクトリを指定する

LinuxやmacOSなど、シンボリックリンクを作成できるOSでは、共通テーマディレクトリをシンボリックリンクで参照するのが簡単である。たとえば、次のように共通で使用するテーマディレクトリ(hugo_themes)と、それを参照する3つの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 = "mytheme"

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

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

themesDir = "../hugo_themes"
theme = "mytheme"

たとえば、各Hugoプロジェクトの設定ファイルで上記のように設定すると、上位ディレクトリにある共通テーマディレクトリ(hugo_themes/mytheme/)を使用できる。

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

$ hugo server --themesDir ~/gitwork/hugo_themes

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