hugo + Mainroad でのブログ再構築内容（覚え書き）

Raspberry Pi (Linux)

Raspberry Pi 上のサーバーで処理するには重すぎるなど制約が多いため、Windows 版 Hugo を使用し、Windows 上でビルドする方法を採用した。

Hugo の静的サイトでは、記事を 1 件追加するたびにサイト全体をビルドし、サーバーへ同期コピーする必要がある。
一見手間に思えるが、リソースの限られた Raspberry Pi を前提とすれば、合理的な運用方法だと思われる。

ただし、記事の追加がやや面倒になるため、更新頻度は自然と下がるはず。
もっとも、つぶやきのような無駄な投稿が減ると考えれば、それはそれで良いのかもしれない（笑）。

以下、覚え書き。

  1. Windows版　hugo

https://github.com/gohugoio/hugo/releases/hugo_extended_0.154.5_windows-amd64.zip

  1. テーマ Mainbord

Linux機で下記
git clone https://github.com/Vimux/Mainroad.git ./mainroad

  1. hugoサイト 追加ファイル

① layouts\partials\post_meta.html

{{- $root := . -}}
{{- with .Param "post_meta" -}}
	{{- range $field := . -}}
		{{- $p := printf "post_meta/%s.html" $field -}}
		{{- partial $p $root -}}
	{{- end -}}
{{- end -}}

{{ with .Date }}
  <time datetime="{{ .Format "2006-01-02" }}">
    {{ .Format "2006-01-02" }}
  </time>
{{ end }}

② アーカイブリスト表示関連

1). content\archives_index.md

---
title: "アーカイブ"
layout: "archives"
---

2). static\css\custom.css

/* 記事内の画像が枠からはみ出さないようにする */
.content img, .post__content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1em 0; /* 画像の上下に少し余白を作ると見やすくなります */
}

/* 月の見出しの上に余白を作り、リストとの間も少し調整する */
.archive-month {
  margin-top: 2.5em;    /* 上の月との間隔を広げる */
  padding-bottom: 5px;  /* 見出しと下のリストの間の微調整 */
  border-bottom: 1px solid #eee; /* 軽い下線を引くとさらに見やすい */
}

.archive-month + ul {
  margin-bottom: 2em;
}

3). layouts\partials\widgets\archive.html

<div class="widget widget-archive">
  <h4 class="widget__title">ARCHIVES</h4>

  <div class="widget__content">
    <ul>
      {{ range .Site.RegularPages.GroupByDate "2006-01" }}
        <li>
          <a href="{{ "/archives/" | relURL }}#{{ .Key }}">
            {{ .Key }} ({{ len .Pages }})
          </a>
        </li>
      {{ end }}
    </ul>
  </div>
</div>

4). layouts\archives\list.html

{{ define "main" }}
<h1>{{ .Title }}</h1>

{{ range .Site.RegularPages.GroupByDate "2006-01" }}
  <h2 class="archive-month" id="{{ .Key }}">{{ .Key }}</h2>
  <ul>
    {{ range .Pages }}
      <li>
        <a href="{{ .RelPermalink }}">{{ .Title }}</a>
        <small>{{ .Date.Format "2006-01-02" }}</small>
      </li>
    {{ end }}
  </ul>
{{ end }}

{{ end }}

③ カテゴリーリスト表示関連

カテゴリ名に記事数表示を追加。

1). layouts\partials\widgets\categories.html

<div class="widget widget-categories">
  <h4 class="widget__title">Categories</h4>

  <div class="widget__content">
    <ul class="widget__list">
      {{ range $name, $taxonomy := .Site.Taxonomies.categories }}
        <li class="widget__item">
          <a class="widget__link"
             href="{{ "/categories/" | relLangURL }}{{ $name | urlize }}">
            {{ $name }}
            <span class="widget__counter">
              ({{ $taxonomy.Count }})
            </span>
          </a>
        </li>
      {{ end }}
    </ul>
  </div>
</div>
  1. hugo.toml
baseURL = "https://sky.0t0.jp/retiredlog/"
languageCode = "ja-jp"
title = "リタイア放浪記"
theme = 'mainroad'
canonifyURLs = true

# 最新のHugoでのページ分割設定
[pagination]
  pagerSize = 5

[Params]
  description = '定年退職後の出来事を綴ります。'
  postMeta = ["date", "categories"]
  customCSS = ["css/custom.css"]
  
  [Params.sidebar]
    home = "right"
    list = "right"
    single = "right"
    widgets = ["search","recent","categories","archive"]
  
[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true  # ← これを true にすることで、HTMLタグが有効になります
      hardWraps = true  # ← Enterキー1回で強制的に改行（<br>）を入れる