Hugoを使って簡単なウェブサイトを作る（その2）

前回の続きです。HugoのBlowfishテーマを使ってサイトを作っていきます。 設定項目全部はカバーしきれないので、私がこのサイトを作るにあたって使用した設定項目についてのみ解説しています。

params.tomlの設定

#

グローバル設定部分

#

colorScheme = "blowfish"
defaultAppearance = "dark" 
autoSwitchAppearance = false
defaultBackgroundImage = "img/wallpaper.png"

・colorSchemeはデフォルトのblowfishを使用、Blowfish公式ドキュメントに 指定できるカラースキームが載ってます。

・defaultAppearanceはデフォルトでlightモードを使うかdarkモードを使うか指定できます。

・autoSwitchAppearanceはサイト訪問者のOSがlightモードかdarkモードかに応じて自動で切り替えるかどうかの設定です。

・defaultBackgroundImageはどのページも同じ背景画像にしたい場合使います。指定する画像はassets/imgに入れてください。しかし、この部分だけ設定すれば即座に全ページに反映されるわけじゃないです。私の場合はメニューバにあるBlog、Categories、Tagsのページを同じ背景画像にしてますが、それぞれ個別に有効化が必要でした、詳しくはメニューの表示設定にて。

トップページの表示設定

#

[homepage]
    layout = "background" 
    homepageImage = "img/wallpaper.png" 
    showRecent = true
    showRecentItems = 5
    showMoreLink = true
    showMoreLinkDest = "/blog/"

・layoutはトップページのレイアウトで何種類かから選ぶことができます（公式ドキュメント参照）。私は背景画像を画面全体に表示したかったのでbackgroundレイアウトを選びました。

・homepageImageはトップページの背景画像です。defaultBackgroundImageを指定していれば必要ないのですが、なんとなく設定しました。指定する画像はassets/imgに入れてください。

・showRecentは最近の投稿を表示するかどうか

・showRecentItemsは最近の投稿を何個まで表示するか

・showMoreLinkは「もっと見る」ボタンを表示するかどうか

・showMoreLinkDestは「もっと見る」を押したときにどのディレクトリにある記事を表示するか。contentディレクトリ内にあるディレクトリを指定します。

記事の表示設定

#

[article]
   showHero = true
   heroStyle = "background"
   showReadingTime = false
   showTableOfContents = true
   showCategoryOnly = true
   showWordCount = false

・showHeroはヒーロー画像（記事を開いたときに背景に表示される画像）を表示するかどうかの設定です。基本的にサムネイルの画像がヒーロー画像として使われますが、サムネイルを設定してない場合はグローバル設定のdefaultBackgroundImageが（多分）使われます。記事のサムネイル設定については目次「記事の作成」にて。

・heroStyleはヒーロー画像を表示するスタイルで、私は画面全体に表示したかったのでbackgroundスタイルを選びました。

・showReadingTimeは記事を読みを得るまでの目安時間を表示するかどうか

・showTableOfContentsは記事に目次を表示するかどうか

・showCategoryOnlyは記事にはカテゴリだけを表示してタグは表示しないという設定

・showWordCountは記事の文字数を表示するかどうか

メニューの表示設定

#

[list]
  showHero = true
  heroStyle = "background"
  showSummary = true

・showHeroはメニューバーのBlogをクリックしたときにヒーロー画像を表示するかどうかです。ヒーロー画像にはdefaultBackgroundImageで指定した画像が使われます。

・heroStyleはヒーロー画像を表示するスタイルです。

・showSummaryは記事にサマリー（記事の要約）を表示するかどうかです。なぜここにこの設定があるのかさっぱりわかりません。 しかもサマリーに表示する文字数はhugo.tomに記述しなければならないという謎仕様。サマリーには指定した文字数が記事の先頭から抜き出されて表示されるのがデフォルトですが、記事のフロントマターに書き込めばそちらが優先されます。

[taxonomy]
  showHero = true
  heroStyle = "background"

・showHeroはメニューバーのCategoriesとTagsをクリックしたときにヒーロー画像を表示するかどうかです。ヒーロー画像にはdefaultBackgroundImageで指定した画像が使われます。

・heroStyleはヒーロー画像を表示するスタイルです。

[term]
  showHero = true
  heroStyle = "background"

・showHeroは具体的なカテゴリ名やタグ名をクリックしたときにヒーロー画像を表示するかどうかです。ヒーロー画像にはdefaultBackgroundImageで指定した画像が使われます。

・heroStyleはヒーロー画像を表示するスタイルです。

記事の作成

#

記事フォルダとファイルの準備

#

まず記事や記事のサムネイルを入れるフォルダをcontent/blogディレクトリ内に作ります。

mkdir content/blog/first_post

次に記事ファイルをhugoコマンドで作成します。

hugo new /content/blog/first_blog/index.md

記事のサムネイルを設定するには記事と同じディレクトリに（この場合はfirst_blogディレクトリ）名前がfeaturedで始まる画像ファイルを入れます。（例：featured01.pngやfeaturedabc.jpgなど） これは私の環境だけかもしれませんが記事の名前を01.mdとかにするとサムネイルが読み込まれないという現象が起きました。なので記事の名前はindex.mdなど無難な名前にしたほうがいいかもしれません。

フロントマター(記事のメタ情報)の書き方

#

最後に少しだけフロントマターの書き方について

+++
date = '2025-09-20'
draft = false
title = '記事のタイトル'
categories = ["カテゴリ1", "カテゴリ2"]
tag = ["タグ1", "タグ2"]
summary = 'ここに記事の要約を書くとサマリーとして表示されます'
+++

・draftはtrueになってると下書きとして扱われhugoコマンドで記事をHTMLに変換する際に対象から外されます。