このサイトはHugoは使用して構築しました。
その中でRobustというテーマをカスタマイズして使用しています。

この記事にカスタマイズの実装内容を書き残しておきます。

また、Themeのカスタマイズの仕方について説明します。
今回のようにRobustを使用する場合は\themes\robust\...というフォルダ構成になりますが、このthemes配下は触らないようにします。

新しくlayouts\**というフォルダを作り、ここにカスタマイズしたファイルを入れていきます。

例えば\layouts\_default\summary.htmlを編集したいときは、
\themes\robust\layouts\_default\summary.htmlをコピーし、\layouts\_default\summary.htmlへ貼り付け、貼り付けたものを編集します。
shortcodeなど、元々無いものは新規作成します。

また、HEADに追加と記載があるものに関しては、\layouts\partials\meta.htmlに追記します。

詳細な解説は行わないのでそこはご了承ください。

Author欄

Author欄にYouTubeやTwitchを載せ、Twitter（現X）のアイコンを更新します。
各アイコンはFont Awesomeから使用しました。

まずconfig.tomlの[params.author]に各項目を追加します。
自分の場合は下記のようになりました。

1
2
3
4
5
6
7
8

[params.author]
thumbnail = "images/profile/250202Author.png"
name = "iniwa"
description = "ゲーム好きです。プロフィールは<a href = \"/about_me\">こちら</a>。"
twitter = "https://twitter.com/iniwach"
YouTube = "https://www.youtube.com/channel/UCLaOje60cy_9qPJkB_G-AwA"
Twitch = "https://www.twitch.tv/iniwach"
mail = "GoogleフォームURL"

次に\layouts\partials\meta.htmlに下記を記述します。

1

<link href="https://use.fontawesome.com/releases/v6.7.2/css/all.css" rel="stylesheet">

次に\layouts\partials\author.htmlを編集します。
下記のハイライト部分を編集･追加します。

16
17
18
19
20
21
22
23
24
25
26

    <div class="author-name">{{ .name }}</div>
    <ul class="author-facts">
      {{ with .facebook }}<li><a href="{{ . }}" rel="noopener nofollow" target="_blank"><i class="fab fa-facebook" aria-hidden="true"></i></a></li>{{ end }}
      {{ with .twitter }}<li><a href="{{ . }}" rel="noopener nofollow" target="_blank"><i class="fa-brands fa-x-twitter"></i></a></li>{{ end }}
      {{ with .github }}<li><a href="{{ . }}" rel="noopener nofollow" target="_blank"><i class="fab fa-github" aria-hidden="true"></i></a></li>{{ end }}
      {{ with .mail }}<li><a href="{{ . }}" rel="nofollow" target="_blank"><i class="fas fa-envelope" aria-hidden="true"></i></a></li>{{ end }}
      {{ with .Twitch }}<li><a href="{{ . }}" rel="nofollow" target="_blank"><i class="fa-brands fa-twitch"></i></a></li>{{ end }}
      {{ with .YouTube }}<li><a href="{{ . }}" rel="nofollow" target="_blank"><i class="fa-brands fa-youtube"></i></a></li>{{ end }}
    </ul>
    <div class="author-description">{{ .description | safeHTML }}</div>
  </div>

これでAuthor欄に各リンクへ飛ぶボタンを設置できました。

月別アーカイブの追加･Categoriesの削除

自動で年月毎に振り分けてくれるページが作成される記事作成サービスは多々あります。
あれ良いなと思ったので実装しました。

Taxonomyという機能で作ります。
初期ではCategoriesとTagsの2つが用意されていますが、Categoriesは使わないため削除しました。

まずconfig.tomlの[taxonomies]を下記のように編集します。

1
2
3

[taxonomies]
tag = "tags"
archive = "archives"

これで記事毎のフロントマターに下記を記載すればtaxonomyの設定は完了となります。

1
2

archives:
  - {{ dateFormat "2006-01" .Date }}

次に月別アーカイブのページを作ります。
\layouts\patials\archives.htmlを作成し、下記を記述。

1
2
3

{{ with .Site.Taxonomies.archives }}
{{ partial "taxonomy.html" (dict "context" $.Site "key" "archives" "value" . "baseurl" $.Site.BaseURL) }}
{{ end }}

最後にサイドバーに月別アーカイブを表示します。
\layouts\_default\baseof.htmlに下記ハイライト部分を追記。

78
79
80
81
82
83
84

          <aside class="l-sidebar">
            {{ partial "author.html" . }}
            {{ partial "latests.html" . }}
            {{ partial "categories.html" . }}
            {{ partial "tags.html" . }}
            {{ partial "archives.html" . }}
          </aside>

これでサイドバーにArchivesが設置されました。

記事更新日の表示

画像の赤枠で囲ってるやつです。
kousinbi

layouts\_default\summary.htmlにハイライト部分を追加。

 8
 9
10
11
12

      <ul class="facts">
        <li><i class="fas fa-calendar" aria-hidden="true"></i><time datetime="{{ .Date.Format "2006-01-02T15:04:05JST" }}">{{ .Date.Format ( .Site.Params.dateformat | default "Jan 2, 2006") }}</time></li>
        {{ if ne .Date .Lastmod }}
        <li><i class="fas fa-sync" aria-hidden="true"></i><time datetime="{{ .Lastmod.Format "2006-01-02T15:04:05JST" }}">{{ .Lastmod.Format ( .Site.Params.dateformat | default "Jan 2, 2006") }}</time></li>
        {{ end }}

これで記事のフロントマターにLastmodを追加すれば完了です。

2025/02/10追加
記事一覧ページにも更新日を表示するようにしました。
\layouts\_dedault\list.htmlに下記を追加。

25
26
27
28
29

            <ul class="facts">
              <li><i class="fas fa-calendar" aria-hidden="true"></i><time datetime="{{ .Date.Format "2006-01-02T15:04:05JST" }}">{{ .Date.Format ( .Site.Params.dateformat | default "Jan 2, 2006") }}</time></li>
              {{ if ne .Date .Lastmod }}
              <li><i class="fas fa-sync" aria-hidden="true"></i><time datetime="{{ .Lastmod.Format "2006-01-02T15:04:05JST" }}">{{ .Lastmod.Format ( .Site.Params.dateformat | default "Jan 2, 2006") }}</time></li>
              {{ end }}

アコーディオンの実装

ここをクリックで展開できます。 こういう最初は閉じていて、クリックすると開くものをアコーディオンって言うらしいです。

\layouts\shortcodes\accordion.htmlを作成し、下記を記述。

1
2
3
4

<details>
    <summary>{{ .Get "title" | default "e.g." }}</summary>
    {{ .Inner | markdownify }}
  </details>

記事内でアコーディオンを使いたい所に下記のように記述。

1
2
3

{< accordion title="ここにクリック前から表示される文章を入力" >}  
ここにクリック後に展開される文章を入力。
{< /accordion >}

この例ではShortcodeが有効にならないように{}を1つで囲っているので注意。本来は2つ必要です。

ページネーションの追加

まだ記事数が少ないので必要ありませんが、良いと思ったので先に実装しました。
下画像赤枠のことです。
page nation この記事投稿時はまだ数が少なくて表示されていないかもしれません。

\layouts\_default\list.htmlを編集します。編集前の状態は

46
47
48
49
50
51
52
53
54
55
56

{{ if or (.Paginator.HasPrev) (.Paginator.HasNext) }}
<nav class="paging">
  {{ if .Paginator.HasPrev }}
  <a href="{{ .Paginator.Prev.URL }}" rel="prev">Prev</a>
  {{ end }}
  {{ if .Paginator.HasNext }}
  <a href="{{ .Paginator.Next.URL }}" rel="next">Next</a>
  {{ end }}
</nav>
{{ end }}
{{ end }}

この部分を以下のように編集します

46
47
48
49

<nav class="paging">
  {{ template "_internal/pagination.html" . }}
</nav>
{{ end }}

と編集します。

\layouts\partials\custom.cssに

 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110

/*------------------------------------
Pagination
------------------------------------ */
#paging {
    margin: auto;
    text-align: center;
  }
  #paging ul {
    padding: 0;
  }
  #paging i {
    font-weight: bold;
  }
  #paging .not-allow i {
    font-weight: normal;
    opacity: 0.3;
  }
  .pagination {
    display: flex;
    justify-content: center;
    margin: 0;
    list-style: none;
    border-radius: .25rem;
  }
  .pagination li {
    flex: 1 1 42px;
    max-width: 42px;
    min-width: 27px;
    float: left;
  }
  
  .pagination > li > a {
    display: inline-block;
    width: 100%;
    padding: 0px 0;
    color: inherit;
    background: #fff;
    /*border: 1px solid #ddd;*/
    border-right: 0;
    text-align: center;
  }
  .pagination > li:last-child > a,
  .pagination > .not-allow:first-child > a:hover {
    /*border-right: 1px solid #ddd;*/
  }
  .pagination > .active > a,
  .pagination > li > a:hover {
    color: #fff;
    background: #906dd3;
  }
  .pagination > .active > a:hover,
  .pagination > .not-allow > a:hover {
    cursor: text;
  }
  .post #paging {
    margin: 20px 0 40px 0;
  }

  .page-item {
      margin-left: 5px;
      margin-right: 5px;
  }
  
/*------------------------------------
Pagination
------------------------------------ */

と追記。
これでページネーションが実装され、いい感じの見た目になりました。

フッターに免責事項･プライバシーポリシーの設置

まずフッターとは下画像の事で、ページ最下部にあります。
iniwanokakemimi_footer
これの2行目にNotice|Privacy Policyを追加しました。

\layouts\_default\baseof.htmlを開き、下記ハイライト部分を追加します。

89
90
91
92
93
94
95
96
97
98

    <footer class="l-footer">
      <div class="l-container">
        <p>{{ with .Site.Copyright }}{{ . | safeHTML }}{{ else }}<span class="h-logo">&copy; {{ .Site.Title }}</span>{{ end }}</p>
        <aside>
          <p><a href="/notice">Notice</a>|<a href="/privacy">Privacy Policy</a></p>
          <p>Powered by <a href="https://gohugo.io/">Hugo</a>.</p>
          <p><a href="https://github.com/dim0627/hugo_theme_robust">Robust</a> designed by <a href="http://yet.unresolved.xyz/">Daisuke Tsuji</a>.</p>
        </aside>
      </div>
    </footer>

これで2行目にNotice | Privacy Policyが追加され、
クリックした時は\content\notice.mdと\content\privacy.mdがそれぞれ読み込まれます。

GoogleAnalytics･Disqusの実装

Robustはこの2つに対応しているため、config.tomlに下記を追記するだけで完了します。

38
39
40
41
42

[services]
  [services.disqus]
    shortname = 'disqus shortname'
  [services.googleAnalytics]
    id = 'Analytics ID'

記事上部のシェアボタンの削除

\layouts\_default\summary.htmlを編集します。
下記ハイライト部分を削除するとシェアボタンが消えます。

18
19
20
21
22
23
24

        {{ if .Draft }}
        <li style="color: #2196f3;">DRAFT</li>
        {{ end }}
      </ul>
  
      {{ partial "share.html" . }}
    </header>

本サイトでは実装していませんが、記事下部のシェアボタンを消すには同ファイルの下記ハイライト部分を削除します。

34
35
36
37
38

    <footer class="article-footer">
  
      {{ partial "share.html" . }}
  
      {{ $params := .Params }}

また、\layouts\partials\share.htmlを編集すれば表示されるボタンを編集できます。

\archetypes\default.md

新しい記事を作成するとき、hugo new ○○.mdで生成されるmdに最初から書かれている内容を変更できます。
自分は下記のようにしています。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

---
title: "{{ .TranslationBaseName | humanize | title }}"
date: "{{ dateFormat "2006-01-02" .Date }}"
Lastmod: "{{ dateFormat "2006-01-02" .Date }}"
thumbnail: images/default.jpg
draft: true
toc: true
archives:
  - {{ dateFormat "2006-01" .Date }}
tags:
  - hoge
  - piyo
---

参考に、実際にhugo new hoge.mdを打つと下記のようになります。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

---
title: "記事のタイトル"
date: "2025-01-01"
Lastmod: "2025-01-01"
thumbnail: images/default.jpg
draft: false
toc: true
archives:
  - 2025-01
tags:
  - hoge
  - piyo
---

faviconの設定

まずfaviconとは、ブラウザのタブに表示されるアイコンです。
favicon_iniwa

まずfavicon.icoを作成しておき、\static\images\favicon.icoに設置します。
次に、\layouts\partials\meta.htmlに下記を追加します。

1

<link rel="shortcut icon" href="/images/favicon.ico" />

これでfaviconが設定できました。

CustomCSS

Robustは\layouts\partials\custom.cssを編集する事で実装されます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

/* リストの見た目調整*/
article.sn > .article-body ul, article.sn > .article-body ol {
    margin-top: 0.1rem;
    margin-right: 0px;
    margin-bottom: 0.2rem;
}

/* リストの見た目調整*/
article.sn > .article-body li {
    padding-bottom: 0.25rem;
    line-height: 1.5rem;
}

/* accordion下の幅を調整*/
summary {
    margin-bottom: 0.4rem;
}

/* 見出し（h2）の調整*/
article.sn > .article-body h2 {
    margin-top: 3rem;
}

/* 見出し（h4）の調整*/
article.sn > .article-body h4 {
    margin-top: 1.5rem;
    margin-bottom: 0.0rem;
}

/* *で挟む強調表示の見た目変更*/
article.sn > .article-body em {
    color: #333;
}

article.sn > .article-body strong {
    box-shadow: 0 -.08rem 0 0 #333 inset;
}

/* コード表記の上下余白低減 */
article.sn > .article-body pre > code {
  display: block;
  padding: 0rem 2rem;
}

コードブロック内のハイライト･SyntaxHighlight

既に多用していますが、記事のコードブロック内でSyntaxHighlightの利用、一部分のハイライトができます。

まず\config.tomlにSyntax用の設定を記入します。

44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

[markup]
  [markup.highlight]
    anchorLineNos = false
    codeFences = true
    guessSyntax = false
    hl_Lines = ''
    hl_inline = false
    lineAnchors = ''
    lineNoStart = 1
    lineNos = false
    lineNumbersInTable = true
    noClasses = true
    style = 'monokai'
    tabWidth = 4
    wrapperClass = 'highlight'

記事内では下記のように記入します。

10
11
12
13
14
15
16
17

{< highlight text "linenos=table,hl_lines=2-4,linenostart=10" >}
ここにコードを記入していく。
highlight text の「text」の部分で、Syntaxする言語を指定できます。  
  例えば、html･css･go等。今回のtextだとハイライトを行いません。
hl_lines=2-3 でハイライトする行数を指定できます。コードブロック内の行数なので注意が必要です。
  ハイライトが必要なければ省略します。  
linenostart=10 で左端にある行数表示のスタート地点を指定できます。この例だと10行目スタートとしています。  
{< / highlight >}

コードブロック内では{}が1つですが、本来は2つ必要です。
詳細はHugoのドキュメントへ。

25/02/06追記 Markdownと似た形式で

1
2
3
4

``text {linenos=true,hl_lines=[1,"3-4"],linenostart=1}
ここにコードを記入
今はこちらを使用しています
``

という形でも実装できます。例では本来```のところを``としています。
詳細はHugoのドキュメントへ

記事の横幅を広くする

2025/02/06追加

もう少しメインコンテンツの横幅が欲しいと思ったので編集しました。
\assets\styles.scssの下記ハイライト部分を編集

74
75
76
77
78

.l-container {
  position: relative;
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 1rem;

127
128
129

.c6 { width: 50%; }
.c4 { width: 30.0%; }
.c8 { width: 70.0%; }

また、フォントサイズを18pxから16pxに変更しました。

1
2
3
4

html {
  font-size: 16px;
  background-color: rgba(236,239,241,.5);
}

RSSフィードの対応

2025/02/06追加

config.tomlに下記ハイライトの追加。

35
36
37

[outputs]
page = [ "HTML", "AMP" ]
home = [ "HTML", "RSS" ]

これだけで対応完了です。

Robots.txtの作成とsitemap.xmlのカスタマイズ

2025/02/07追加

まずconfig.tomlに下記を追加

9

enableRobotsTXT = false

\static\robots.txtを作成し、下記を記述

1
2
3
4
5
6

User-agent: *
Disallow: /categories/
Disallow: /tags/
Disallow: /archives/
Disallow: /draft/
Sitemap: https://iniwach.com/sitemap.xml

これでrobotsの設定が完了です。
この設定と生成されるsitemapを合わせていきます。

\layouts\sitemap.xmlを作成し、下記を記述

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  {{ range .Data.Pages }}
  {{ if or (in .Permalink "/tags/") (in .Permalink "/categories/") (in .Permalink "/archives/") (in .Permalink "/draft/")}}
  {{ else }}
  <url>
    <loc>{{ .Permalink }}</loc>{{ if not .Lastmod.IsZero }}
    <lastmod>{{ safeHTML ( .Lastmod.Format "2006-01-02T15:04:05-07:00" ) }}</lastmod>{{ end }}{{ with .Sitemap.ChangeFreq }}
    <changefreq>{{ . }}</changefreq>{{ end }}{{ if ge .Sitemap.Priority 0.0 }}
    <priority>{{ .Sitemap.Priority }}</priority>{{ end }}
  </url>
  {{ end }}
  {{ end }}
</urlset>

ハイライトした3行目でrobots.txtでDisallowと指定したディレクトリをsitemapから除外しています。

ogpタグの最適化

2025/02/10追加

Hugoでは記事一覧を表示しているページではopgタグがほとんど入っていません。
これらを最適化していきます。
※記事ページはHugoがいい感じに入れてくれる。
※あくまで自分の実装内容です。

まず\layouts\partials\meta.htmlに下記を記述します。

20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<!-- OGPとか -->
{{ if  .IsHome }}  
<!-- 共通で必要なタグ -->
<meta charset="utf-8">
<meta name="description" content="いにわの欠け耳  一般ゲーマーブログ。 ゲームとパソコン環境を弄る事が好きです。興味本位でやった何かしらを書き残しています。">
<!-- ここからOGP用のタグ -->
<meta property="og:site_name" content="{{ .Site.Title }}">
<meta property="og:title" content="{{.Title}}">
<meta property="og:description" content="いにわの欠け耳  一般ゲーマーブログ。 ゲームとパソコン環境を弄る事が好きです。興味本位でやった何かしらを書き残しています。">
<meta property="og:type" content="article">
<meta property="og:url" content="{{ .Permalink }}">
<meta property="og:image" content="https://iniwach.com/images/thumbnail/Author.png">

<!-- ここからTwitter用のタグ -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@iniwach">
<meta name="twitter:creator" content="@iniwach">
{{ end }}
<!-- ここまでOGP -->

これで記事一覧のページにだけmetaタグを追加できました。

おわりに

有識者様達が情報を残していたおかげで、そこまで苦労する事無く実装できました。
hugo serverを使えばローカル環境でテストができるので、実物を見ながら編集できるのは非常にやりやすかったです。

正直コードの中身はほぼ理解していませんが、参考記事の真似事とノリでなんとかできました。
また変更があればこの記事に追加･編集します。

更新履歴

  • 2025/02/06
    • コードブロック書式の追加
    • コンテンツの横幅についてを追加
    • RSSフィードの対応
  • 2025/02/07
    • Robots.txtについて追加
  • 2025/02/10
    • ogpタグについて追加
    • 記事一覧に更新日時の追加

関連記事

Hugoブログを運用してく上でちょっと便利な事達

参考にした記事

zzzmisa&rsquo;s blog : HugoのテーマRobustのカスタマイズver3
syocky tech blog : Hugoテーマ「Robust」をカスタマイズする
親方の徒然なる日々 : HugoでFontAwesomeを使用してみた。
gkzz.dev : アコーディオンメニューをHugoで作った
テストウフ : Hugoのブログにページネーションを追加した
TelBouzu&rsquo;s Blog : HugoのRobustでfaviconとかAdsenseの登録とか
OLD SUNSET DAYS : Hugoでrobots.txtとsitemap.xmlを作る
アロハル ： HUGOでmeta descriptionなどのmetaタグを最適化する方法