Hugo

HUGOをインストールする

macでHUGOをインストールする場合は、Homebrewを使うと簡単です。

% brew install hugo

バージョンを表示する

バージョンを確認します。

hugo version

macで実行すると、こんな感じに表示されます。

% hugo version
Hugo Static Site Generator v0.70.0/extended darwin/amd64 BuildDate: unknown

新しいサイトを立ち上げる

hugo new site <path>

ページ作成

$ hugo new <markdown file>

例えば、blogディレクトリ内にtest.mdという記事を作りたければ

hugo new blog/test.md

と入力すると、記事が作成されます。

テンプレートを使って新しいページを作成する

hugo new contentコマンドを作成すると、archetypesにあるテンプレートファイルを使用してページを作成します。

デフォルトとは異なるarchetypeテンプレートを使用してページを作成したい時は、--kindオプションを使用します。

hugo new content --kind tutorial blog/new-tech.md

サーバを起動する

$ hugo server -w

無事にサーバが起動したら、ブラウザからlocalhost:1313でアクセスできる。

サーバを終了させるにはCtrl + Cを押下する。

ポート番号を指定して起動する

サーバ起動時に、オプションでポート番号を指定できる。

$ hugo server -p=8000

ビルド

$ hugo

トップページの編集

トップページを編集するには、layoutsフォルダ内のindex.htmlを編集する。

CSSの編集

static/css/custom.css

関連記事を表示させる

公式サイトにも掲載されていますが、まずpartials内にrelated.htmlを作成します。

{{ $related := .Site.RegularPages.Related . | first 5 }}
{{ with $related }}
<h3>See Also</h3>
<ul>
	{{ range . }}
	<li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
	{{ end }}
</ul>
{{ end }}

そして、表示させたいテンプレート内で、

{{ partial "related.html" . }}

と挿入すると、その部分に関連記事が表示されます。

表示件数を変更する

8件分表示させたければ、firstの後ろを8に変更します。

{{ $related := .Site.RegularPages.Related . | first 8 }}

Markdown内のHTMLを表示させる

Hugo 0.60.0以降では、Markdown内に記述したHTMLは<!-- raw HTML ommited -->に変換されてしまい、表示されなくなります。 これを、表示させるようにするには、config.toml内に以下を追記します。

[markup.goldmark.renderer]
unsafe= true

See Also