ブログのテーマを自作のテーマに変えました。

はじめに

今まではMediumishというブログのテーマを改造して使っていました。特に不満等はなかったのですが、いつかはHugoのテーマを作ってみたいと思っており、時間が取れそうだったのでブログのテーマを作ってみました。
5月くらいから着手して、7月くらいに形になりました。一日1~2時間くらいを作業していた気がします。だいぶ進捗は悪いですが、なんとか形にできました。初めてChatGPTを使いながらコーディングをしました。知らないことを一気に知れるので、すごい便利でした。 ChatGPTがなければもっとかかっていた気がします。

作ったテーマ

• hugo_theme_windy

作業手順メモ

以下のブログがすごい参考なりました。

• Hugoのテーマを何個か作ったので知見をまとめてみる

まずは、以下の手順でテーマのひな型を作ります。

$ hugo new theme [name]
$ cd [name]
$ tree
[name]
 ├── LICENSE
 ├── README.md
 ├── archetypes
 │   └── default.md
 ├── assets
 │   ├── css
 │   │   └── main.css
 │   └── js
 │       └── main.js
 ├── content
 │   ├── _index.md
 │   └── posts
 │       ├── _index.md
 │       ├── post-1.md
 │       ├── post-2.md
 │       └── post-3
 │           ├── bryce-canyon.jpg
 │           └── index.md
 ├── data
 ├── hugo.toml
 ├── i18n
 ├── layouts
 │   ├── _default
 │   │   ├── baseof.html
 │   │   ├── home.html
 │   │   ├── list.html
 │   │   └── single.html
 │   └── partials
 │       ├── footer.html
 │       ├── head
 │       │   ├── css.html
 │       │   └── js.html
 │       ├── head.html
 │       ├── header.html
 │       ├── menu.html
 │       └── terms.html
 ├── static
 │   └── favicon.ico
 └── theme.toml

参考:
- hugoBasicExample

あとは以下の手順で編集していきます。

1. ./layouts/index.htmlの削除
2. ./layouts/_default/baseof.htmlの作成

• どこにサイドバーを表示するかやどこでjavascriptを読み込むかなどのパーツの大枠を決めることができます。

3. ./layouts/_default/list.htmlの作成

• 記事の一覧ページを作成できます。今回の場合、トップページになります。./layouts/index.htmlが存在する場合は、index.htmlがトップページになります。

4. ./layouts/_default/single.htmlの作成

• 1つの記事のデザインを決められます。

5. ./layouts/404.htmlの作成

• URLが見つからなかった時のページを作成できます。

注意事項

1. 絶対パスの使用

相対パスを使用すると設定したbaseURLによっては、正しく画像を表示できないことがあります。そのため、絶対パスになるように作ったほうがよいようです。

• RelPermalink -> Permalink
• relURL -> absURL 例
• hugo_theme_windy/layouts/partials/block/image.html

2. “/“から始まるパスへの対策

Hugoでは、”/“から始まるパスをabsURLやrelURLに入力すると期待したパスにならないことがあります。例えば、–baseURLをhttps://example.com/foo/を設定したとします。このとき以下を実行するとhttps://example.com/image/sample.pngになってしまいます。

{{ /image/sample.png | absURL }}

期待するURLは、https://example.com/foo/image/sample.pngです。

このため、以下のように先頭のスラッシュを削除するような処理をする必要があります。

{{ $dest := strings.TrimPrefix "/" "/image/sample.png" }}
{{ $dest| absURL }}

参考
- urls.RelURL

3. mount設定を使う場合

Node.jsでインストールしたライブラリをHugoで使用する場合、以下のようにstaticフォルダをマウントし使用できます。

e.g. hugo.toml

[module]
  [[module.mounts]]
    source = 'node_modules/mathjax/es5' # Specify a proper directory for node_modules.
    target = 'static/mathjax/es5'

しかし、この設定だけだとstaticフォルダ内にある他のファイルがHugoから認識されなくなってしまいます。そのため、staticフォルダやassetsフォルダもマウントしておく必要があります。

[module]
+  [[module.mounts]]
+    source = 'static'
+    target = 'static'
+  [[module.mounts]]
+    source = 'assets'
+    target = 'assets'
  [[module.mounts]]
    source = 'node_modules/mathjax/es5' # Specify a proper directory for node_modules.
    target = 'static/mathjax/es5'

4. インストールするフォーマッタ

フォーマッタとして、Prettierを使いました。 Hugoのテンプレート入りのhtmlに適用する場合は、prettier-plugin-go-templateが必要です。 ¹

終わりに

ChatGPTを使ってみて思いますが、やっぱりすごいです。 LLMが注目されている理由が少し理解できたかもしれないです。