この記事はアドベントカレンダー3日目の記事です。
https://qiita.com/advent-calendar/2025/dokokanoradio_hugo

本記事の概要

2日目の記事の続きとして、サイトのビルド方法・内蔵Webサーバーによる確認方法やフォルダの構成について記載した記事である。

復習(Day2読んでいない人向けの最低限の前提)

前回は、WinGetでHugo等のソフトをインストールしたのちに、以下コマンドでBlowfish-toolsをインストールした。

Blowfish-toolsのインストールコマンド

npm i -g blowfish-tools

そして、下記コマンドでBlowfish導入済みのHugoサイトの環境を作った。

Blowfishテーマ導入済みHugo環境構築コマンド

npx blowfish-tools new my-site

フォルダ構成を確認する。

この時点でのフォルダ構成は下記のようになっている。

この例ではmy-siteというフォルダに環境を構築している

フォルダ構成

my-site
├── .git/
│   └── 以下省略
├── archetypes/
│   └── default.md
├── assets/
├── config/
│   └── _default/
│       ├── hugo.toml
│       ├── language.en.toml
│       ├── markup.toml
│       ├── menus.en.toml
│       ├── module.toml
│       └── params.toml
├── content/
├── data/
├── i18n/
├── layouts/
├── static/
├── themes/
│   └── blowfish/
│       └── 以下省略
├── .gitmodules
└── hugo.toml

現時点での簡易的な説明

各フォルダは下記のような意味合いを持つ。
現時点ではピンとこない部分もあるだろうが、今回必要な部分には★を付けているので、最低★の部分だけでも見ておくと良い。

my-site/

お試しでビルドしてみる

初期状態でのWebサイトを確認するため、いったんビルドしてみることにする。
ビルドするには、環境(この例ではmy-site)直下でPowerShellを開き、以下のようにコマンドを実行すればよい。

HugoのWebサイトビルドコマンド

hugo

これだけである。

実行すると、下記のように表示される。
ビルドはすぐ終わることからも、Hugoの凄さが分かるだろう。

ビルドするとpublicフォルダが出来るので、この中身をWebサーバーにアップロードする形となる。

内蔵Webサーバーを利用して表示を確認する

これだと、ブラウザーで表示を確認するのが困難なので、ローカル環境での動作確認はHugoの持つWebサーバー機能を用いて確認することが多い。

HugoのWebサーバー機能

hugo server

これだけである。

実行すると、下記のように表示される。

server機能が実行中のままになるので、この状態でブラウザーを立ち上げ、下記アドレスにアクセスする。

http://localhost:1313

なお、上手くアクセスできない場合はlocalhostの部分を127.0.0.1としても良い。
つまり、下記のようになる。

http://127.0.0.1:1313

アクセスすると下記のようになる。

これだけでは何も分からないが、最低限サイトが表示されていることが分かる。

なお、サーバーを止めるには hugo serverコマンドを実行しているPowerShellの画面で、Ctrl+Cを押すと止まる。

最小限の設定

hugo.tomlの削除

通常、Hugoのコンフィグパラメータは環境直下のhugo.tomlに配置するのだが、Blowfishテーマにおいては、config/_default/配下のファイルを使用する。
そのため、hugo.tomlを削除する。

ファイル名のリネーム

Blowfishテーマは複数言語(英語、日本語etc...)に対応しており、言語ごとに設定できるような仕組みとなっている。
そして、ファイル名を用いて、どの言語向けの設定かを選択できる仕組みになっている。
初期状態のサイトは英語のみのサイトになっているため、日本語のみのサイトにするためにはファイル名のリネームが必要である。

config/_default/配下の以下のファイルについて、リネームする。

language.en.toml => language.ja.toml
menus.en.toml => menus.ja.toml

端的に言えば、en => jaに変えるだけである。

hugo.tomlの設定

7行目辺りにある

defaultContentLanguage = "en" を "ja" に変える

変更後はこのようになる。

config/_default/hugo.toml(抜粋)

# -- Site Configuration --
# Refer to the theme docs for more details about each of these parameters.
# https://blowfish.page/docs/getting-started/

theme = "blowfish" # UNCOMMENT THIS LINE
# baseURL = "https://your_domain.com/"
defaultContentLanguage = "ja"

language.ja.tomlの設定

先頭から下記の様に書き換える。

2行目のlanguageCode = "en" を "ja" に変える。
3行目のlanguageName = "English" を "日本語" に変える。
- (見た目の問題なので"Japanese"などにしてもよい)
8行目のdisplayName = "EN" を "JA" にする。
9行目のisoCode = "en" を "ja" にする。
11行目のdateFormat = "2 January 2006" を "2006年1月2日" とする。
- ただし、記事の日付の表示を英語のままにしたいならそのままで良い。
- なぜ2006年かはGo言語の仕様に由来しているので気にしなくて良い。

変更後は下記のようになるはずだ。

config/_default/language.ja.toml(抜粋)

disabled = false
languageCode = "ja"
languageName = "日本語"
weight = 1
title = "Blowfish"

[params]
  displayName = "JA"
  isoCode = "ja"
  rtl = false
  dateFormat = "2006年1月2日"

再度確認してみる

この状態で、ビルドが通ったり、サーバーが立ち上がることを確認してみよう。

HugoのWebサーバー機能

hugo server

としてみると、下記のように表示される。

記事等を追加していないのでどうしても間違い探しレベルになってしまうが、右下の表示が以下のようになっていればひとまずOKだ。

Hugo & Blowfish で構築されています

おわりに

ここまでで、最低限、ページの動作を確認できるようになった。
今後は、ここにページを追加したり、コンフィグを追加することで、自分だけのWebサイトを作ることが出来る。