Hugo Cheet Sheet

久々にHugoを使ったら使い方を忘れてたので、 最低限の機能を最速で使うためのチートシートを残しておきます。 まずは以下を実行してサイトを作るための雛形を作ります。

hugo new site my_site

my_siteディレクトリでは以下のようなディレクトリ構成でサイトを作る。 index.md/_index.md と、list.html/single.html あたりの仕組みがポイントです。

my_site/
  content/  <----- 記事やページの中身はここに置く
    _index.md  <----- 配下ディレクトリを作りたい時はこの _index.md を使う
    posts/
      _index.md  <--- //example.com/post/
      2011.md  <----- //example.com/post/2011/
      2012.md  <----- //example.com/post/2012/
      11/  <--------- //example.com/post/2012/11/  (index.mdがないと閲覧不可)
        foo.md  <---- //example.com/post/2012/11/foo/
      help/  <------- //example.com/help/
        index.md  <-- 配下ディレクトリがいらないなら index.md を使う
        bar.md  <---- //example.com/help/bar/
    terms.md  <------ //example.com/terms/

  layouts/  <----- テーマ設定はここで書く
    _default/  <------ デフォルトのレイアウト
      list.html  <---- _index.md のページに適用するレイアウト
      single.html <--- その他のページに適用するレイアウト
    posts/  <--------- content/posts/ に対応したレイアウト
      li.md  <-------- single.htmlやlist.html から呼ぶ部品レイアウトも置ける
      list.md            ex: {{ .Render "li" }}
      single.md
    partials/  <------ レイアウトの部品  ex: {{ partial "sidebar.html" . }}
    shortcodes/  <---- コンテンツの部品  ex: {{< tweet 877500564405444608 >}}

  themes/  <------ 外部テンプレートを置く、layouts/ のほうが優先度が上
  archetypes/  <-- content/*.md の markdown の雛形を設定するディレクトリ
  static/  <------ 静的ファイルはここに置く

content/*.md の書き方の基本はこんな感じ。高機能なので公式マニュアルを参照しよう。

---
title: "This is a content file in HTML"  <-- ここに変数を書く
draft: true
---
<div>
  <h1>Hello, Hugo!</h1>  <-- Markdown/HTML で記事を書く
</div>

サイトを作り終わったら以下のコマンドのどちらかで確認できます。

hugo            # my_site/public/ に完成品を出力
hugo server -D  # localhost にサイトを出力

Tips

1. markdown に HTML を書きたい

以前は書けましたが、ver 0.60.0 から エラーが出るようになりました。書かない人はいるのだろうか…。 この問題は、config.toml に以下の内容を書くことで回避できます。

[markup.goldmark.renderer]
  unsafe = true

2. markdown に JavaScript を書きたい

3. ページ生成を高速化したい

4. リンク切れチェックしたい → raviqqe/muffet

5. sitemap.xml の changefreq / priority をページ単位で設定する

もっと様々な機能があるので、残りの部分についてはやはり公式マニュアルをどうぞ。