今回、Hugo + Netlify で本ブログを作成しましたが、最初サイトの見栄えがよくなかったので、各種設定をしました。 Hugoはconfig.tomlを修正すれば、簡単にサイトの表示を変えることができます。 今回は僕が行った修正を記載します。

config.toml設定

現在の本ブログのconfig.tomlはこんな感じになっています。

baseURL = "https://yuyagishita.com/"
languageCode = "en-us"
title = "YAGI BLOG"
theme = "beautifulhugo"
summarylength = 100
HasCJKLanguage = true

[Params]
  readingTime = true
  wordCount = true
  socialShare = true

[Author]
  github = "yuyagishita"
  twitter = "yuyagishita"

[taxonomies]
  category = "categories"
  tag = "tags"

[[menu.main]]
  name = "Home"
  url = "/"
  weight = 1

[[menu.main]]
  name = "Tags"
  url = "tags"
  weight = 2

[[menu.main]]
  name = "Categories"
  url = "categories"
  weight = 3

[blackfriday]
  hrefTargetBlank = true

1つずつ解説していきます。

summarylength

summary(TOPページなどで表示されている記事の概要)のテキスト文字数を決めることができます。

HasCJKLanguage

中国語、日本語、韓国語で記事を作成している場合は、HasCJKLanguage = trueにすることで、summarylengthが正常に動きます。

[Params]

readingTime

この記事を読むのに何分程度かかるのか表示してくれます。

wordCount

記事の文字数を表示してくれます。

socialShare

記事をSNSに連携するためのアイコンが表示されます。

[Author]

github

指定したgithubのアカウントページに遷移するアイコンが表示されます。 beautifulhugoの場合はフッター部分に表示されます。

twitter

githubと同様です。

[taxonomies]

category

カテゴリー設定ができます。 各記事に以下のように追加すれば、カテゴリーに反映されます。

---
title: "Hugoで作成したサイトのconfig.toml設定について"
date: 2020-03-24T16:36:43+09:00
draft: flase
categories: [ "tech" ]
---

tag

カテゴリーのようにタグの設定ができます。 以下のように追加をします。

tags: [ "Hugo", "go" ] ←複数設定したいときはこのように書きます。

メインで使われるメニューです。 本ブログだと右上に表示されているやつです。

name

メニューに表示される名前です。

url

クリックした際に遷移するURLです。

weight

表示する順番を設定することができます。 少ない数字の方がメニューの先頭に表示されます。

[blackfriday]

hrefTargetBlank

リンクをクリックした際に新しいタブを開いてくれます。 影響範囲が限られているので、全体に適用したいときはカスタマイズが必要な感じです。

まとめ

Hugoはサイトの簡単な表示設定をconfig.tomlですぐに修正することができて、楽です!! 凝った表示は自分でカスタマイズする必要があるので、Hugoに慣れてきたら、挑戦しようかなと思います!!

参考資料

https://gohugo.io/getting-started/configuration/#all-configuration-settings