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

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

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

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

# ターミナルで
brew install hugo

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

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

# ターミナルで
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 は静的ウェブサイトのホスティングサービスです。 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 でパラメータ hasCJKLanguage を true に設定します。

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

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

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;
}

これら２つの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/"

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

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

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

アイコン表示用の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"

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/"

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

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

Google タグ マネージャ を使用する際、最初にアカウントとコンテナを作成します。 コンテナを作成すると <head> タグと <body> タグ内にそれぞれコードを貼り付けるよう指示されます。 そのコードをそれぞれ layouts/partials/gtm/gtm-head.html と layouts/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.html と layouts/partials/gtm/gtm-body.html の内容が全ページに埋め込まれます。これで Google タグ マネージャ のインストールは完了です。

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

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

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

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

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

• Hugo
  • ホームページ "The world’s fastest framework for building websites | Hugo"
  • チュートリアル "Quick Start | Hugo"
  • Netlify でのホスティングについて "Host on Netlify | Hugo"
• Netlify
  • ホームページ "Netlify: All-in-one platform for automating modern web projects"
• Mainroad
  • "Mainroad | Hugo Themes"
  • GitHub "Vimux/Mainroad: Responsive, simple, clean and content-focused Hugo theme based on the MH Magazine lite WordPress theme"
  • デモ "Mainroad"
• Disqus
  • ホームページ "Disqus - The #1 way to build an audience on your website"
• Google タグ マネージャ と Google アナリティクス
  • "ウェブとモバイル用のタグ管理ソリューション - Google タグ マネージャー"
  • "お客様のビジネスに適した分析ツールとソリューション - Google アナリティクス"
• Twitter
  • "タイムラインを埋め込む方法"