Hugoでテーマをカスタマイズする方法

Go言語で書かれた静的サイトジェネレーター Hugo

Hugoとは、Go言語で書かれた静的サイトジェネレーターです。

Hugo - https://gohugo.io/

Go言語に慣れたいという事から使い始めたのですが、とても気に入っています。 エンジニアとしては、マークダウンで書けるというのが楽で良いです。

そして、たくさんのデザインのテーマがあり、これらを使うと簡単にカッコいいサイトを作れます。 でも、少しだけカスタマイズしたいという時もあります。

例えば、項目を追加したい・削除したい、画像をヘッダーに追加したい、フッターを変えたいなどたくさんあります。

今回、デフォルトのテーマではhreflangが設定されてなかったので、hreflangを追加したいと思います。

テーマのカスタマイズ:hreflangの追加

カスタマイズの方法

分かりやすいように、このサイトで使用しているbeautifulhugoのテーマを具体例にして説明します。

beautifulhugoのテーマは、/themes/beautifulhugoフォルダの中に配置されています。 例えば、このテーマのうち/themes/beautifulhugo/layouts/index.htmlを変えたい場合は、 別に/layouts/index.htmlを作成してあげると、テーマのデフォルトのhead.htmlを上書きする事ができます。

変更したいファイルを複製して上書き

今回はhreflang<head>内に追加するので、head.htmlに追加すれば良いです。

まず、同じ内容のファイルを複製します。 /themes/beautifulhugo/layouts/partilas/head.htmlと同じファイルを、 /layouts/partilas/head.htmlに作成します。

コマンドラインで書くと、このような感じです。

$ cd [hugoのドキュメントルート]
$ cp ./themes/beautifulhugo/layouts/partilas/head.html ./layouts/partilas/head.html

これですでに上書きされている状態になっています。 (ファイルの中身を複製したのでいまはまだ変更が確認できないです。)

hreflangの追加

では、複製したファイルにhreflangを追加してみます。

# /layouts/partilas/head.html
<head>
  ...略
  <link rel="alternate" href="http://takp.me" hreflang="en" />
  <link rel="alternate" href="http://ja.takp.me" hreflang="ja" />
  <link rel="alternate" href="http://takp.me" hreflang="x-default" />
</head>

これで、上記のhreflangが出力されます。 ターミナルで $ hugo server -wとすればローカル環境で確認できるので、確認してみてください。

このようにとても簡単にテーマをカスタマイズ出来るので、テーマをもとにどんどん変更を加えられます。

ぜひHugo使ってみてください。

参考リンク

by @takp