Hugoでブログを構築してみた

初めてブログをHugoで構築してみました。 正確には以前Hugoを使って構築されたブログの記事を書いたことはあったのですが、自分で立ち上げてNetlifyでデプロイするしたりテーマをカスタマイズしたりするのは初めてです。 何点か初歩的なお作法で詰まったのでそれを記事にしてみようと思います。

テーマのカスタマイズ方法

今回ブログを作るにあたって、素のHugoにAnankeというテーマを導入して構築することにしました。 テーマはgithubのサブモジュールとしてrepositoryに取り込んでいます。

git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke themes/ananke

これで非常にシンプルで初心者でも理解しやすい最低限のブログが立ち上がるのですが、流石にシンプルすぎるので色々とカスタムしたいなと思いました。 その際に気をつけるべきは以下です。

index.htmlはいじらない

index.htmlのなかのclassに文字色などの指定を見つけることができます。これをいじろうとするのが初心者にありがちなミスで私もやってしまいました。

ただよく考えてみてください。HugoはMarkdownで記事を書くことでbuildしてhtmlに変換してサイトを作れるツールだったはずです。トップページもbuildされるたびに更新が走るので、せっかくindex.htmlをカスタムしても元に戻ってしまいます。

anankeを使っている場合は、ananke/layouts/partials配下にコンポーネントごとの細かいhtmlファイルがあるので、こちらに注目しましょう。

サブモジュールのソースコードはいじらない

とは言ったものの、anankeのソースコードを直接改修するのも得策ではありません。

というのもanankeのソースコードに更新があって自分のプロジェクトにも取り込んだ時に、自分がローカルでいじっていた部分が上書きされてしまうかもしれないからです。

ここでの正しいやり方は、root直下のlayoutsにpartialsを切ってそこに同じ名前のファイルを作り、theme側のhtmlをオーバライドすることです。

cp themes/ananke/layouts/partials/site-header.html layouts/partials/site-header.html

こうすることで自動的にプロジェクト直下のhtmlを参照してくれてサイトをカスタマイズすることができます。cssをいじりたいときも似たような考え方で、root直下にassets/cssを作ってそこに適用したいcssを用意します。

それをroot直下のlayouts/partials/xxxx.htmlの中で読み込んで適用してやればOKのようです。こちらはまだ自分では試していないので、以下のコードをそのまま使うことはできないかもしれません。ただ考え方としてはオーバーライドです。

/* assets/css/custom.css */
.site-description {
    color: #ff0000; /* ここに好みの色を指定 */
}

<!-- layouts/partials/site-header.html -->
<link rel="stylesheet" href="{{ "css/custom.css" | relURL }}">

最後にビルドを走らせて変更が永続化されていることを確認しましょう。

hugo server

感想

Hugoでのブログ構築は非常に簡単でした。しかし一方でanankeなどをそのまま使っているとすぐにそれとわかる独特のデザインになってしまうのでそこはマイナスポイントかなと思います。高速なブログを構築したいなと思っている非エンジニアの方でHugoに行き着いた方は、一度livedoorブログなどの既存のブログサービスを検討してみるのがいいかなと思います。

html,css,markdownの知識は必要ですし、もちろん管理サイトも用意されていません。なによりどこにデプロイするかなど自分で管理すべきことが非常に多いです。

そこまでの知識を持っていて初めて便利に感じるツールだということです。さらに辛いのはそこまでややこしいにもかかわらず、モダンなデザインのオシャレなサイトや多機能なサイトを作ろうとするとテーマを導入してそれを深く理解するもしくは拡張するなどが必要で、HugoよりもReactで作った方が…みたいなことも出てきそうです。

自分で好んで導入しておいてなんですが、以前使っていた時と変わらず痒いところに手が届かないツールなのかなという印象を受けました。とはいえNetlifyと相性がよく無料でデプロイできる点や、超高速でブログを立ち上げられる点は十分なメリットかなと思います。まだまだ自分も初心者で、慣れれば気にいる可能性もあるのでしばらくはHugoでブログを運用していこうかなと思います。

• Hugo