Chillarin Blog 構成紹介 - 3.Hugoでブログを作る（テーマ・テンプレの基本） -

本章の内容

前回（2.公開の核：Cloudflare Tunnel設計）で、外からブログに辿り着く “経路” を整理しました。
今回はその中身、つまり Hugo 側で「サイトの見た目と動き」をどう作っているかをまとめます。

この章のゴールはひとつだけ。

未来の自分が「どこを触れば見た目が変わるか」「どの設定がURLやカテゴリ表示に効くか」を一撃で思い出せること。

Hugoはこのブログで何をしているか

Chillarin Blog での Hugo の役割はとてもシンプルです。

content/ の Markdown を読む
layouts/ のテンプレに流し込む
static/ のファイルと一緒に 静的HTMLとして出力する

出力された静的ファイルを nginx が配信し、Cloudflare Tunnel で外へ出します。

flowchart LR A["GitHubへpush"] --> B["self-hosted runner"] B --> C["Hugo build"] C --> D["/opt/chirarin-blog-public に配置"] D --> E["nginxが静的配信"] E --> F["Cloudflare Tunnelで外部公開"]

ポイントはここです。

HugoはWebサーバではなく ビルドツール
公開物は 静的ファイルだけ（HTML/CSS/JS/画像）
だからテンプレとCSSを固めると、運用が一気に安定する

まず覚える：3つの主役ディレクトリ

このブログの “見た目と中身” は、ほぼこの3つで決まります。

content/：記事（Markdown）
layouts/：見た目の骨組み（HTML生成ルール）
static/：配信される素材（CSS/画像/JSなど）

結論：ブログの見た目は layouts/ + static/、中身は content/ で決まる。

hugo.toml：サイトのルールブック

この環境の設定ファイルは hugo.toml です。
ここで「URLの形」「カテゴリ/タグ」「コメント」「サイトの基本情報」が決まります。

URL設計：年/月/日/slug

Chillarin Blog の投稿URLは 年/月/日/slug に固定しています。

toml

[permalinks]
  posts = "/posts/:year/:month/:day/:slug/"

つまり投稿の Front Matter に slug を入れるだけで、URLは安定します。

yaml

---
title: "記事タイトル"
date: 2026-01-08T00:00:00+09:00
slug: "my-first-post"
categories: ["tech", "homelab"]
tags: ["hugo"]
toc: true
cover: "cover.png"
---

生成されるURLはこうなります。

/posts/2026/01/08/my-first-post/

重要：フォルダ名はURLに直結しない
運用上はフォルダ名を自由にしてOK（並び順・管理しやすさ優先）で、公開URLは slug で固定します。

taxonomies：カテゴリとタグ

カテゴリとタグは Hugo 標準の taxonomies を使います。

toml

[taxonomies]
  category = "categories"
  tag      = "tags"

categories：シリーズ/入口（大枠）
tags：検索/絞り込み（細かいメタ情報）

remark42：コメント（投稿ページのみ）

コメントは remark42 を使い、投稿（posts）だけで読み込む設計です。
（ページ全体にコメントが付くと運用が散らかるので、投稿だけに寄せます）

toml

[params.remark42]
  enabled = true
  host = "https://comments.chillarin39.com"
  site_id = "chillablog"
  theme = "dark"
  locale = "ja"
  no_footer = true

content/：記事の置き方（Page Bundle推奨）

画像が増えるブログは、記事が増えるほど「画像が迷子」になります。
そこで基本は Page Bundle（記事ごとにフォルダ運用）。

snippet

content/posts/YYYY-MM-DD-slug/
  index.md
  cover.png
  diagram.png

この形にすると、

記事と画像が同居する（迷子にならない）
移動/削除がフォルダ単位で完結する
cover も Resources.GetMatch で安全に引ける

layouts/：テンプレの基本（このブログの流儀）

Chillarin Blog は “テーマを魔改造” ではなく、最小テンプレを自作して把握し続ける方針です。

理由は単純で、

「どこを触れば直るか」が常に分かる
2カラム（左:本文 / 右:サイドバー）が崩れにくい
CSSの当て先がブレない

1) baseof.html：全ページ共通の骨格

最重要ファイルが layouts/_default/baseof.html。
ここで 全ページの枠（ヘッダ/本文/サイドバー/フッタ）を固定します。

このブログでは、さらに <body> にページ種別の class を付けています。
これが 「2カラム事故を防ぐ」根本です。

page-home（トップ）
kind-<Kind>（例：kind-page, kind-term, kind-taxonomy）
type-<Type>（例：type-posts）
categories の term だけ term-<term>（例：term-chinchilla）

テンプレ抜粋イメージ：

html

<!-- layouts/_default/baseof.html（イメージ） -->
<body class="page-home kind-page type-posts term-chinchilla">
  {{ partial "header.html" . }}

  <main class="main-layout">
    <div class="main-content">
      {{ block "main" . }}{{ end }}
    </div>

    <div class="sidebar">
      {{ partial "sidebar.html" . }}
    </div>
  </main>

  {{ partial "footer.html" . }}
</body>

taxonomy一覧は「サイドバー無し」

このブログでは、タグ/カテゴリの “一覧ページ”（kind=taxonomy）を no-sidebar にしてシンプルにしています。
（入口ページは見やすさ優先。記事一覧は term 側で見せる）

2) single.html：投稿ページ（cover / コメント / 本文）

投稿ページは layouts/_default/single.html。

このブログのポイントは2つです。

cover の決定ルール（安全）

cover があれば最優先で Page Bundle の画像を探す
無ければ「先頭カテゴリ」から category-<term>.png に fallback

cover を入れたら「一覧サムネ」と「記事カバー」が揃う設計です。

yaml

cover: "cover.png"

remark42 は posts だけ

Section == "posts" のときだけコメントを読み込みます。
（カテゴリページやトップにコメントが付かない）

layouts/partials/ は “共通部品置き場” です。

header.html：ロゴ/ナビ
footer.html：フッタ
sidebar.html：サイドバー一式（TOC/プロフィール/最近/フォロー）
post-thumb-url.html：サムネURL決定ロジック

サイドバーはこの順番で出す方針です。

TOC（toc: true の投稿ページのみ）
プロフィール
最近の投稿
フォロー

さらに chinchillaカテゴリだけ上部に配信枠が出る設計です。
（カテゴリ別の演出は term-chinchilla と組み合わせると安全に拡張できます）

4) categories / tags：taxonomyページの作り分け

Hugoの taxonomy は “ページ種別が別物” なので、専用テンプレで固定します。

5) imgショートコード：画像を「迷子にしない」貼り方

画像は Markdown 直貼りでも動きますが、Chillarin Blog では img ショートコードを基本にします。

markdown

{{< img src="diagram.png" alt="構成図" caption="全体構成" >}}

このショートコードは、

Page Bundle を最優先で探す
無ければ src をそのまま使う（/img/... や https://... もOK）
<figure> + <figcaption> の形で統一

なので「見た目」と「アクセシビリティ（alt）」がブレにくいです。

CSSは static/css/style.css が唯一の正本

このブログのスタイルは static/css/style.css に集約しています。

Grid（左：main / 右：sidebar）を強制して、sidebar落下事故を防ぐ
画像/動画/iframe を “本文幅に収まる” 前提で統一
カテゴリ/タグ/投稿カードの見た目も同じ部品として揃える

テンプレで “class名を固定” しているので、CSS側の調整で全体が揃う。

どこを触れば何が変わるか（早見表）

最後に「迷子防止」のため、触る場所を表にします。

見た目の枠：layouts/_default/baseof.html
投稿本文の見え方：layouts/_default/single.html
トップの入口：layouts/index.html
カテゴリ入口と各カテゴリ：layouts/categories/*
タグ入口と各タグ：layouts/tags/*
サイドバーの順番と中身：layouts/partials/sidebar.html
サムネ決定ロジック：layouts/partials/post-thumb-url.html
見た目の最終決定：static/css/style.css

ローカル確認とビルド（最小）

bash

# 下書き込みで確認（draft含む）
hugo server -D

# 本番生成（出力先を指定）
hugo --minify -d /opt/chirarin-blog-public

まとめ

Hugoは「Markdown + テンプレ」から静的ファイルを生成する役割
Chillarin Blog の “安定” は、テンプレの方針で担保している
- baseof.html で全ページ骨格を固定
- <body> class でページ種別をCSSに渡し、分岐を安全にする
- taxonomy は専用テンプレで固定して崩れを防ぐ
画像は Page Bundle + img ショートコードで迷子を防ぐ
CSSは static/css/style.css に集約し、見た目を一箇所で揃える

次回は Dockerで本番サービス化（nginx + tunnel + remark42） に進みます。
「Hugoの生成物をどこに置くか」「composeでどう束ねるか」を、いよいよ “運用の形” として整理します。

自宅サーバ運用の全体像は自宅サーバ運用の完全ガイド — Proxmox + Cloudflare Tunnel + Docker で個人ブログを公開し続けるにまとめています。Proxmox クラスタ・公開経路・Docker 本番化・障害対応までを 1 ページで通読できる Pillar ガイドです。

· · ·

Chillarin Blog 構成紹介 - 3.Hugoでブログを作る（テーマ・テンプレの基本） -

本章の内容

Hugoはこのブログで何をしているか

まず覚える：3つの主役ディレクトリ

hugo.toml：サイトのルールブック

URL設計：年/月/日/slug

taxonomies：カテゴリとタグ

remark42：コメント（投稿ページのみ）

content/：記事の置き方（Page Bundle推奨）

layouts/：テンプレの基本（このブログの流儀）

1) baseof.html：全ページ共通の骨格

taxonomy一覧は「サイドバー無し」

2) single.html：投稿ページ（cover / コメント / 本文）

cover の決定ルール（安全）

remark42 は posts だけ

3) partials：部品（header / sidebar / footer）

sidebar は「並び順」がルール

4) categories / tags：taxonomyページの作り分け

categories

tags

5) imgショートコード：画像を「迷子にしない」貼り方

CSSは static/css/style.css が唯一の正本

どこを触れば何が変わるか（早見表）

ローカル確認とビルド（最小）

まとめ

コメント