ITオムライス

Hugoのテーマを自作した

2020-02-17 技術系

シンプルなデザインが好きなので、ほかのテーマをカスタマイズするより、作ったほうが早そうなので作ってみました。
いろいろやったので、やったことを忘れないようにまとめました。

今使っているテーマが作ったテーマです。中身はGithubで見れます。
nobarudo/nihility

テーマの作り方

準備

テーマを試す用のサンプルを用意してくれているのでクローンすることろから始めます。

git clone https://github.com/gohugoio/hugoBasicExample.git

hugoのコマンドでテーマもnewできるので、newします。newすると基本的なファイルを作ってくれます。

hugo new theme [name]

基本的なページのテンプレートの作成

indexやリストの作り方は、下の公式に記載されているので、参考にして作成しました。

Hugo’s Lookup Order | Hugo Partial Templates | Hugo

自動で生成されるページごとに使われるhtmlファイルの名前が決まっているので、書いていくだけです。基本的にはGo言語のテンプレートエンジンの書き方で記述する必要があるので、Go言語の公式も見ておく必要があります。

baseof.htmlに基本的な構成を記述してコンテンツ部分に埋め込めるようにしておけば、ほかのhtmlはコンテンツ部分だけを記述するだけなので、ブログに必要なページを一通り作るだけならそれほど時間はかからず作ることができます。

やったこと

メニュー

ヘッダーとフッターにメニューを入れられるようにしました。Menusという機能でメニューを作成できるのですが、今まで使っていたテーマがconfig.tomlで設定するものが多かったので、自分もconfigで設定できるようにしました。

Menus | Hugo

拡張性

headやcssをカスタマイズしたいときに、編集しやすいようにカスタマイズ用の空ファイルを作りました。

generator

HugoはHugoのコミュニティを成長させるために、metaタグにgeneratorを明記することを推奨しています。

以前は{{ .Hugo.Generator }}をヘッター内に記述するだけで良かったみたいですが、いまは警告が出るようになっていたので、{{ .Site.Hugo.Version }}で対応しました。

<meta name="generator" content="Hugo {{ .Site.Hugo.Version }}" />

GoogleAnalytics

GoogleAnalytics使いたいのでconfig.tomlで設定できるようにしました。 GoogleAnalyticsはテンプレートが用意されているので、_internal/google_analytics.htmlを呼び出すだけで完結しました。
テンプレートのほうで、config.tomlで設定されているかを判定してくれるので、headで呼び出すだけでした。

コメント

コメントがつけられるようにDisqusを使っていたので、そのまま使えるようにしました。 Hugoの公式のテンプレを張り付けるだけで実装できました。

Comments | Hugo

Shortcodes

記事の中にHTMLを埋め込める機能があるのですが、埋め込むためのテンプレートが必要になるので、テーマのほうで基本的なものを用意しておきました。

SEO

SEOについては詳しくないので、最低限推奨されているmetaタグと、descriptionを記事ごとに設定できるようにしました。どこまで効果あるかはわからないです。

シェアボタン

記事の最後にシェアボタンを表示するようにしました。かなり簡易的に実装したので、configとかで設定できるようにしたい。
シェアボタンの見た目をきれいにするのに思ったより時間がかかってしまった。

そのうち対応したいこと

  • amp
    ブログでamp対応する必要あるのか微妙なので余裕があったら、勉強がてらやってみたい。
  • themes.gohugo.ioに乗せてもらう
    いろいろやらないといけないことがあるので、めんどくさい。余裕があったらそのうちやりたい。

感想

作ってみて、思ったよりすぐに作れました。気になるところがあれば、少しずつ直していこうと思います。
Go言語のテンプレートエンジンについて、今まで、あまり使ったことがなかったですが、少し理解が深まった気がします。

参考

Hugoのテーマを何個か作ったので知見をまとめてみる - blog.unresolved.xyz

Archive Page in Hugo

Hugoで月別アーカイブを作る | backport

Hugoで作ったサイトにシェアボタンを足した | AABrain