ブログ移行日記(その3) - Hugoの設定と微調整(テーマに合わせた) | @johtaniの日記 3rd

設定ファイル(config.toml)

Hugoの設定ファイルはconfig.tomlになります。hogo new siteコマンドで生成したディレクトリの中にデフォルトで含まれていますが、こちらではなく、テーマの作者が用意してくれたconfig.tomlを元に変更を加えました。

ちなみにテーマの作者の方が設定とコンテンツを含めたサンプルも公開してくれています。設定やディレクトリの構成はこちらを参考にしました。

設定ファイルで変更した項目は以下のとおりです。

サイトのタイトルや説明など

特記することはありません。好きなように変えました。

baseurl
title
SEOTitle
description
keyword
slogan
sidebar_about_descrption

画像関連(ヘッダーや著者近影)

画像の置き場はstatic/images/ディレクトリですが、設定ファイルには images/から設定します。

header_image : ブログのヘッダー背景
sidebar_avatar : 著者近影

言語周り(特に多言語対応する予定は無いのですが)

languageCode = “ja”
defaultContentLanguage = “ja”

オフにした機能、削除した項目

freands = false
bookmarks = false

上記の設定変更以外に、[[params.bookmark_link]]や[[params.friend_link]]も削除。

中国のサービスや、特化した設定など。

Baidu Analytics関連
Disqus proxy関連
Reward(wechat pay & alipay関連)

params.social関連

rss = true
twitter
linkedin
github

ほかはすべてコメントアウト。

外部サービス関連

disqusShortname : Disqusのショートネーム
googleAnalytics : Gooogle AnalyticsのトラッキングID
algolia関連 : 別のブログ記事として、設定方法などを書きます。

追加した設定(昨日のブログで説明済み)

Octopressと同じ形のパーマリンク

[permalinks]
  post = "/blog/:year/:month/:day/:slug"

Markdownファイル中のHTMLタグ表示

[markup.goldmark.renderer]
  unsafe = true

以上が設定ファイル関連です。

テーマの変更点

テーマそのままでは問題があったり、独自に変更したいという点があったので、いくつか変更をしています。

フォントの変更

そのままテーマを適用するだけでうまく行けばよかったのですが、フォントの問題が発生しました。テーマの作者の方が中国の方だから?かどうかはわかりませんが、デフォルトのままだと中華フォントになってしまいました。

あー、中華フォントだな。 pic.twitter.com/OvHpY4LSp1
— Jun Ohtani (@johtani) January 16, 2020

config.tomlにcustom_cssという設定があり、こちらで指定したCSSのファイルがテーマのlayouts/partials/head.htmlから読み込まれる仕組みがあるようなので、フォントに関するCSSをこの機能を使用して指定するようにしました。

config.tomlの設定は次のとおりです(リスト)になっているので、複数のファイルに分割して、読み込ませることも可能なのかな?。

custom_css = ["css/custom-font.css"]

cssファイルについては、static/css/custom-font.cssというファイルを作成し、次のような記載になっています。フォントの指定と右側サイドバーの自己紹介の部分の文字色を変更するためのものです。

body, h1, h2, h3, h4, h5, h6, .navbar-custom { 
    font-family: Helvetica,"Sawarabi Gothic",Meiryo,"メイリオ","Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN",YuGothic,"游ゴシック",Arial,sans-serif; 
}
.sidebar-container {
    color: #404040;
    font-size: 14px;
}

faviconの変更

テーマにfavicon.icoが含まれていたのですが、せっかくなので独自のものに変えてみようかと。ただ、残念ながら、こちらはパスおよびファイル名がlayouts/partials/head.htmlに直書きされていました。

画像はimages配下にと思っていたのですが、このパスだけを変更するためにhead.htmlを自分の配下にコピーしてカスタマイズするのもどうかと思った(テーマに変更やバグ修正が入るたびに手動でコピーするのはなぁと思った)ので、static/img/favicon.icoファイルを作成しました。

テーマよりもHugoのプロジェクトにあるファイルを優先するようなので、ファイルだけをプロジェクトに作成しました。

記事一覧のテンプレート

記事の一覧で表示される、作成者と作成日時が英語表記でかつ、冗長な感じがしたので、スッキリさせるために、layouts/partials/post_list.htmlをテーマからコピーして、次のように変更しました。

元の形式は : Posted by author Monday, January 2, 2006
現在の形式 : 2006-01-02 by author

記事のテンプレート

今回採用したテーマでは、記事の先頭に記事のセクションを元に目次を生成してくれるものでした。

目次をコンテンツから自動で作ってくれるの便利だな。 pic.twitter.com/9bU3sLnUrm
— Jun Ohtani (@johtani) January 16, 2020

とても便利です。ただ、表示が「TOC」なんです。英語でしかも「ToC」という表記ならまだ気にならなかったかもですが、大文字だと流石に気になったので、プロジェクトのlayouts/_default/single.htmlにコピーして「目次」という日本語に書き換えました。このHTMLにテーマで修正が入った場合はどうしようかなぁ。。。というのが目下の悩みです。。。

Archetypeテンプレートの追加

最後は新規記事を書くときに生成されるMarkdownのメタデータの追加です。 HugoにはArchetypesというのが存在します。

Hugoではhugo new 記事としたときに、記事の種類(content/ディレクトリ名=記事のタイプ)によって、作成するmarkdownファイルをテンプレートから生成する機能があります。この生成時に使われるのがarchetypesというディレクトリにあるファイルです。

私のブログサイトでは、今のところcontent/postというブログの記事だけを書く予定ですので、archetypes/post.mdというファイルを作って以下のようなメタデータをhugo newしたときに自動で生成するようにしました(テーマにあったpost.mdファイルの代わり)。

---
layout: post
title: "{{ replace .Name "-" " " | title }}"
slug: "{{ substr .Name 11 }}"
author: johtani
date: {{ .Date }}
comments: true
tags: []
draft: true
---

タイトルはファイル名のハイフンを空白に変換したもの(実際にはファイル名は英語にしているので、使いませんが。。。)
slugはファイル名の先頭からYYYY-MM-DD-という11文字を除いたもの。これは、OctopressのURLに合わせるために使用するURLの一部の文字列です。
author: johtani : 著者は私だけだから固定文字列
comments: true : ブログ記事にはDisqusのコメント機能を利用
tags: [] : 各内容によってタグを付けるが、生成時には空
draft: true : 明示的にこの行を消すまではドラフト記事としたいため

という感じです。ほかにどのよなメタデータがあるのかまではまだ調べていないので、今後また適宜変更していくと思います。

まとめ

Hugoの設定や、テーマそのままではなく独自の変更を加えた部分を思い出して書き出してみました。

これで、Algoliaに関する部分以外はだいたい思い出して書いたと思います。次は、Algoliaの使い方と設定について書き残す予定です。

ブログ移行日記(その3) - Hugoの設定と微調整(テーマに合わせた)

目次