Zenn.devに書くほどでもない個人的なメモを残すために，Hugo + GitHub Pagesで静的サイトを構築しました．

実は以前Jekyllで静的サイトを構築したことがありましたが，Hugoの方が遥かに高速にビルドできるように感じました．

作り方

環境

Hugo

以下のコマンドでHugoをインストールしました．

brew install hugo

blogというディレクトリを作成しました．

hugo new site blog

Harbor

https://github.com/matsuyoshi30/harborがシンプルで素敵だったのので拝借しました．

cd themes
git submodule add https://github.com/matsuyoshi30/harbor.git harbor

公式のconfig.tomlから少しだけ修正しました．

theme = "harbor"
baseurl = "https://kakeami.github.io/blog/"
title = "Amiblog"
paginate = 3
languageCode = "jp"
DefaultContentLanguage = "jp"
enableInlineShortcodes = true
footnoteReturnLinkContents = "^"
publishDir = "docs"

# Optional
# If you use googleAnalytics, you set top-level options in config.toml to the beginning of the config file like other top-level options.
googleAnalytics = "UA-XXXXXXXX-XX"
# and disqus too.
disqusShortName = "yourdisqusshortname"

[params.goatcounter]
  domain="stats.domain.com"

[params.matomo]
  domain="stats.domain.com"
  id="123"

[Author]
  name = "kakeami"

[outputs]
  section = ["JSON", "HTML"]

[[params.nav]]
  identifier = "about"
  name = "About"
  icon = "fas fa-user fa-lg"
  url = "/about/"
  weight = 3

[[params.nav]]
  identifier = "tags"
  name = "Tags"
  icon = "fas fa-tag fa-lg"
  url = "tags"
  weight = 3

[[params.nav]]
  identifier = "categories"
  name = "Category"
  icon = "fas fa-folder-open fa-lg"
  url = "categories"
  weight = 3

#[[params.nav]]
#  identifier = "search"
#  name = "Search"
#  icon = "fas fa-search fa-lg"
#  url = "search"
#  weight = 3

#[[params.nav]]
#  identifier = "archives"
#  name = "Archives"
#  icon = "fas fa-archive fa-lg"
#  url = "archives"
#  weight = 3

# copy paste this block and change for each social media to add how many ever social media
# acounts/links you want
[[params.social]]
  name="name of social media"
  url="link to social media"
  icon="A icon from https://fontawesome.com/"

[params.logo]
  url = "icon.png" # static/images/icon.png
  width = 50
  height = 50
  alt = "Logo"

当面は日本語で書きたかったので，languageCode等はjpにしました．

Qiita, Hugo + GitHub Pages（独自ドメイン適応）でサイトを作成・公開する を参考に，publishDirは"docs"にしました．

searchおよびarchivesは自分のデフォルト環境では意図通り動作しなかったため，一旦コメントアウトしておきました．

kakeami.github.ioは別の用途に残して置きたかった（現時点でアイデアがあるわけではないけど）ため，kakeami.github.io/blog/をbaseurlとして指定しました．

GitHub Pages

blogリポジトリを作成し，Settings > Pagesから公開設定を行いました． 詳細は GitHub Docs, GitHub Pages サイトの公開元を設定する を参照いただければと思います．

デプロイ用スクリプト

毎回hugoとタイプするのが面倒だったので，pushまでまとめて実行するpublish.shを作りました．

#!/bin/sh

hugo
git add . -A
git commit -m "$1"
git push origin master

感想

以前Jekyllで静的サイトを構築したことがありましたが，より高速にビルドできてとても快適です．

今後の課題

参考

Hugo  GitHub Pages  Blog