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