この記事はアドベントカレンダー3日目の記事です。
https://qiita.com/advent-calendar/2025/dokokanoradio_hugo
本記事の概要
2日目の記事の続きとして、サイトのビルド方法・内蔵Webサーバーによる確認方法やフォルダの構成について記載した記事である。
復習(Day2読んでいない人向けの最低限の前提)
前回は、WinGetでHugo等のソフトをインストールしたのちに、以下コマンドでBlowfish-toolsをインストールした。
npm i -g blowfish-tools
そして、下記コマンドで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/
- .git/：gitの内部データの置き場。触ってはいけない。
- archetypes/ ：記事のひな型ファイルに相当する。いったんは考えなくて良い。
- assets/ ：サイト作りに必要な画像等を置く場所。サイトを充実する過程で使う。
- config/ ：コンフィグファイルの置き場。ここが大事。
- _default/ ：デフォルトのコンフィグなのだが、特にリネームする必要はない。
- hugo.toml ：★Hugoのコンフィグパラメータを記載する箇所。
- language.en.toml：__★言語設定(現状は英語だが日本語に直す) __
- markup.toml：goldmark(中で使うMarkdown)の設定。ひとまず無視でよい。
- menus.en.toml：★メニュー設定。(現状は英語だが日本語に直す)
- module.toml：Hugoのmodule機能を使う際の設定。(今回は不要)
- params.toml：★Blowfish固有のコンフィグパラメータ設定。
- content/：このフォルダ内に記事を書くことになる。
- layouts/ ：ショートコードなどを置く場所。いったんは考えなくて良い。
- static/ ：サイトには置きたいが、Hugoにいじられたくないものを置く。
- themes/ ：テーマの置き場
- blowfish/ ：blowfishテーマの実体。ここは触らない。
- .gitmodules：gitのサブモジュール管理ファイル。(Blowfishの組み込みに使っているので 触ってはいけない)
- hugo.toml：★Hugoの設定ファイル。(Blowfishでは不要)
お試しでビルドしてみる
初期状態でのWebサイトを確認するため、いったんビルドしてみることにする。
ビルドするには、環境(この例ではmy-site)直下でPowerShellを開き、以下のようにコマンドを実行すればよい。
hugo
これだけである。
実行すると、下記のように表示される。
ビルドはすぐ終わることからも、Hugoの凄さが分かるだろう。
ビルドするとpublicフォルダが出来るので、この中身をWebサーバーにアップロードする形となる。
内蔵Webサーバーを利用して表示を確認する
これだと、ブラウザーで表示を確認するのが困難なので、ローカル環境での動作確認はHugoの持つWebサーバー機能を用いて確認することが多い。
hugo server
これだけである。
実行すると、下記のように表示される。
server機能が実行中のままになるので、この状態でブラウザーを立ち上げ、下記アドレスにアクセスする。
なお、上手くアクセスできない場合はlocalhostの部分を127.0.0.1としても良い。
つまり、下記のようになる。
アクセスすると下記のようになる。
これだけでは何も分からないが、最低限サイトが表示されていることが分かる。
なお、サーバーを止めるには 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" に変える
変更後はこのようになる。
# -- 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言語の仕様に由来しているので気にしなくて良い。
変更後は下記のようになるはずだ。
disabled = false
languageCode = "ja"
languageName = "日本語"
weight = 1
title = "Blowfish"
[params]
displayName = "JA"
isoCode = "ja"
rtl = false
dateFormat = "2006年1月2日"
再度確認してみる
この状態で、ビルドが通ったり、サーバーが立ち上がることを確認してみよう。
hugo server
としてみると、下記のように表示される。
記事等を追加していないのでどうしても間違い探しレベルになってしまうが、右下の表示が以下のようになっていればひとまずOKだ。
- Hugo & Blowfish で構築されています
おわりに
ここまでで、最低限、ページの動作を確認できるようになった。
今後は、ここにページを追加したり、コンフィグを追加することで、自分だけのWebサイトを作ることが出来る。