ブログをHugoに移行しました

こんにちは、たかしです。
今までNext.js製のブログだったのですが、カスタマイズするのに面倒なことが多いし、静的なブログのためにReact書くのも面倒だなと思ったのでHugoに移行しました。
Hugoに使い方についてはたくさんweb上にあると思うので特に書きませんが、Hugoの良いなと思ったことを書きます。

ビルドが早い

とてもビルドが早いです。
試しにプロダクションビルドで前のブログ(Next.js)と比較した結果です。

Next.js : 16.36s
Hugo : 3.338s

もちろん単純比較にそこまで意味が無い(使っている言語もライブラリも何もかも違う)のですが、単純なブログを作るなら早いのは嬉しいです。
ちなみに、開発時のサーバーの起動やホットリロードもとても早くて快適です。

標準でscssやPostcss, ESBuildなどの機能がある

静的サイトジェネレーターでmarkdownからhtmlを生成することは簡単にできても、結局cssやJavascriptなどを自前でいじりだすとビルド周りが面倒になりがちですよね。
HugoにはHugoPipesという機能があり、テンプレートに書くだけでcssやJavascriptをビルドしてくれます。
このブログはTailwindcssをPostcssでビルドしているのですが、最初にnpm install tailwindcssしてからはnode_modulesに依存していることを意識せずに開発できています。
hugo new your-dir/post-title.md してから hugo server するだけでサクサク書けるのは良いですね。

テーマがたくさんある

僕は学習のためにBlankという名前のほぼ何も無いテーマにスタイルを当てたり表示をいじったりしていますが、手早くいい感じのサイトを作りたいという人向けにいろんなテーマがあります。
configファイルをいじるだけで自分のサイトができるので楽ちんですね。
細かいカスタマイズもテンプレートを直接いじればOKなので「このテーマの一部だけ変えて使いたい」というのも簡単にできます。

まとめ

僕はまだHugoを使い始めたばかりなので知らない便利な機能がまだたくさんあると思います。
何か発見したらまた書きたいと思います。

日記 日記