• v0.109.0から設定ファイルはhugo.tomlになった
• 現在は後方互換性のためconfig.tomlでもOKだが、移行を推奨

設定ファイルのディレクトリ構造

https://gohugo.io/getting-started/configuration/#configuration-directory

• 設定ファイルは複数ファイルに分割できる
• 設定項目は下記のとおり

The root configuration keys are:
build, caches, cascade, deployment, frontmatter, imaging, languages, markup, mediatypes, menus, minify, module, outputformats, outputs, params, permalinks, privacy, related, security, server, services, sitemap, and taxonomies.

• 基本はHugoのデフォルトでよさそうだが、以下の設定ファイルは作ったほうがよい

/config/_default/
|-- hugo.toml
|-- languages.ja.toml
|-- menus.ja.toml
|-- params.toml

環境（＝用途）ごとに設定を変更できる

• 環境（＝用途）ごとにサブディレクトリを作成することで、設定を分岐できる
• デフォルト設定（config/_default/）は必ず読み込まれるので、違うところを書いておけばOK
• 例：ステージングとプロダクションで公開URLが異なる場合は、baseURLだけ変更すればOK

環境を指定して構築

$ hugo --environment staging
$ hugo -e production

• --environment / -eオプションで環境を指定して構築できる
• デフォルトではの環境は以下のとおり
  • hugo server = development
  • hugo = production
    となっている

https://blowfish.page/docs/configuration/

• 設定ファイルの構造化の具体例は、Blowfishのドキュメントがとても参考になった
• というか、これをそのまま真似た

https://gohugo.io/content-management/multilingual/#changes-in-hugo-01120

• v0.112.0で設定できる内容に変更があった
  • NG : languages.ja.dateFormat = "2006-01-02"
  • OK : languages.ja.params.dateFormat = "2006-01-02"
• 変数にアクセスする方法も変わった
  • NG : {{ site.Languages.Params.dateFormat }}
  • OK : {{ site.Params.dateFormat }}

• Page Bundle された画像は対象になる（ページ・リソース）
• /assetsに置いた画像は対象になる（グローバル・リソース）
• /staticに置いた画像は対象にならない

https://gohugo.io/content-management/page-bundles/

• ページリソースを取得する場合
  • index.md（or _index.md）があるディレクトリにある画像
  • 例として./sunset.jpgを取得した場合

{{ $image := .Resources.Get "sunset.jpg" }}

• グローバルリソースを取得する場合
  • 例として/assets/images/sunset.jpgを取得した場合

{{ $image := resources.Get "images/sunset.jpg" }}

• 違い
  • .Resources.Get
  • resources.Get

マッチする画像を検索

• リソースから画像を取得する場合、.Getを使ってピンポイントでファイル名を指定するのではなく、.GetMatchでキーワードを（正規表現で）指定することがよくある

https://github.com/nunocoracao/blowfish/blob/main/layouts/partials/hero/big.html

例として、Blowfishの部分テンプレートでやっていることを確認した

• L3: {{- $images : = .Resources.ByType "image" -}}
  • 画像ファイルを一括で取得
• L4: {{- $featured := $images.GetMatch "*feature*" -}}
  • 画像ファイルのリストを持った変数（$images）から、ファイル名にfeatureが含まれるファイルを取得
• L5 : {{- if not $featured}} ......
  • $featureがなかった場合、cover、thumbnailのいずれかが含まれるファイルを取得
• L14: ``{{ with .Resize "1200"x }}
  • ファイルがある場合、1200xにリサイズしてimgタグで表示する
• ファイルがなければ、表示しない（なにもしない）

OGPの設定

• opengraph.html
• og:title = .Title
• og.description = .Description / .Summary / .Site.Params.description
• og:type = article / website
• og:url = .Permalink
• og:image = $.Params.images > Featured画像 > カバー画像 = サムネイル画像 > $.Site.Params.images

og:image

• $.Params.images = フロントマターで設定; 最初の6枚を使用
• Featured画像 = Page bundle; ファイル名に*feature*を含む画像；1枚
• カバー画像 = Page bundle; ファイル名に *cover*を含む画像；1枚
• サムネイル画像 = Page bundle; ファイル名に *thumbnail*を含む画像；1枚
• $.Site.Params.images = サイト設定で設定; 1枚

ビルトインのOpenGraph設定

以前、詳しく調べてたみたいだけど、このURLも貼っておく

https://gohugo.io/templates/internal#open-graph

• サイト設定（config.toml）と各ページのフロントマターの設定の組み合わせ
• seriesのタクソノミーを使うと see also のページに使われるらしい

The series taxonomy is used to specify related “see also” pages by placing them in the same series.

{{ $css := resources.Get "css/main.css" }}
{{ $style := $css | resources.PostCSS }}

• /assets/css/main.css を読み込んで PostCSSに食べさせている
• たぶん（じゃなくても）、このように一行で書くこともできる
  • Goの書き方を間違えているかもしれないけど、やりたいことは分かるはず

{{ $style := resources.Get "css/main.css" | resources.PostCSS }}

• PostCSSの使い方

https://github.com/postcss/postcss-cli

• この使い方の例が、上と同じ

$ cat input.css | postcss -u autoprefixer > output.css  # Piping input & output

• cat input.css = 元のCSSを読み込む（パイプする）
• -u autoprefixer = プラグインを指定する（ここでは autoprefixer）
• > output.css = 変換したCSSを書き出す
• オプションは他にもあって、使うものは postcss.config.js に書いておくことができる

https://absarcs.info/how-to/install-tailwind-css-hugo/

• ここに書いてあることを試してみた
• postcss.config.jsをそのまま真似するとエラーが出る

ERROR 2022/03/11 05:36:54 POSTCSS: failed to transform "style.css" (text/css):
TypeError: Cannot read properties of undefined (reading 'config') at getTailwindConfig (node_modules/tailwindcss/lib/lib/setupTrackingContext.js:81:62)

• PostCSSのドキュメントにあるように require を使った書き方に修正するとエラーが出なくなった

module.exports = {
    plugins: [
        require('tailwindcss')({}),
        require('autoprefixer')({}),
    ]
}

• でもページにCSSが適用されていない。どうして？

自分でイチからやってもできなかったけれど、tellaというテーマを使ってみたら、問題なくできた。これをベースにちょっとずつ理解していこう。

https://github.com/opera7133/tella

predefinedなフォーマッタ

• v0.87.0以降のHugoに predefined なフォーマッタが追加された

{{ .Date | time.Format ":date_full" }}    // => Thursday, Mar 17, 2022
{{ .Date | time.Format ":time_full" }}    // => 11:41 pm UTC

• あまり（僕の好み的に）使えそうなフォーマッタはない
• 日本語の場合どういう表示になるか確認が必要

現在時刻

https://gohugo.io/functions/now/

• フッタにコピーライト表示する場合に使えるテンプレート

{{ now.Format "2006" }}

ビルトインな日時のフォーマット

• Hugoにビルトインされてる日時の変数には .Format が使える
• ビルトイン日時 .Date / .PublishDate / .Lastmod

https://gohugo.io/functions/format/

{{ .Date.Format "2006-01-02" }}

1. セクションテンプレートが自動で適用されるのは1の場合
2. 2の場合はフロントマターで type or layout を設定する必要がある

Index Pages: _index.md

https://gohugo.io/content-management/organization/#index-pages-_indexmd

1. _index.md に frontmatter と content を書くことができる
2. これらは list templates （ section / taxonomy / terms / homepage）で読み込むことができる

Section Templates

https://gohugo.io/templates/section-templates/

5つの kind それぞれのインデックスページがある。
日本語にしても分かりにくいだけなので、URLを見て理解するほうがよいと思う

1. home = トップ（/index.hdml）
2. page = 記事／ページ（/posts/my-post/index.html）
3. section = セクション（/posts/index.html）
4. taxonomy = タグ自体のインデックス（/tags/index.html）
5. term = タグの中の単語のインデックス（/tags/name/index.html）

Create kind-specific lists of content

https://gohugo.io/templates/section-templates/#sitegetpage-with-sections

{{ .Site.GetPage "ページの種類" "値" }}

• postsセクションの一覧が欲しい

{{ .Site.GetPage "section" "posts" ]]

• searchページの一覧が欲しい

{{ .Site.GetPage "page" "search" }}

• デフォルトでは.mdファイルの中でHTMLタグなどを使うことができない
• HTMLタグを使いたい場合は unsafe = true に変更しないといけない
  • FontAwesomeなどアイコンフォントを使う場合は、設定を変える必要があるかもしれない

[markup]
[markup.goldmark.renderer]
unsafe = true

UAからGA4に移行する手順

https://gigazine.net/news/20220317-prepare-with-google-analytics-4/

• GA4では gtags.js の利用が必須になっている
• gtags.jsを使っている場合は「既存のタグを使用してデータ収集を有効にする」を使えばOK

[sitemap]
changefreq = "daily"
priority = 0.5

• filenameはデフォルトのまま（sitemap.xml）でいいので書いていない
• changefreq は always / hourly / daily / weekly / monthly / yearly / never から選択する
• priority は 0.0 から 1.0 の間で指定する

Pretty URLs と Ugly URLs

• Hugoのデフォルトは pretty URL
• pretty URLはURL末尾がファイル名/となる（要するに index.html が作成される）
• ugly URLはURL末尾がファイル名.htmlとなる
• 好みの問題かもしれない

canonifyURLsとrelativeURLs

• コンテンツ内の基本的にそのまま処理される
• すべてを絶対パスに変換したい場合はconfig.tomlで設定できる
  • SEO対策のcanonical化とは関係がなさそう

canonifyURLs = true # デフォルトは false

• 相対パスに変換する設定もある
  • すでに絶対パスで入力されているものは変換されない

relativeURLs = true # デフォルトは false

日本語のカテゴリ名／タグ名

• カテゴリ／タグの値はそのままURLになる
• カテゴリ名／タグ名が日本語の場合、URLが日本語になる

https://example.com/categories/カテゴリ1/
https://example.com/categories/カテゴリ2/
https://example.com/tags/タグ1/
https://example.com/tags/タグ2/
https://example.com/tags/タグ3/

英語スラッグにしたい

• 日本語URLでもアクセスするには問題ない
• でも、URLを共有するときを考えると、URLは英語にしておきたい

https://example.com/categories/category1/
https://example.com/categories/category2/
https://example.com/tags/tag1/
https://example.com/tags/tag2/
https://example.com/tags/tag3/

ちょっと調べてみているがconfig.tomlでできることはなさそう🤔

代替手段（たぶん；まだテストしてない）

• フロントマターにはカテゴリ名／タグ名を英語で入力する

+++
title = "記事のタイトル"
categories = ["category1", "category2"]
tags = ["tag1", "tag2", "tag3"]
+++

• それぞれのカテゴリ名／タグ名に対して_index.mdを作成する

/content/categories/category1/_index.md
/content/categories/category2/_index.md
/content/tags/tag1/_index.md
/content/tags/tag2/_index.md
/content/tags/tag3/_index.md

• _index.mdのフロントマターに日本語タイトルを書く

+++
title = "カテゴリ1"
+++

たぶんこれでいけるはず😎

Taxonomy Templates

https://gohugo.io/templates/taxonomy-templates/

• taxonomy list pages
• taxonomy terms pages
• single page

Taxonomy List Templates

https://gohugo.io/templates/taxonomy-templates/#taxonomy-list-templates

• list pagesのテンプレートの変数／メソッドが使える

最初の項目だけ条件をつける

• 画像／動画をスライダーを使って表示するときに、最初の項目に class="active"をつける必要があった
• 配列のインデックスが 0（``{{ if eq $index 0}}...{{ end }} ）かどうかで判断することにした

<div class="carousel-inner">
    {{ range $index, $video := .Params.videos }}
    <div class="carousel-item {{ if eq $index 0 }}active{{ end }}">
        <video>
            <source src="{{ $video | relURL }} " type="video/mp4">
        </video>
    </div>
    {{ end }
</div>