Hugo

Go言語製の高速な静的サイトジェネレーター。

Documentation

https://gohugo.io/documentation/

Getting Started

Install

拡張版のインストール

通常版では、SASS/SCSSサポートがついていないので、必要であれば明示的に拡張版をインストールしないといけない。

参考:

バイナリをインストール

GitHub Releasesから _extended 付きのバイナリを取得する。

ソースからインストール
git clone https://github.com/gohugoio/hugo.git
cd hugo
go install --tags extended
Linux

Snapの場合:

snap install hugo --channel=extended

Quickstart

https://gohugo.io/getting-started/quick-start/

# 新しくサイトを作る
hugo new site your-new-site

# テーマを用意する
cd your-new-site
git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
echo 'theme = "ananke"' >> config.toml

# コンテンツを作成する
hugo new posts/my-first-post.md

# hugo serverを起動
hugo server -D
## -D を付けることで draft のページも表示される

Configuration

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

参考:

設定ファイル

デフォルトでは config.toml → config.yaml → config.json の順で参照される。

  • hugo --config CONFIG オプションで任意の設定ファイルを指定可能
  • hugo --config a.toml,b.toml のように、カンマ区切りで複数ファイルを指定することも可能

ディレクトリ構成

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

  • 設定ファイルを config/ ディレクトリ(--configDir DIRECTORY で変更可能)に配置することで複数ファイルに分割できる
  • --environment ENVIRONMENT オプションと組合せて、設定ファイルを更に高度に組織化することもできる。
    • config/ENVIRONMENT/ 下の設定がマージされる
  • ローカリゼーション対応も可能

Example:

├── config
│   ├── _default
│   │   ├── config.toml
│   │   ├── languages.toml
│   │   ├── menus.en.toml
│   │   ├── menus.zh.toml
│   │   └── params.toml
│   ├── production
│   │   ├── config.toml
│   │   └── params.toml
│   └── staging
│       ├── config.toml
│       └── params.toml

参考:

環境変数による設定

https://gohugo.io/getting-started/configuration/#configure-with-environment-variables

  • トップレベルの設定値は、 HUGO_TITLE="hoge hoge" hugo のように上書きできるようだ。 HUGO_TITLEtitle を上書き
  • [params] の設定値であれば、 HUGO_PARAMS_ をprefixとして設定すればよいそうだ

NOTE:

  • 2020-05-31 おそらくこのやり方では設定ファイルで設定した値の削除/無効化はできないと思われる。Docsyで HUGO_PARAMS_GCS_ENGINE_ID="" のようにしても、Googleカスタム検索エンジンを無効化できなかった

設定項目

設定ファイルの設定項目について。

Table Of Contents

https://gohugo.io/getting-started/configuration-markup/#table-of-contents

※Goldmarkのみ

[markup]
  [markup.tableOfContents]
    endLevel = 3
    ordered = false
    startLevel = 2

コンテンツ管理

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

Archetypes

https://gohugo.io/content-management/archetypes/

「archetype」……典型、原型。アーキタイプ

ページテンプレート。

Spec:

  • archetypes/${kind}.md として配置する
  • ${kind}/foo.md を作ると、 archetypes/${kind}.md が使われる
  • hugo new -k $kind foo.md のようにarchetypeを指定可能

テンプレート機能を使っていい感じのarchetypeを作ると便利かも。

参考:

Writing Pages

記事の作成・編集で使う基本的な機能などについて書く。

画像の挿入

現在は記事の近くに画像を置いて、相対パスで参照できる。

<!-- "\" は除いて書くこと -->
{{\<figure src="image.png" alt="blur">}}

See #figure

Shortcodes

https://gohugo.io/content-management/shortcodes/

便利な機能が {{\<function ... >}} という構文のShortcodeという形式で提供されている。

自分で独自のShortcodeを作成することもできる。

figure

https://gohugo.io/content-management/shortcodes/#figure

HTML5の<figure>要素を作る。

パラメータ意味
src画像のURL(パス)。必須
alt画像非表示時の代替テキスト
title画像タイトル

Known Issues

完全なページツリーを描画する機能がない

ワークアラウンドでの対応が必要。

Multi-level sections (tree) · Issue #465 · gohugoio/hugo

ワークアラウンド例:

参考:

MEMO:

Child Pages