Hugo の自作テーマ作成

Hugo でオリジナルのテーマを作成する場合、hugo new theme コマンドを使用することで基本的なテーマの骨組みを簡単に生成できます。ここでは、自作テーマ「my-theme」の作成から開発までのプロセスを解説します。

1. テーマの基本構造を作成する

まず、以下のコマンドで新しいテーマの基本構造を生成します：

hugo new theme my-theme

このコマンドを実行すると、themes/my-theme/ ディレクトリに以下のような構造が作成されます：

$ tree themes/my-theme 
themes/my-theme
├── 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
│   ├── _partials
│   │   ├── footer.html
│   │   ├── head
│   │   │   ├── css.html
│   │   │   └── js.html
│   │   ├── head.html
│   │   ├── header.html
│   │   ├── menu.html
│   │   └── terms.html
│   ├── baseof.html
│   ├── home.html
│   ├── page.html
│   ├── section.html
│   ├── taxonomy.html
│   └── term.html
└── static
    └── favicon.ico

14 directories, 24 files

2. Hugoテーマのディレクトリ構造解説

Hugoテーマのディレクトリ構造は、サイトの見た目と機能を定義する重要な要素です。以下に各ディレクトリの役割を解説します。

主要ディレクトリの役割

archetypes

  • default.md: 新しいコンテンツを作成するときのテンプレートです。hugo newコマンドで使用されます。

assets

SCSS/CSS、JavaScript、画像などの処理が必要なアセットファイルを格納します。

  • css/main.css: メインのスタイルシート
  • js/main.js: メインのJavaScriptファイル ※これらはHugoのパイプラインで処理され、最適化されます。

content

サイトのコンテンツを格納するディレクトリです。

  • _index.md: サイトのホームページ用のコンテンツ
  • posts/_index.md: 投稿一覧セクションのコンテンツ
  • posts/post-1.md, posts/post-2.md: 個別の投稿
  • posts/post-3/index.md: バンドルコンテンツの例（画像などのリソースを同じディレクトリに格納）

data

データファイル(YAML, JSON, TOML)を格納するディレクトリです。テンプレートから参照できるデータを格納します。

hugo.toml

テーマの設定ファイルです。デフォルト設定を定義します。

i18n

国際化(多言語化)のための翻訳ファイルを格納します。

layouts

テンプレートファイルを格納する最も重要なディレクトリです。

  • _partials/: 再利用可能なHTMLコンポーネント
    • head.html: HTML headセクションのテンプレート
    • header.html: サイトヘッダーのテンプレート
    • footer.html: サイトフッターのテンプレート
    • menu.html: ナビゲーションメニューのテンプレート
  • baseof.html: すべてのページの基本レイアウト
  • home.html: ホームページのテンプレート
  • page.html: 単一ページのテンプレート
  • section.html: セクションページ(例: posts一覧)のテンプレート
  • taxonomy.html: タクソノミーページ(タグ、カテゴリなど)のテンプレート
  • term.html: タクソノミー単語のテンプレート(特定のタグやカテゴリ)

static

処理せずにそのまま公開ディレクトリにコピーされるファイル。

  • favicon.ico: ブラウザタブに表示されるサイトアイコン

Hugoのテンプレート階層

Hugoはテンプレートを探すとき、特定の順序で検索します：

  1. レイアウト指定 (layout: custom)
  2. コンテンツタイプ (posts/single.html)
  3. 一般テンプレート (_default/single.html)

このようにして柔軟かつ効率的なテーマ開発が可能になっています。