HUGOの設定ファイルを使いこなす
HUGOの設定ファイルはサイト名やGoogle Analyticsコード、メニューなどいくつもの項目を保持できる便利なファイルです。今回は、設定ファイルの設定項目の中でもよく使うものをピックアップして、使い方を見ていきます。
公開日:2019年3月27日
baseURL
サイトのドキュメントルートを設定します。
baseURL = https://codit.pages.dev/
blackfriday
HUGOのマークダウンパーサは、「blackfriday」というパッケージを使っています。
マークダウンではデフォルトで設定できない「リンクにtarget=“blnak”を付与する」機能など、マークダウンに様々な機能を付与してくれます。
[blackfriday]
hrefTargetBlank= true
blackfridayの細かい設定は公式ドキュメントで確認できます。
contentDir, dataDir, layoutDir, publishDir, staticDir
コンテンツ、データ、レイアウト、静的ファイル、公開ディレクトリなどのデフォルトディレクトリを変更する際に使います。
googleAnalytics
Google Analyticsのトラッキングコードを設定できます。
googleAnalytics = 'GA-XXXXXXXXXX-XX'
hasCJKLanguage
2バイト文字に対応させます。.Summaryや.WordCountといった文字をカウントする変数は、デフォルトで英数字にしか対応していませんが、この設定を追加することで日本語の文字数もカウントできるようになります。
imaging
画像に様々な処理ををかける機能を使えます。
JPEGのファイルクオリティを落としたり、画像サイズや明度を変更したりすることができます。
resampleFilter = "box"
quality = 75
詳しくはこちらをどうぞ。
disintegration/imaging | Github
languages、, languageCode
サイトの言語を設定できます。デフォルトの言語や言語ごとのURL構成などを指定できます。
languageCode = "ja-jp"
マルチ言語サイトを作成する際に必須の設定項目です。
log, logFile
ログを取る際の設定項目です。デフォルトではオフになっています。
log = true
logFile = '/path/to/logfile'
menu
HUGOのメニューは、テンプレートにべた書きすればそのままメニューになりますが、設定ファイルからカスタマイズできるようにもできます。
この項目はボリュームがあるので、詳しくは下記のページをどうぞ。
HUGOサイトのメニューを設定ファイルからカスタマイズできるようにする
paginate, paginatePath
サイト全体のページネーションの設定します。
paginate
ページングのページ数を設定します。デフォルトは10になっています。
paginate = 30
テンプレートで .Paginate関数を使う際に適用されますが、それぞれの関数の呼び出し時に適用させた数字のほうが優先されます。
paginatePath
ページングする際のURLパスを設定できます。デフォルトは「/page/X」になっています。
paginatePath = 'p'
permalinks
パーマリンクを設定する際に使います。
HUGOのパーマリンクは、content内のディレクトリ構成を基本としていますが、そうしたルールとは別に設定したい場合に使うことができます。
[permalinks]
codes = "/codes/:slug" // codes内のコンテンツは「example.com/codes/スラッグ/」にする
notes = "/notes/:slug" // notes内のコンテンツは「example.com/codes/スラッグ/」にする
authors = "/authors/:slug" // authors内のコンテンツは「example.com/codes/スラッグ/」にする
statics = "/:filename/" // static内のコンテンツは「example.com/ファイル名/」にする
詳しくは、こちらをどうぞ
related
テンプレートで使う「.related」関数の細かい設定ができます。詳しくは公式ドキュメントをどうぞ。
Configure Related Content | HUGO
summaryLength
サマリーで使うワード数を設定できます。デフォルトは70です。
summaryLength = 120
taxonomies
タクソノミーを使うセクションを設定できます。「tag」と「categories」は自動で追加されています。
[taxonomies]
authors = "authors"
disableKindsで、タクソノミーページを停止させることもできます。
disableKinds = ["taxonomy", "taxonomyTerm"]
theme
使用するテーマを設定できます。テーマ名は、テーマディレクトリに入れたテーマのディレクトリ名を入れます。
theme = 'codit-theme' // /theme/codit-theme/
title
サイトのタイトルを入れます。
title = 'コードを探す、共有する。「codit」'
トップページの{{.Title}}で使われるほか、グローバル変数でも引き出すことができます。
{{ .Site.Title}}
よく使うHUGOの設定項目を見てきました。
HUGOで作成したサイトは、静的サイトではありますが、設定を使いこなすことで、かなり動的サイトっぽいことができるようになることがわかりますね。
新着ノート
-
NUXT3
公開日:2023年2月16日
-
NUXT3
公開日:2023年1月30日
新着コード
-
Vue.js
公開日:2022年4月18日
-
Vue.js
公開日:2022年4月13日