なんとなく、はてなブログからHugoに移行した。
以下、自分用のメモ（公式ドキュメントをコピペしただけの作業ログなので、公式を見た方がいい）。

環境構築 on Ubuntu18.04

Install

Hugoのインストールは、公式を見るとhomebrewを推奨してるっぽい
(aptにもあるが、バージョンが古い？) Homebrewがインストールされていない場合は、まず Homebrewをインストール する必要がある。

1
2
3

brew install hugo
hugo version
# Hugo Static Site Generator v0.75.1/extended linux/amd64 BuildDate: unknown

サイトの作成

カレントディレクトリの下に[site_name]というディレクトリが作成される

1
2
3
4

hugo new site [site_name]
# gitで管理する場合
cd [site_name]
git init

テーマの設定

https://themes.gohugo.io から適当に良さそうなテーマを探して使う

1
2
3
4
5
6
7
8

git submodule add https://github.com/olOwOlo/hugo-theme-even themes/even
echo 'theme = "even"' >> config.toml
# テーマの設定ファイルをコピー
cd [site_name]
cp themes/even/exampleSite/config.toml config.toml
# 適当にconfig.tomlのautherなどを書き換え
# evenのテーマだと、タグとカテゴリーが設定できるが片方だけでいいので、カテゴリーは削除した
# defaultContentLanguageをjaに設定

記事の作成

1
2
3
4

# content/<CATEGORY>/<FILE>.<FORMAT> に追加される
hugo new posts/my-first-post.md
# evenのテーマだとpostsではなくpostを使わないとだめらしい
hugo new post/my-first-post.md

ローカルでプレビュー

1
2
3

hugo server -D
# -Dオプションで下書きも確認できる
# http://localhost:1313/ で確認できる

HTML生成

1

hugo -D # ./public/ に生成される

GitHub Pagesでホスティング

GitHub Pagesでは、

  • masterブランチにdocsディレクトリを作り、そこにhtmlを置く （publishDir = "docs"に設定すると良い）
  • htmlを置く用のgh-pagesブランチを作る

の2通りの方法がある。
前者の方法だと、サイトの生成元のファイルと生成したサイトが混ざってしまう。
後者の方法であれば、Hugeのソースコードと生成したサイトを別ブランチで管理できる。

以下では後者の方法を説明:

  • config.tomlにURLを設定
1

baseURL = "https://nohzen.github.io/Hugo_blog"

.gitignoreにpublicを追加(masterでは無視したいので)

1
2

/public/
/resources/_gen
  • 空のgh-pagesブランチ作成
1
2
3
4
5

git checkout --orphan gh-pages
git reset --hard
git commit --allow-empty -m "Initializing gh-pages branch"
git push origin gh-pages
git checkout main
  • git worktreeでmasterとgh-pagesブランチを同時に扱えるようにする
1
2
3
4
5

rm -rf public
git worktree add -B gh-pages public origin/gh-pages
hugo
cd public && git add --all && git commit -m "Publishing to gh-pages" && cd ..
git push origin gh-pages

最後の手順は毎回やるのはめんどうなので、shellにしておく。

baseURLにsubdirectoryがある場合に画像のリンクが正しくない問題

config.tomlのURLが以下のようにsubdirectoryを含む場合に画像のリンクがおかしくなり、画像が表示されない。

1

baseURL = "https://nohzen.github.io/Hugo_blog"

とりえあず、こちらを参考に

1

CanonifyURLs=true

をconfig.tomlに追加してURLを絶対Pathにすることで画像が表示されるようになった。 canonifyURLsはdupricateらしいので、あまり良い解決策では無さそう。

参考