[Hugo] Hugo Book テーマでのサイト構築

Hitoshi Arakawa | 2024/10/30 Wed 04:42

macOS を Ventura から Sequoia にアップデートした。

それによってゼロから Hugo の環境を作り直すことになったので、これを機に Hugo を使ったサイトの構築方法を改めてまとめてみる。

今回は Hugo Book というテーマを使う。

alex-shpak/hugo-book: Hugo documentation theme as simple as plain book
https://github.com/alex-shpak/hugo-book

環境:macOS Sequoia 15.0.1(英語環境)

(0)Homebrew をインストールしておく。

(1)Hugo をインストールする。

$ brew install hugo

(2)Hugo のサイトファイルを置きたい場所へ cd で移動する。

(3)新規サイトを作成する(mySite というプロジェクト名とする)。

$ hugo new site mySite; cd mySite

(4)テーマのインストール方法は、テーマごとに異なる。Hugo Book テーマの公式サイトで確認する。

alex-shpak/hugo-book: Hugo documentation theme as simple as plain book
https://github.com/alex-shpak/hugo-book

(5)今回は4の Creating site from scratch に従ってインストールを進める。

$ git init
$ git submodule add https://github.com/alex-shpak/hugo-book themes/hugo-book
$ cp -R themes/hugo-book/exampleSite/content.en/* ./content

(6)以下のコマンドでサンプルサイトを表示できる。

$ hugo server --minify --theme hugo-book

http://localhost:1313/ にアクセスして確認しよう。

さらにサイトをカスタマイズしていこう。

(7)プロジェクトのルートにある hugo.toml を編集する。

  • baseURL:自分のサイトの URL に書き換える。
  • languageCode:ja に書き換える。
  • title:サイトのタイトルに書き換える。

さらに以下を追記する。

# テーマ名
theme = 'hugo-book'

# 日本語のサマリーで正しく文字数制御をするため true にする。
hasCJKLanguage = true

# URL とパスで小文字に自動変換させないようにするため true にする。
disablePathToLower = true

# 自分で robots.txt を配置したいので false にする。
enableRobotsTXT = false

さらに細かい設定については Hugo Book の GitHub に書かれている。

alex-shpak/hugo-book: Hugo documentation theme as simple as plain book
https://github.com/alex-shpak/hugo-book

(8)6でサンプルサイトを表示していた。

それを自分のサイトのデータに差し替えるなら、content ディレクトリーの中身を削除したうえで、/theme/hugo-book/ に content ディレクトリーを作成し、そこに入れればいい。6の hugo server コマンドを実行したままなら、一旦 control + C で止めて、再度 hugo server コマンドを実行することで反映される。

プロジェクトルートの content ディレクトリーにファイルを入れないのは、theme ディレクトリー内のディレクトリーはプロジェクトルートのディレクトリーと統合されるし、なるべく theme ディレクトリー内をいじるほうがプロジェクトのファイルを壊す可能性が減るからだ。

(9)アクセス解析で Matomo のショートコードを挿入したい。

以下の方法に従えばいいが、Hugo Book テーマの場合、/themes/hugo-book/layouts/partials/docs/inject/head.html に Matomo のコードを追加したことを記入する。

Hugo に Matomo のコードを挿入する|荒川仁志
https://note.com/hitoshiarakawa/n/nce9ac7f6bc5d

参考:
hugoのSummaryが巨大化する問題を回避する - Hiroto’s diary
https://hiroto-k.hatenablog.com/entry/2016/09/15/232115

Configure Hugo | Hugo
https://gohugo.io/getting-started/configuration/

Hugoでrobots.txtとsitemap.xmlを作る | Old Sunset Days
https://hugo-de-blog.com/hugo-sitemap/

Hugoで作ったサイトにシェアボタンを足した | AAbrain
https://aakira.app/blog/2018/08/share/

Amazon.co.jp: LOST シーズン1 コンパクト BOX [DVD] : マシュー・フォックス, エヴァンジェリン・リリー, ジョシュ・ホロウェイ, ドミニク・モナハン, イアン・サマーホルダー: DVD
https://amzn.to/40m9mvO