HugoでBlogを作ってみた

Hatenaブログを独自ドメインに移行しようと思い立ったのですが、毎月700円かかるため、他のブログシステムで良いのないか探していました。

しかし、希望するものがなく、自前で環境用意するのが simpleかつコストも安く抑えられそうという気がしたので、少し試してみました。

ブログに求める機能

自分が必要とする機能を整理すると以下。

Must

独自ドメインが利用できる
HTTPSが使える
markdownが使える
templateが豊富（デザインで悩みたくない）
Tagging
記事の検索
低価格

今回改めて他のサービスを調べてみたところhatenaブログは結構良いかもしれないと思いました。個人的には「価格」以外は満たしていそう。
（いろんなscriptがinjectされて重たかったりするのは難点ですが、、、）

Better

Webの管理機能（webからブログ更新できる手軽さが欲しい）

こんな感じでしょうか。

Hugoとは

goのframeworkで高速かつ、Themeも豊富（だが探すのが結構大変）で、流行ってるようでしたので今回試してみました。

静的なファイルにビルドして、Netlifyにデプロイしちゃえば、お金かからず利用できます。
（デプロイに少し時間がかかってしまうのがネックといえばネック。）

Installation

ご参考：公式ドキュメント（Quick Start | Hugo）

ざっくり書くと、以下。

Macの場合はbrew で install
Themeを Complete List | Hugo Themes から選ぶ
Themeを git submodule add or ダウンロードして配置（themes以下）
Theme毎の設定を実施（だいたいThemeのページ辺りに実施方法が書いています）

あとは、 hugo serve すれば動きます。作業自体は難しくありません。

Themeカスタマイズ方法

Themeに手を入れるケースは時々あると思います。 HTML関連は、 layouts 以下に格納されており、Themeのファイルと同じ構成でプロジェクトルート以下に用意すればokです。

cssのカスタマイズは、基本的にはcustomize用のcssをstatic以下に配置して上書きを行います。（Themeによって、customize用のcssを設定ファイルで指定するようなものもあるようです。）

感想

良いところ

高速（static以外は、保存時に即時反映されるので、気持ちよくかけます。）
Themeのカスタマイズもそれなりにできる（layouts をコピーして修正すれば良いですし、そんなに難しくはないです。）
Deploy簡単（参考：Host on Netlify | Hugo）

良くないところ

Webの管理機能が無い
これは仕方がないですが、必要であればgithub上でmarkdown追加すれば、自動でdeployできるのでそこまで困らない気はします。

Theme選びが大変

Themeはかなりたくさん用意されているので、そこから選ぶのも一苦労。また、ぱっと見どういう機能があるのかというのが分かりにくいです。デモページは、だいたい用意されているようなので、なんとなくは確認できますが、デモページに用意されていない機能を確認する場合、（例えば syntax highlight がどういう感じかなど）実際に手元で起動させる必要があります。今回3つほど実際に動かしてみましたが、実装や設定内容もそれぞれ違うので、このTheme選びは結構重要です。

結果選んだのは、こちらの MemE | Hugo Themes 。おしゃれなヘッダーとsimpleなブログデザインに惹かれて選んでみました。
light/darkモードに切り替えもできるし、かなり設定項目も多いです。
中国の方が作成されていて、Github Issueとか見るの辛いかと思ったのですが、英語はokそうだったので今回利用してみました。