Hugo template と GitHub Pages で homepage を作成する

Environment

• WSL2 Ubuntu 20.04.04
• Hugo Static Site Generator v0.68.3

GitHub Pages の利用 pattern

pattern	source	path
<user[org]>.github.io	other repository	https://<user[org]>.github.io/
<user[org]>.github.io sub folder	same repository	https://<user[org]>.github.io/<foo>/
/docs folder	same repository	https://<user[org]>.github.io/<repo>/
gh-pages branch	same repository	https://<user[org]>.github.io/<repo>

今回は4番目の pattern を採用することにした.

作業手順

• company-page という repository を作成する
• company-page 配下で hugo のサイトを作る
• github.io の public に company-page を submodule として作成する
• company-page の css/image 等を編集する
• deploy は company-page を deploy する

hugo new site company-page
git clone https://github.com/zerostaticthemes/hugo-hero-theme.git themes/hugo-hero-theme
cp -a themes/hugo-hero-theme/exampleSite/. .

• xxx.github.io という repository を作成する
• hugo を実行し public を生成する
  • config.toml の publichDir にあわせる
• public dir を削除する
  • rm -rf public
• company-page で submodule を作成する
  • git submodule add -b gh-pages https://@github.com/xxx/xxx.github.io.git public
  • public が xxx.github.io 管理となるようにする
  • 別途新規で clone する場合は git clone --recursive https://github.com/xxx/company-page.git -b gh-pages のようにして clone する.
• config.toml を次のような形式にする

baseURL = "https://test.com/"
languageCode = "ja"
title = ""
themesDir = "themes"
theme = "hugo-hero-theme"
publishDir = "public"
canonifyurls = true

public を deploy する

$ cd /path/to/company-page
$ hugo # if using a theme, replace with `hugo -t <YOURTHEME>`
$ cd public
$ git add .
$ git commit -m "update site"
$ git push origin main