kanta's spike

Hugoのテーマをモジュールとして利用したい。

これまでは、本サイトではGitHubで開発している自作のHugoテーマをコンポーネントとして利用してきた。¹

コンポーネント方式のテーマ導入に必要なことは以下になる。

HugoにはHugo Modulesという方式もあるため、そちらに移行したい。

解決策

移行方法

今回のモジュール方式でテーマ導入に必要なことは以下になる。

具体的な手順は以下となる。

手順1. テーマ側をHugoモジュール化

GitHubで管理している自作テーマをクローンする。

git clone https://github.com/kantas-spike/kantas-theme.git
cd kantas-theme

以下のコマンドを実行し、Hugoモジュール化する。

hogo mod initの後には、github.com/<your_user>/<your_project>を指定する必要がある。

hugo mod init github.com/kantas-spike/kantas-theme

go.modというファイルが追加されるので、コミットし、GitHubにプッシュする。

手順2. サイト側をHugoモジュール化

Hugoのモジュールを利用するためには、サイト側もモジュール化する必要がある。

以下のコマンドを実行し、モジュール化する。

サイトの場合、他のモジュールから利用されることはないため、 hogo mod initの後には、適当な名前を付ける。今回はmyblogを指定した。²

cd myblog
hugo mod init myblog

手順3. サイト側のhugo.tomlを変更

1. まず。hugo.tomlのtheme設定を削除する。

   # ...略...
   
   # 実際は以下の設定をコメントアウトではなく削除する
   # theme = 'kantas'
   
   # ...略...
   

2. hugo.tomlでテーマをインポート

   以下を追加し、テーマをモジュールとしてインポートする。

   # ...略...
   [module]
     [[module.imports]]
       path = 'github.com/kantas-spike/kantas-theme'
   # ...略...
   

3. hugo.tomlに必要なファイルをマウントする

   本ブログでは、tailwindcssを採用している。 tailwindcssの不要CSSクラスの削除用に、Hugoのhugo_stats.jsonを利用している。³

   hugo_stats.jsonを生成・監視用の設定として以下を追加している。

   # テーマで使用するtailwindcss用の設定
   [build]
     writeStats = true
     [[build.cachebusters]]
       source = "assets/watching/hugo_stats\\.json"
       target = "theme\\.css"
     [[build.cachebusters]]
       source = "assets/js/.*\\.js"
       target = "theme\\.css"
   

   この監視用の[[build.cachebusters]]設定では、sourceにマウントされた仮想ファイルシステム上のパスを指定する必要がある。 そのため、以下のmount設定も追加している。

   # ...略...
   [module]
      # (A)のみ設定すると、
      # デフォルト設定の"assets"のマウントが外れるため明示的に設定
      [[module.mounts]]
        source = "assets"
        target = "assets"
      [[module.mounts]] # (A)
        source = "hugo_stats.json"
        target = "assets/watching/hugo_stats.json"
   # ...略...
   

   まとめると、[module]と[build]でhugo.tomlに以下の設定をしている。

   # ...略...
   [module]
    # テーマで使用するアセットの登録
    [[module.mounts]]
      source = "assets"
      target = "assets"
    [[module.mounts]]
      source = "hugo_stats.json"
      target = "assets/watching/hugo_stats.json"
    # テーマのインポート
    [[module.imports]]
      path = 'github.com/kantas-spike/kantas-theme'
   
    # テーマで使用するtailwindcss用の設定
   
    [build]
      writeStats = true
      [[build.cachebusters]]
        source = "assets/watching/hugo_stats\\.json"
        target = "theme\\.css"
      [[build.cachebusters]]
        source = "assets/js/.\*\\.js"
        target = "theme\\.css"
    # ...略...
   

4. 最後に、テーマ側に必要なパッケージをサイト側にインストールする

   以下を実行して、テーマで利用しているパッケージをサイト側で収集する。

   hugo mod npm pack
   

   package.jsonに、テーマに必要なパッケージが反映されるので、 以下を実行し、パッケージをインストールする。

   npm install
   

参考

• Use Hugo Modules | Hugo
• Hugo Modules の仕組みで Hugo サイト用のコンテンツを分割して管理する - まくまく Hugo ノート
• kantas-spike/kantas-theme: Hugo theme for programming learner portfolio
• gitのsubmoduleを削除したい | kanta’s spike