【Hugoカスタマイズ講座】パート1：基本設定方法

2022年3月22日

こんにちは、ねむです。

今度は第二弾として、「Wordpress」から「Hugo」に変更する際に実際に取り組んできたことについて一挙公開したいと思います。

ブログを「Wordpress」から「Hugo」へ一新しました！現状のブログ運営の状況を整理するとともに、「ここがダメだな」とか「こうしたらもっと良くなるかな」といったポイントをまとめた上で、静的サイトジェネレータ（SSG）の「Hugo」を用いた構成に変更する際の構想について検討してみましたので、「Wordpress」から「Hugo」にブログ移行を検討中の方の参考になれば幸いです。

「Hugo」でのサイト作成における初期セットアップ等の作業手順については、既に有識者の方々がたくさんノウハウ記事を投稿されてるのと、Hugo - Quick Start🔗を見ればそれほど困る事はないと思いますので割愛します。

本記事では、管理人なりに取り組んだ内容にフォーカスして紹介したいと思います。

作業環境および前提

作業環境

OS：Windows10 Pro
開発環境：Visual Studio Code🔗
Git クライアント：TortoiseGit🔗 ※2022/3/22 時点最新 ver(v2.13.0)

利用対象 modules

Hugo Extended🔗 ※2022/3/22 時点最新 ver(v0.95.0)
Node.js🔗 ※2022/3/22 時点最新 ver(v16.14.2)

使用テーマ

Hugo Bootstrap Theme🔗 ※2022/3/22 時点最新 ver(v0.71.0)
Hugo Dynamic Tabs🔗

設定ファイル(toml/json/md)の変更

日本語化対応

導入直後の状態では、英語・中国語・台湾語などの言語向けにしか設定ファイルが用意されていないため、末尾に「_en」がついた英語版ファイルを複製し、以下ファイルを作成する。

config > _default > author.toml
config > _default > config.toml
config > _default > languages.toml ※複製ではなく日本語を追加
config > _default > menu.toml
config > _default > params.toml
content > about > index.md
content > archives > _index.md
content > categories > _index.md
content > contact > _index.md
content > faq > index.md
content > offline > index.md
content > posts > _index.md
content > privacy-policy > index.md
content > search > _index.md
content > series > _index.md ※任意
content > tags > _index.md
data > ja > faq > blog.json ※任意
i18n > ja.toml

あとは、各種設定ファイルに対して日本語化対応を実施するのみ。（これがかなり面倒ですが・・・）

一部、重要な設定内容についてサンプルとして紹介します。

config > _default > config.toml

# Multilingual mode
defaultContentLanguage = "ja"
# defaultContentLanguageInSubdir = true # If you use only one language comment this option
disableLanguages = ["en", "zh-cn" ,"zh-tw"] # For disable one or more language
# Turn on it if your content contains Chinese/Japanese/Korean Languages.
hasCJKLanguage = true

config > _default > languages.toml ※複製ではなく日本語を追加

[ja]
  languageName = "Japanese"
  languageCode = "ja"
  contentDir = "content"
  weight = 1

config > _default > params.toml

dateFormat = "2006年1月2日(Mon)"

[archive]
  dateFormat = "2006年1月2日" # Archive date format. Default to "Jan 2".

content > archives > _index.md

title = "過去記事"

i18n > ja.toml

[featured_posts]
other = "注目の記事"

[font_size]
other = "フォントサイズ"

[go_back]
other = "戻る"

[home]
other = "ホーム"

[language]
other = "言語"

記事初期ファイル(archetypes)の修正

初期状態からは変えてるものの、実態としては過去記事を踏襲して作成することが多いのであまり有効活用は出来ていないです。

archetypes > default.md

---
title: { { .Title } }
date: { { .Date } }
draft: true
comment: true
toc: true
pinned: false
categories:
  - 日記
tags:
  - xxx
images: [images/uploads/20xx/xx/xxxx.webp]
---

複数テーマの設定追加

一部の記事でタブ表示を使用する場面が出てきたので、Hugo Dynamic Tabs🔗を採用するにあたり、下記のような表記で複数のテーマ指定が可能になる。

config > _default > config.toml

theme = ["hugo-theme-bootstrap", "hugo-dynamic-tabs"]

robots.txt の自動出力設定の有効化

下記を有効化しない場合は、static ディレクトリ配下に直接作成した robots.txt を配置する必要がある。

config > _default > config.toml

enableRobotsTXT = true

パーマリンクの変更

まだ変更する可能性ありますが以下に設定を変更。

各記事に slug の設定をしていない場合に日本語の羅列が入ってしまうのがちょっと気になっている。。

config > _default > config.toml

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

RSS フィードに出力される件数の設定

初期状態では入っていない設定ですが、index.xml を出力するソース上は下記パラメータで設定可能なロジックを設けていたので追加。

config > _default > config.toml

[services.rss]
  limit = 20

メニュー表示の変更

不要な外部リンクを多数削除して、以下のような必要となるメニューのみに見直し。

config > _default > menu.toml

[[main]]
  name = "サポート"
  identifier = "support"
  weight = 5
  pre = '<i class="fas fa-fw fa-chevron-circle-down"></i>'

[[footer]]
  name = "サポート"
  identifier = "support"
  weight = 1

[[footer]]
  name = "記事一覧"
  identifier = "posts"
  weight = 2
[[footer]]
  name = "過去記事一覧"
  identifier = "archives"
  parent = "posts"
  url = "/archives/"
  weight = 1
  pre = '<i class="fas fa-fw fa-file-archive"></i>'
[[footer]]
  name = "ジャンル一覧"
  identifier = "categories"
  parent = "posts"
  url = "/categories/"
  weight = 2
  pre = '<i class="fas fa-fw fa-folder"></i>'
[[footer]]
  name = "タグ一覧"
  identifier = "tags"
  parent = "posts"
  url = "/tags/"
  weight = 3
  pre = '<i class="fas fa-fw fa-tags"></i>'

タイトルセパレーターの変更

「-」から「|」に変更。

config > _default > params.toml

titleSeparator = "|" # Title separator. Default to "-".

ロゴファイル表示の無効化

サイトトップにロゴ画像ファイルを表示する機能があるが、不要なので無効化。

config > _default > params.toml

logo = false # Disable Logo

ピン留めする記事件数の変更

記事のピン留め機能はあまり使わないので、「2 件」から「1 件」に変更。

config > _default > params.toml

# pinnedPost = false # Turn on/off pinned posts.
pinnedPostCount = 1 # The number of pinned posts.

ディレクトリ構成の変更

記事コンテンツファイルのパス変更

記事フォルダは「年月単位」で管理したいので、以下の通り各月のフォルダを配置。

content
├─about
├─archives
├─categories
├─contact
├─faq
├─offline
├─posts
│  ├─2009-05
│  │  └─2009-05-01-xxx.md
│  ├─2009-06
│  ├─2009-07
│  └─...
├─privacy-policy
├─search
├─series
└─tags

画像ディレクトリのパス変更

画像ファイルの格納先フォルダを「年」>「月」の構成になるよう変更。

static
└─images
    ├─icons
    └─uploads
        └─2009
           ├─05
           ├─06
           ├─08
           └─12

assets ファイルの変更

Google Adsense 用 html を以下のとおり作成して配置。

初期状態だと、サイト表示されると同時に広告が表示されてしまうので、

ページスクロール状態に応じた遅延表示(lazyload)により、Lightscore スコアも大きく改善。

layouts > partials > assets > google-adsense.html

{{- with .Site.Params.googleAdsense -}}
<script>
  //<![CDATA[
  //lazy load ads
  var lazyloadads = false;
  window.addEventListener(
    "scroll",
    function () {
      if (
        (document.documentElement.scrollTop != 0 && lazyloadads === false) ||
        (document.body.scrollTop != 0 && lazyloadads === false)
      ) {
        (function () {
          var ad = document.createElement("script");
          ad.type = "text/javascript";
          ad.async = true;
          ad.crossorigin = "anonymous";
          ad.src =
            "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client={{ . }}";
          var sc = document.getElementsByTagName("script")[0];
          sc.parentNode.insertBefore(ad, sc);
        })();

        lazyloadads = true;
      }
    },
    true
  );
  //]]>
</script>
{{- end -}}

Google Analytics

Google Analytics 用 assets ファイルを以下の通り変更。

従来の非同期仕様(async)から「GA4 タグ」が読み込めるものに修正。

layouts > partials > assets > google-analytics.html

{{ template "_internal/google_analytics.html" . }}

おわりに

前編としてはひとまずここまでの内容についてのシェアとなります。

次回＜後編＞についてはもっとコアな仕様変更について紹介したいと思います。

では、またね。