HUGOのオリジナルテーマを作成する時に知っておきたい最低限の知識

HUGOでオリジナルテーマを自作する前に

HUGO公式サイトのテーマ集は、WordPressと違ってクオリティの低いテーマの割合が多く、それだけで「やっぱHUGOじゃなくてWordPressだな」と思われてしまいそうですが、自分がいくつかHUGOでオリジナルテーマでサイトを公開してみて思ったのは、

1. 作り込めば、WordPressと同じくらいのサイトは余裕で作れる
2. だけど、できないこと(Formなど)はどうやってもできない

ということです。

できることを理解して、できないことを捨てるのが大事

ブログでもECサイトでも会員制サイトでも何でも出来るWordPress と違って、HUGOは出来ることが限られます。

HUGOは、「ユーザーに動的に情報を提示する」ことができません。しかし、それ以外は、「WordPressで出来ることは、ほぼHUGOでもできる」思って間違いありません。

HUGOでサイトを作成していて思ったのは、自分のこれまでの制作事例を振り返ってみても、「そもそも動的に出す必要があったのか？」ということです。

例えば、レコメンドや人気記事のブロックはデータベースがあるほうが便利ですが、「動的に出す必要があるのか？」と考えると、意外と静的でも問題ないケースがほとんどです（だからこそ、SUPER CACHEなどのキャッシュプラグインが人気なのだと思います）。

HUGOでサイトを作る際は、「その機能は本当に必要か？」をしっかり考えて、シンプルに作り込むのが良いと思います。

ベーステーマを選んでカスタマイズすることから始める

いきなりHUGOの公式サイトのドキュメントとか、ネット上の情報だけで作ろうとすると、意外と仕組みがわかりづらく挫折しそうになるかもしれません（自分がそうでした）。

そういう方は、いきなり「hugo new theme」で自作するのではなく、最初は好きなテーマを探して、カスタマイズして動かしながら覚えていくのがオススメです。

Hugo Themes

ベーステーマにおすすめのHUGOテーマ

自分の場合は、AMP対応をしたかったので（というか全ページがデフォルトでAMP）、Gohugo Ampというテーマをベースに、自分でカスタマイズしたものを利用しています。

このテーマ、デモページを開くといきなり真っ白でビビるんですが、これはboilerplateで中身が何もないためです。逆にいうと、中身が何もない分、スッキリした状態から始められるので、自分には合ってました。

{% card-link %}

自作する前に知っておきたいTips

実際に動かす前に、「ここがわかってたら、もっと理解が進んだのに！」と自分が思った部分をピックアップしておきます。

1. テンプレートで使うファイルはHTMLファイルが基本（だけど、cssなども読める）
2. テンプレートで変数や関数を使う場合は「{{}}」で囲う
3. テンプレートの関数については、それ自体で完結しないものは「{{end}}」がつく。
4. サイトやページの情報は、何もしないでも「.Site」や「.Page」などの変数に格納されている
5. デフォルトで格納されている変数を書き換えることはできない（変数を追加はできる）
6. 一覧を出す時は「where」などでSQLっぽいこともできて、意外と自由に一覧をカスタマイズできる
7. ディレクトリの深掘り（example.com/hoge/fuga/piyo/kekekeke/など）はできなくはないけど、かなり辛い。2階層くらいが限界。
8. ページごとのテンプレートの読み込まれ順は、一覧で見てもすぐにはイメージできないから、とりあえず作って動きを見て、確認するほうが良いかも（人による）
9. 検索機能も作れなくはない（Javascriptで）。ただ、小規模サイトにおいては、「ユーザーにサイト内検索を使わせるほうがハードルが高い」から、最初はなくても良い。

テンプレートエンジンでよく使うものを理解しておく

テンプレートでよく使うものを理解しておくだけでも、大まかなテンプレートの作成ができるので、作業のスピードアップができます。

ここでは、自分がテンプレートをいくつか作っていて「毎回使うなぁ」と思うものをピックアップします。

パーツのHTMLファイルを合体させてくれる「partial」

{{ partial "structure/head" . }}

HUGOの中で配列をループさせる「range」

{{ range (.Paginator).Pages }}
処理
{{end}}

条件文を実行する「if」

{{ if gt (len $notes) 0 }}
処理
{{ else if gt (len $notes) 0 }}
処理
{{ else }}
処理
{{end}}

変数を制限する

{{ with .Site.Data }}
.Site.Data以下のデータにしかアクセスできない。
よって、.Titleの格納変数も変わる。
{{end}}

フレームワークを使ったことがあって勘がいい方はこれだけでもオリジナルテーマが自作できるかもしれませんね。ちょこっとWordPressのテーマを触ったくらいの方でも、ここを理解しておけば、最低限のテーマは作れると思います。

HUGO変数を理解する

HUGOでテーマを作る場合に、変数は必須パーツです。HUGOの変数の処理は、WordPressに近い動きをします。

URLに対して自動で変数に値を入れてくれる

HUGOの変数は、基本的にPermilink（ページのURL）に対して自動で格納され、変数の中身はPermalinkによって異なります。

例えば、

{{ .Title }}

という同じ変数でも、

• トップページ -> 「サイト名」
• 記事ページ -> 「記事のタイトル」
• タクソノミー（タグに関するページ） -> 「タグ名」

という風に、.Titleの中身が格納されます。

実際にサイトを作っていると、

1. 記事ページのHTMLタイトルを「記事タイトル | サイト名」という形にしたい
2. タグページは「XXタグのページ一覧」にしたい

と、それぞれのページでheaderのtitleの部分を変えたいケースがあります。

この場合には、テンプレート側で条件分岐をして処理を必要が出てきます。先程「自作する前に知っておきたいTips」で書いた通り、HUGOでは変数を上書き出来ないので、ページによってif文で条件分岐することになるでしょう。

HUGOのオリジナルテーマを作成する時に知っておきたい最低限の知識を簡単にまとめました。

感覚を掴んでしまえば悩むところは少ないのですが、慣れるまでは悩むところが多い気がしたので、これからHUGOでテーマを自作する方の何かの助けになれば幸いです。