Go言語製の高速な静的サイトジェネレーター。
https://gohugo.io/documentation/
通常版では、SASS/SCSSサポートがついていないので、必要であれば明示的に拡張版をインストールしないといけない。
brew install hugo
で拡張版がインストールされるようだ。参考:
GitHub Releasesから _extended
付きのバイナリを取得する。
git clone https://github.com/gohugoio/hugo.git
cd hugo
go install --tags extended
Snapの場合:
snap install hugo --channel=extended
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 のページも表示される
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_TITLE
で title
を上書き[params]
の設定値であれば、 HUGO_PARAMS_
をprefixとして設定すればよいそうだNOTE:
HUGO_PARAMS_GCS_ENGINE_ID=""
のようにしても、Googleカスタム検索エンジンを無効化できなかった設定ファイルの設定項目について。
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/
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を作ると便利かも。
参考:
記事の作成・編集で使う基本的な機能などについて書く。
現在は記事の近くに画像を置いて、相対パスで参照できる。
<!-- "\" は除いて書くこと -->
{{\<figure src="image.png" alt="blur">}}
See #figure
https://gohugo.io/content-management/shortcodes/
便利な機能が {{\<function ... >}}
という構文のShortcodeという形式で提供されている。
自分で独自のShortcodeを作成することもできる。
https://gohugo.io/content-management/shortcodes/#figure
HTML5の<figure>要素を作る。
パラメータ | 意味 |
---|---|
src | 画像のURL(パス)。必須 |
alt | 画像非表示時の代替テキスト |
title | 画像タイトル |
ワークアラウンドでの対応が必要。
Multi-level sections (tree) · Issue #465 · gohugoio/hugo
ワークアラウンド例:
参考:
MEMO: