Hugoとは

静的サイトジェネレータ。MarkdownファイルをHTMLファイルへ変換し、Webサイトにできるツール。
公式サイト

説明の前提条件

Hugoアプリケーションの置場所：C:\Hugo\bin
上記フォルダにPATHを通すので、置場所は違っていても大した問題ではない。

Webサイトのソースの置場所：C:\Hugo\Sites
これも実際はどこでも構わない。

インストール

Hugoのバイナリを https://github.com/gohugoio/hugo/releases からダウンロードする。
Windows用のバイナリを探してダウンロード。

zipファイルを解凍したら、C:\Hugo\binをPATHに追加する。
もしexeファイルがhugo.exeではない場合、ファイル名を変更しておく。

稼働確認

コマンドプロンプトを起動し、hugo helpと入力する。以下のようなヘルプが出ればOK。

コマンドプロンプトは、「管理者として実行」しないとhugoコマンドが動作しない場合がある。
(おそらくログオンアカウントの権限による)

新しいサイトを作る

コマンドプロンプトで以下を実行。

cd C:\Hugo\Sites
hugo new site example.com

sitesフォルダ配下にexample.comというフォルダが作られ、他にも色々フォルダが出来ている。

設定ファイルを編集する

サイトフォルダ直下にあるconfig.tomlをテキストエディタで開くと、以下が既に書かれているので、適切な値へ直す。

config.toml

baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"

ソースをGitに登録する

example.comフォルダをGitリポジトリとする。

テーマを適用する

https://themes.gohugo.io/ へ行って、好きなテーマを探す。
テーマはすべてGitリポジトリにあって、使う場合はsubmoduleとして追加するか、cloneするか、頑張ってダウンロードするかのいずれかで取得する。
テーマを決めたら、themesフォルダ内に追加する。

git.exe submodule add   -- "https://github.com/dim0627/hugo_theme_beg.git" "themes/beg"

テーマを追加した後、config.tomlを編集し、themesフォルダ配下に作ったフォルダ名をテーマ名として指定する。

config.toml

theme = "beg"

新しい記事を書く

以下を実行。

hugo new <カテゴリ名>/my-first-post.md

カテゴリが無い場合は、指定なしでも良い。
ブログサイトの記事を書くなら、カテゴリ名はblogやpostsがよさそう。
mdファイルは、contentフォルダ配下に作成される。

moreタグを入れる

記事中にmoreタグを入れると、一覧画面での記事を途中で分割できる。
これをいれないと、サマリーでHTMLが有効にならない。タグを入れない場合、サマリーがテキストのみになる。

Content Summaries | Hugo

テストする

サイトフォルダ直下で以下を実行。

hugo server -D

-Dはdraftsが有効になるオプション。

ブラウザで http://localhost:1313/ にアクセスすると結果が見られる。

静的ページを生成する