[Hugo] WordPressからHugoに引っ越ししました
Nプログラマ(@Nprog128)です。
最近メインドメイン（ https://nprog256.net ）のサイトもWordPressからHugoに引っ越ししました。（日記系はすでに乗り換え済み）
乗り換えた感想などをつらつら書いていきます。
Hugoとは
Go言語製の静的サイトジェネレータです。
他のジェネレータはJekyllを使ったことがありますが、Hugoのビルド速度は本当に速かった。。。
なぜHugoを選んだの？
候補はJekyllもあって、 最終的にHugoに決めた理由はこんな感じ。
ビルドが速い
Hugoを使っている方のブログを拝見すると、皆さんビルドの速さに驚いていますね。自分もJekyllを使ってみたので、比較するとかなり速い感じがします。
ドキュメントが豊富
Hugoのドキュメントサイトは章によっては、チュートリアル動画があります。英語なのであんまりよく分かりませんが、実装の画面もあるのでなんとなくニュアンスは分かります。
サンプルソースも多くわかりやすい印象を受けました。
なんとなく使っていて楽しい
Jekyllを使っていた頃よりも、楽しいと思えながら使うことができました。名前はJekyllの方が好きなんですが。。。
あ、Jekyllが悪いということではないので、そこのトコロよろしくです。
乗り換えてみて
良かった点
ページの表示が速い
かなりページの表示が速くなった感じがします。DBを使っていないのが大きいのでしょうか。
PageSpeed Insights で計測するとこんな感じのスコア。
| デバイス | スコア |
|---|---|
| PC | 96 |
| モバイル | 60 |
PCのスコアがものすごいな。。。
モバイルのみCDN配信のファイルで時間がかかっているようなので、gulpを使ってファイルをまとめてから再度検証してみようと思います。
記事を書くのが快適
使い慣れた環境（IDE or Editor）を使って記事を書くことができるので快適です。ショートコードが便利
Hugoの機能にショートコードというものがあり、HTMLのSnippetを作成することができます。WordPressの再利用ブロックのような使い方ができます。
設定ファイルから値を読み出したりできるので、工夫するとかなり使いやすいです。
git管理できる
コンテンツをgitで管理できるので便利。変更箇所の履歴が把握できるので、cssなどをすぐに前のバージョンに戻せたりできる。
あと、git管理しているのでバックアップをする必要もないところがいい。
ちょっと注意しないといけないのは、画像が多めだとリポジトリの容量が肥大するトコロ。
これはオンラインストレージなどを利用すれば回避できそうなので、問題なし。
（すでにコミットした分については、歴史改変の必要があるけど）
苦労する点
足りない機能は自分で作る必要があることですかね。
WordPressだとpluginで補うことができましたが、Hugoではそういうのがないので自作する必要があります。
とはいえ大抵のことはHugoの機能やテーマに準備されていることが多いので、そんなに困ることはないかと思います。
自分がカスタマイズした主なトコロはこんな感じです。
2カラム化
なかなか欲しいデザインで2カラムというのがなかったので、自分でカスタマイズしました。bootstrapが使われているテーマであればグリッドシステムを使えば、比較的カンタンに2カラム化できるのでやってみるといいです。
関連記事の表示
関連記事の表示はHugoのrelated contentという機能を使えば表示できるので、そんなに難しくないです。自分は選んだテーマにこれを使った実装が組み込まれていたので、設定するだけで使えました。
あとは細かいところを気がついた時に、チョコチョコ修正して改善しながらやっています。
乗り換えた理由
Gutenbergに慣れない
ブラウザのテキストエディタに慣れることができませんでした。。。（笑）
クラシックエディタに比べてブロック単位での編集は非常に便利だと思っています。
ですが、使い慣れた環境(IDE or Editor)で書くのが１番ラクです。
このテキストもPHPStorm + IdeaVimの環境で書いています。
おわりに
WordPressからHugoに乗り換えた時のことをつらつらと書いてみました。
思い出したらチマチマ追記してきます。
乗り換えを検討している方へ参考になれば嬉しいです。
それでは、このへんで。
バイナリー！
