このブログはHugoという静的サイトジェネレーターで構築しています。テーマも自作しているのですが、よくよく調べたらテーマをちゃんと管理できてなかったみたいなので、いろいろその辺の構造などを見直しました。以下、やったことをメモ。

themesディレクトリを使ってなかった

Hugoでテーマを使うときは、ルート直下にある「themes」というディレクトリの中にテーマファイルを置き、「config.toml」で使うテーマを指定する、というやり方が一般的なやり方だそうです。ところが、私はそれを知らずにルート直下の「archetypes」や「layouts」ディレクトリの中に直接ファイルを置いて、それをガシガシ編集する形でサイトを作っていました。

どうやら、このルート直下にある「archetype」や「layouts」ディレクトリの中にファイルをおくと、設定しているテーマよりも優先的に使用されるという仕組みらしく、テーマの一部を上書きたい時に使うのが本来の用途のようです。

私のやり方でも動作に問題はないのですが、このままだとテーマの切り替えができなかったり、管理が色々とやりにくそうなので、本来あるべき形にファイルの構造を整理してあげようというのが今回の目的です。

必要なファイルをまとめる

では早速進めていきます。まずはHugoで管理しているのサイトのルート（「static」や「archetypes」ディレクトリや「config.toml」などが置いてあるディレクトリ）の直下に「themes」という名前のディレクトリを作ります。

$ mkdir themes

作成したthemesディレクトリに移動し、自作テーマ用のディレクトリを作成します。今回は仮に「my_theme」という名前にします。

$ cd themes
$ mkdir my_theme

my_themeディレクトリの中に、テーマに必要なファイルを入れていきます（コピーではなく移動させました）。実際ディレクトリに放り込んだのは以下のファイル。 ちなみにこれはあくまで私の環境の場合なので、自作テーマの作り次第ではファイル数など変わってきます。

  • /archetypes/default.md
  • /layoutsディレクトリの中身全部
  • /static/css/ディレクトリの中身全部
  • /static/jsディレクトリの中身全部
  • /static/image/内のテーマに関する画像ファイルだけ

そして最後にmy_themeディレクトリ直下にtheme.tomlファイルを新規で作成。中身はHugo Zenを参考にこんな感じにしてみました。

name = " my_theme"
license = "MIT"
licenselink = ""
description = "my_theme is a sapmle theme."
tags = ["blog"]
features = ["blog", "themes"]
min_version = 0.1

[author]
    name = "diwao"
    homepage = "http://diwao.com/"

テーマを適用する

ここまでの流れでテーマを使用する準備ができたのですが、このままではまだ「my_theme」は適用されていません。このサイトでどのテーマを使うのかを記述する必要があります。といっても簡単で、サイトのルートにある「config.toml」に

theme = 'my_theme'

こんな感じにtheme = 'テーマ名'と追記してあげるだけでOKです。これでテーマが管理しやすく、また別のサイトに適用させることも簡単になり扱いやすくなりました。