gohugoio/hugo: The world’s fastest framework for building websites.



Page Variables

Page Variables

Page-level variables are defined in a content file's front matter, derived from the content's file location, or extracted from the content …

カテゴリ一覧 (categories/) を表示するときtaxonomycategoriescategories
特定のカテゴリ (categories/XXX) を表示するときtermcategoriescategories
タグ一覧 (tags/) を表示するときtaxonomytagstags
特定のカテゴリ (tags/YYY) を表示するときtermtagstags


  • .IsSection : true if .Kind is section
  • .IsPage: always true for regular content pages.
  • .IsHome: true in the context of the homepage.


  • technologies という名前のセクション名に記事を配置しているとする。意識していなければ、デフォルトは posts に作成される。
  • ページデザインのレイアウトは layouts/original_blog を適用しているとする。
    • レイアウトの指定は記事本文(ページ)の Markdown ファイルに記載してもよいし、セクション配下に一律で適用したい場合は、セクションディレクトリ直下の _index.mdcascade を用いて以下の記載をするのが手っ取り早い。
title: "Technologies (技術ブログ)"
- type: "original_blog"

Docsy theme

  • Hugo Modules に依存している。
  • hugo server したときに Themeファイルのダウンロードがされる
    • 依存関係を変更していなくても一定日数が過ぎて起動すると改めてダウンロードが走るのでキャッシュ関連の動作がある模様
    • 正しくダウンロードできたはずなのに以下の通りエラーが出ることあり
Error: Error building site: "/Users/path/to/project/content/docs/article/": failed to extract shortcode: template for shortcode "alert" not found

このケースでは、 Docsy が提供している shortcode が見つからないとのこと(何故か)。手元の macOS環境にて発生。

hugo mod clean にてキャッシュクリアしたら起動できる(細部未確認のため再現性不明)

Twitter Card



1. Define a Variable Independent of Context

The most easily overlooked concept to understand about Go Templates is that {{ . }} always refers to the current context.

  • In the top level of your template, this will be the data set made available to it.
  • Inside an iteration, however, it will have the value of the current item in the loop; i.e., {{ . }} will no longer refer to the data available to the entire page.

2. Use $. to Access the Global Context

$ has special significance in your templates. $ is set to the starting value of . (“the dot”) by default. This is a documented feature of Go text/template. This means you have access to the global context from anywhere. Here is an equivalent example of the preceding code block but now using $ to grab .Site.Title from the global context:


To lazy load images within Hugo two things are required:

  • Add the loading="lazy" attribute
  • Where possible add the image size to prevent repainting
Native image lazy loading

Native image lazy loading

A little bit of history on the lazy loading attribute and how to implement it on a Hugo website

Native lazy-loading of images on Hugo based website |

Native lazy-loading of images on Hugo based website |

The implementation of lazy-loading images using Hugo is equally simple as adding it to an HTML file and you don’t have a good reason not to …

Markdown Render Hooks

Markdown Render Hooks

Markdown Render Hooks

Render Hooks allow custom templates to override markdown rendering functionality.



  • ページ全てをRSSにしてしまうと意図せず余計なページを含んでしまうことがあるので、明示的に対象セクションをしておいたほうが間違いが少ない
  • $pages に表示したい対象のページを where で絞り込んで変数化
  • 繰り返し処理 range の部分では .ByParam "date" を用いてソートキーとして利用
    • 最後に .Reverse することで逆順(最新日付を最上部)としている
{{/* $filterSections には任意のセクション名を入れておく(ホワイトリスト式) */}}
{{ $filterSections := (slice "posts") }}

{{- $pages = where (.Site.RegularPages) "Section" "in" $filterSections -}}

{{/* 中略 */}}

{{ range ($pages.ByParam "date").Reverse }}



{{ $.Scratch.Set "counter" 0 }}
  {{range sort .Params.employees}}
    {{ $.Scratch.Set "counter" (add ($.Scratch.Get "counter") 1) }}
    I am the number {{$.Scratch.Get "counter"}} in loop!


JSON-LD 構造化データの作成や更新日の表現方法

[Hugo] Docsy テーマのタグ一覧ページを Noindex にする方法

Hugo で Docsy テーマのタグ一覧ページを Noindex にする方法

[Hugo] モバイル検索結果へサムネイル画像を表示 - PageMapデータ

Hugo minify により HTMLコメントが削除されてしまうなかで PageMap 構造データをコメント表示するためのハック