Hugoのメモ

Hugoとは

静的サイトジェネレーターの一つ。ビルドは1記事1msと非常に高速。

Go言語（Golang）がベースだが、Go言語の知識がなくても構築するのには特段問題ない。

公式ドキュメント

内部テンプレート（Internal Templates）

<!-- 定義 -->
<!-- {{ template "_internal/<TEMPLATE>.<EXTENSION>" . }} -->
<!-- 例 -->
{{ template "_internal/opengraph.html" . }}

利用可能な内部テンプレートはこちらで確認。

GOテンプレート

https://pkg.go.dev/text/template

Hugoテンプレート

HugoはGoの html/template と text/template ライブラリをテンプレートのベースとして使用しています。

以下はGoテンプレートの入門編。

Goテンプレート内では以下のようにコメントすることができます。コメントとして記述した部分は、HTML ファイルに出力するときに削除されます。

{{/* ... */}}

<!-- これでもいい -->
{{/* {{ ... }} */}}

※ list.html, single.htmlなどのテンプレートファイル、パーシャル、ショートコード中にコメントを書いておきたい時は、普通のHTMLコメントで問題ありません。

HTMLコメント

あえて、ビルドする際にコメントを残したい場合は、以下のようにprintfとsafeHTMLをパイプで繋ぎます。

{{ printf "<!-- Our website is named: Hoge -->" | safeHTML }}

<!-- コメント内にサイト内データが必要な場合は以下のようにすればOK -->
{{ printf "<!-- Our website is named: %s -->" .Site.Title | safeHTML }}

Goテンプレートを含むHTMLコメント

Goテンプレートを含んでいる場合、HTMLコメントを行ってもコメント内に含まれるコードにエラーが有ると、ビルドが失敗します。

<!-- {{ $author := "Emma Goldman" }} was a great woman. -->  <!-- ← コメントアウトしているので出力されたファイルには残らないけど、内容は評価されているので... -->
{{ $author }}  <!-- "Emma Goldman" と出力される -->

変数

テンプレート内で変数を定義することができる。

{{ $変数名 := 初期値 }}

数字

{{ $num := 0 }}

文字列

{{ $string := "String" }}

配列（スライス）

{{ $array := slice "Val1" "Val2" }}

<!-- 参照方法 -->
{{ index $array 0 }}

マップ

{{ $map := dict "Key1" 100 "Key2" 200 }}

<!-- 参照方法 -->
{{ $map.Key1 }} <!-- こちらは、キー名がアルファベットやアンダースコア（_）で始まっている場合にしか使用できないので注意 -->
{{ index $map "Key1" }}

<!-- キーがセットされているかの確認 -->
{{ isset $map "Key1" }} <!-- isset を使用する -->

イテレーター

range

マップ、配列（スライス）を反復処理するのに使用する。

{{ range $array }}
    {{ . }} <!-- この . は$arrayを表しています -->
{{ end }}

{{ range $elem_val := $array }} <!-- 配列の要素の値を変数として宣言しています -->
    {{ $elem_val }}
{{ end }}

{{ range $elem_index, $elem_val := $array }}  <!-- 配列の要素のインデックスと値を変数として宣言。最初に宣言された変数がインデックス -->
   {{ $elem_index }} -- {{ $elem_val }}
{{ end }}

{{ range $elem_key, $elem_val := $map }} <!-- マップのキーと値を変数として宣言。最初に宣言された変数がキー -->
   {{ $elem_key }} -- {{ $elem_val }}
{{ end }}

{{ range $array }}
    {{ . }}
{{else}}
    <!-- $array が空のときはelseとなる -->
{{ end }}

条件分岐

with

{{ with .Params.title }} <!-- .Params.titleが存在するか。存在しなければこのブロックをスキップする -->
    <h4>{{ . }}</h4> <!-- with ではスコープ内で.Params.titleを表示するには . と記載する -->
{{ end }}

{{ with .Param "description" }}
    {{ . }}
{{ else }} <!-- "description" が設定されていない場合はこちらが処理されます  -->
    {{ .Summary }}
{{ end }}

if

<!-- if -->
{{ if isset .Params "title" }}
    <h4>{{ index .Params "title" }}</h4> <!-- with と違い、. ではダメ。 -->
{{ end }}

<!-- if .. else -->
{{ if (isset .Params "description") }}
    {{ index .Params "description" }}
{{ else }}
    {{ .Summary }}
{{ end }}

<!-- if .. else if .. else -->
{{ if (isset .Params "description") }}
    {{ index .Params "description" }}
{{ else if (isset .Params "summary") }} <!-- with では使えない -->
    {{ index .Params "summary" }}
{{ else }}
    {{ .Summary }}
{{ end }}

and & or

<!-- AND  => and (条件1) (条件2) -->
<!-- OR   => or (条件1) (条件2) -->
{{ if (and (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")) }}

パイプ

GOテンプレートの最も強力なコンポーネントの1つで、アクションを次々に積み重ねることができる。関数呼び出しを連鎖させるのに不可欠。

ただし、1つの値しか扱えないという制限があり、その値は次のパイプラインの最後のパラメータになります。

shuffle を使った例

{{ shuffle (seq 1 5) }}

<!-- パイプを使うと、以下のように書き換えることができる -->
{{ (seq 1 5) | shuffle }}

index を使った例

{{ index .Params "disqus_url" | html }} <!-- "disqus_url" というページパラメータにアクセスして、HTMLをエスケープしている -->

or と isset を使った例

{{ if or (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr") }}
Stuff Here
{{ end }}

<!-- パイプを使うと、以下のように書き換えることができる -->
{{ if isset .Params "caption" | or isset .Params "title" | or isset .Params "attr" }}
Stuff Here
{{ end }}

フロントマター

https://gohugo.io/content-management/front-matter/

関数

index

データのインデックス、またはキーを検索する。

{{ index .Params "disqus_url" }} <!-- "disqus_url" というページパラメータにアクセス -->

isset

パラメータが設定されているか真偽値を返す。設定されていれば true 。

{{ isset .Params "title" }}

seq

連番の整数の配列を作ることができます。

<!-- seq FIRST INCREMENT LAST -->
{{ seq 5 }}      <!-- [1, 2, 3, 4, 5] -->
{{ seq 1 5 }}    <!-- [1, 2, 3, 4, 5] -->
{{ seq 2 2 10 }} <!-- [2, 4, 6, 8, 10] -->

{{ range after 3 (seq 10)}} <!-- after と組み合わせることで 開始位置をずらす事ができる -->
  {{ . }} <!-- 4 5 6 7 8 9 10 -->
{{ end }}

shuffle

配列（スライス）の値をシャッフルする。

{{ shuffle (seq 1 5) }}

コマンド

https://gohugo.io/commands/

サイト生成

hugo new site サイト名

現在のディレクトリに指定したサイト名のフォルダが生成され必要なファイルが生成されます。

コンテンツファイル生成

hugo new パス/ファイル名.md

contentディレクトリ配下に指定したパスにコンテンツファイルを生成します。このファイルには予めメタデータ（フロントマター）が含まれます。

サーバー起動

hugo server

ローカルサーバーを起動することができます。

オプション

-D, –buildDrafts	draft: true のコンテンツファイルも含めて出力
–help	オプション一覧を表示できる

ビルド

hugo

publicディレクトリにファイルをビルドする。

オプション

-D, –buildDrafts	draft: true のコンテンツファイルも含めて出力
–cleanDestinationDir	存在しないファイルを、出力先フォルダから削除する
–minify	圧縮されたファイルを出力する