Hugo によるブログ作成と mainroad テーマのカスタマイズ

このサイトは Hugo を使って作成しました。 Hugo は Markdown などで書かれたソースファイルから静的なHTMLファイルのウェブサイトを生成するツールです。 Hugo では様々な テーマ を選択することができます。 このサイトではHugoテーマとして Mainroad を使用しています。 また、生成したサイトのホスティングには Netlify を利用しています。

この投稿では Hugo でサイトを作成する際の基本的な操作と、このサイトで行ったカスタマイズの内容を記しておきます。


Hugo サイトの作成

Hugo の基本的な使い方は公式ドキュメントの Quick Start などに書かれているのでここでは簡単に記します。

Mac で Hugo の CLI をインストール

# ターミナルで
brew install hugo

Hugo サイトを新規作成

# ターミナルで
hugo new site terashim.com # フォルダ名 terashim.com で新規サイト作成
cd terashim.com

Git リポジトリとして初期化

# ターミナルで
git init
hub create -p # GitHub にリモートリポジトリを作成

Mainroad テーマをインストール

# ターミナルで
git submodule add https://github.com/vimux/mainroad themes/mainroad
# => ファイルが themes/mainroad にダウンロードされる

Hugo設定ファイル config.toml で次のように記述すると Mainroad テーマが有効になります:

# config.toml
theme = "mainroad"

新規投稿を作成するとき

# ターミナルで
hugo new posts/[ファイル名].md
# => content/posts/[ファイル名].md が生成される

ローカルで確認するとき

# ターミナルで
hugo server -D # -D オプションで下書きも描画する
# => ブラウザで http://localhost:1313/ を開いて表示を確認できる

ファイルをビルドするとき

# ターミナルで
hugo
# => public/ ディレクトリにビルドされたファイルが保存される

Netlify へのデプロイ

Netlify は静的ウェブサイトのホスティングサービスです。 GitHubとの連携、独自ドメインの設定、TLS証明書の取得・設定などが可能です。

Hugo サイトの Netlify へのデプロイについては Hugo 公式ドキュメント “Host on Netlify | Hugo” 等に詳しく書かれています。

このサイトではソースを GitHub の master ブランチにプッシュすると自動的にビルドされて公開されるように設定しました。


カスタマイズ

標準的な設定の他に、以下のようなカスタマイズを行いました。

ハイライト色を変更

Mainroad テーマでは Hugo設定ファイル config.toml.Params.highlightColor フィールドでハイライト色を変更することができます。

このサイトではハイライト色をデフォルト値 #e22d30 から #8db1ab に変更しました:

# config.toml
[Params]
  highlightColor = "#8db1ab" # ハイライト色を上書きする

サマリーの長さを調整

デフォルトのままでは日本語記事のサマリーが長くなってしまいます。これは英語のように空白区切りで単語数をカウントしているためです。 これを防ぐには Hugo 設定ファイル config.toml でパラメータ hasCJKLanguagetrue に設定します。

このサイトではさらに summaryLength でサマリーの長さを 120 単語に調整しました:

# config.toml
hasCJKLanguage = true # 日本語・中国語・韓国語の単語カウントを有効にする
summaryLength = 120 # サマリーの長さを120単語にする

Noto Sans JP フォントの導入

Mainroad テーマのデフォルト設定では日本語フォントが設定されていません。 Hugo 設定ファイル config.toml.Params.customCSS フィールドを指定することでカスタムCSSファイルをインクルードできるようになっているので、これを利用して日本語フォントの設定を行います。

このサイトでは日本語フォントととして Noto Sans JP を導入しました。 Noto Sans JP を有効にするには以下のようにします:

まず Google Fonts のページ https://fonts.google.com/specimen/Noto+Sans+JP から Noto Sans JP のCSSファイルをダウンロードして static/css/notosansjp.css に保存します。

次に、このフォントを使用するためカスタムCSSファイル static/css/custom.css を以下の内容で保存します:

/* static/css/custom.css */
body {
    font-family: 'Noto Sans JP', sans-serif;
}

これら2つのCSSファイルをインクルードするため、設定ファイル config.toml でCSSファイルのパスを指定します:

# config.toml
[Params]
  customCSS = ["css/notosansjp.css", "css/custom.css"] # カスタムCSSファイルをインクルードする

こうすることですべてのページでCSSが読み込まれるようになり、Noto Sans JP フォントが有効になります。

指定の順序でメインメニューを作成

Mainroad テーマではページコンテンツの YAMLフロントマターmenu: main のように記述することによってそのページをメインメニューに加えられるようになっています(参考)。 しかし、この方法ではメニューの順序を指定することができません。

順序を指定してメインメニューを作成するには、YAMLフロントマターを使わず Hugo 設定ファイル config.toml で次のように記述します:

# config.toml
# メインメニュー
[[Menus.main]]
  Name = "ホーム"
  URL = "/"
[[Menus.main]]
  Name = "投稿一覧"
  URL = "/posts/"

note や Qiita へのリンクを設置

Mainroad テーマには Facebook, Twitter, GitHub など代表的なメディアのソーシャルリンクウィジェットが用意されています。これらは設定ファイル config.toml でアカウント名を入れるなどすれば簡単に導入できるようになっています。

さらに、カスタムリンク機能 を使って独自にアイコンとリンクURLを指定することも可能です。

このサイトではカスタムリンク機能を使って noteQiita へのリンクを作成しました。

アイコン表示用のSVGファイルを作成してそれぞれ layouts/partials/svg/note.svg, layouts/partials/svg/qiita.svg として保存し、設定ファイル config.toml に以下のような記述を加えました:

# config.toml
# カスタムソーシャルリンク
[[Params.widgets.social.custom]]
  url = "https://note.com/terashim"
  icon = "svg/note.svg" # "layouts/partials" からの相対パス
[[Params.widgets.social.custom]]
  url = "https://qiita.com/terashim"
  icon = "svg/qiita.svg"

Twitterウィジェットの設置

Mainroad テーマでは layouts/partials/widgets/<name>.html にテンプレートファイルを保存することによって独自のサイドバーウィジェットを作成することができます(参考)。 このサイトでは独自サイドバーウィジェットとして Twitter タイムラインの埋め込みを行いました。

Twitter タイムライン をサイドバーに埋め込むには、まず Twitter のヘルプ記事 に従って埋め込みコードを作成し、Hugo部分テンプレートファイル layouts/partials/widgets/twitter.html として保存します。 これでサイドバー用ウィジェット “twitter” として使えるようになります。

そして Hugo 設定ファイル config.toml.Params.sidebar.widgets フィールドの値に "twitter" を追加すればサイドバーにウィジェットが追加されます:

# config.toml
[Params.sidebar] # サイドバーの設定
  home = "right" # ホームページでは右に表示
  list = "right"  # 一覧ページでは右に表示
  single = false # 個別ページでは表示しない
  # ウィジェットを並べる
  widgets = ["search", "recent", "categories", "taglist", "social", "twitter"]

プライバシーポリシーページの作成

サイトに Google アナリティクスを導入するためには、プライバシーポリシーのページを作成して Cookie の使用等について明記する必要があります。

このサイトではプライバシーポリシーページを /privacy/ のパスで公開することにしました。

固定ページを /privacy/ のパスで公開するには、Markdownのソースファイルをファイルパス content/privacy.md に作成します。このサイトでは以下のような内容にしました:

---
title: プライバシーポリシー
comments: false
---

このサイトでは利用状況を分析するために Google アナリティクス を使用しています。
Google アナリティクスはCookieを使用してこのサイトへのアクセス情報を Google に送信しています。

Google アナリティクスでデータが収集、処理される仕組みについては「Google のサービスを使用するサイトやアプリから収集した情報の Google による使用」のページ(<https://policies.google.com/technologies/partner-sites>)をご覧ください。

フッターにこのページへのリンクを加えるため、メインメニューと同じように設定ファイル config.toml で以下のように記述します:

# config.toml
# フッターメニュー
[[Menus.footer]]
  Name = "プライバシーポリシー"
  URL = "/privacy/"

Google アナリティクス (GTM) の設置

Hugo には Google アナリティクス のタグ埋め込み用テンプレート が用意されており、設定ファイル config.tomlgoogleAnalytics = "トラッキングID" のように書き込めば簡単にトラッキングコードを埋め込むことができます。しかし、このテンプレートのトラッキングコードはやや古いタイプの analytics.js で実装されているため、このサイトでは代わりに Google タグ マネージャ (GTM) を使うことにしました。

GTM を Hugo + Mainroad テーマのサイトで導入する手順は以下のようなものになります。

Google タグ マネージャ を使用する際、最初にアカウントとコンテナを作成します。 コンテナを作成すると <head> タグと <body> タグ内にそれぞれコードを貼り付けるよう指示されます。 そのコードをそれぞれ layouts/partials/gtm/gtm-head.htmllayouts/partials/gtm/gtm-body.html に保存します。

Mainroad テーマのテンプレートファイル themes/mainroad/layouts/_default/baseof.html をオーバーライドするため、このファイルを layouts/_default/baseof.html にコピーします。そしてコピーしたファイルを編集して <head> タグ内に {{ partial "gtm/gtm-head" . }} を、<body> タグの開始直後に {{ partial "gtm/gtm-body" . }} を、それぞれ挿入して保存します。

このようにして修正されたテンプレートファイル layouts/_default/baseof.html の内容は次のような形になります:

<!DOCTYPE html>
<html class="no-js" lang="{{ .Site.Language.Lang | default "en-us" }}">
<head>
	<meta charset="UTF-8">
	
	(省略)
	
	{{ partial "gtm/gtm-head" . }}
</head>
<body class="body">
	{{ partial "gtm/gtm-body" . }}
	
	(省略)
	
</body>
</html>

サイトをビルドすると layouts/partials/gtm/gtm-head.htmllayouts/partials/gtm/gtm-body.html の内容が全ページに埋め込まれます。これで Google タグ マネージャ のインストールは完了です。

これで Google タグ マネージャ の管理画面上で設定すれば Google アナリティクス のタグを配信することができるようになります。設定方法についての詳細は “タグ マネージャーで Google アナリティクスを導入する - タグマネージャ ヘルプ” などに記載されています。

Disqus の設置

記事にコメント欄を設置するため、Disqus を導入しました。

Disqus を導入するにはまずアカウントを作成し サイトを追加 します。 Disqus でサイトを追加すると、そのサイトを識別する ショートネーム が発行されます。

Hugo では設定ファイル config.tomldisqusShortname に発行されたショートネームの値を入れるだけで Disqus を有効にすることができます:

# config.toml
disqusShortname = "[発行されたショートネーム]"

参考