Lan's note

高速HUGOブログで脱WordPress!静的ブログでもココまでできるを実証中!

2019-06-16

HexoからHUGOに移行してみた

Hexoで生成していた当ブログですが、この度、Go言語ベースのHUGOという静的サイトジェネレーターに移行しました。

HexoはNode.jsベースなのですが、本業がNode.jsということもあり非常に使いやすく、またカスタマイズしやすいものでした。

ところが、記事数が増えると静的コンテンツを生成するのに2分以上かかるようになってしまいました。

もしかしたら原因は記事数だけではなく、tagの数が多かったり、テーマをカスタマイズして組み込んだ処理(プログラム)に時間がかかっていたのかもしれません。

原因はともあれ、HUGOに移行したら数秒で静的コンテンツを生成するようになりました。(ブログの構成や記事数は同じです。まさに爆速です。)

ということでNode.js使いではありますが、ブログはHUGOを使うことにし、少しだけHUGOやGo言語を勉強しました。(本格的には学ばない!学べない!)

HUGOのインストール

HUGOのインストール方法を書こうと思ったのですが、失念しました。。。

環境としてはKUSANAGILAMPにHUGOをインストールしてあります。

LAMPは必要ないのですが、CentOS7にHUGOをインストールしたということです。

ちなみにバージョンは、

# hugo version
Hugo Static Site Generator v0.55.5-A83256B9 linux/amd64 BuildDate: 2019-05-02T13:03:36Z

となっています。

ということでHUGOのインストール方法はググってください!すいません!

マークダウン記述の記事の修正

Front Matterの修正が主な作業でした。

date

Hexoでは、

date: 2019-06-16 20:46

という記述をしていました。

HUGOではこのままではエラーになったため、

date: 2019-06-16T20:46:00+09:00

というように置換しました。

categories

Hexoでは、

categories:
    - [ナレッジ]
    - [Hexo]

と記述していましたが、HUGOでは、

categories: ["ナレッジ", "Hexo"]

というように配列に書き換えました。

Hexo独自タグの対応

{{< toc >}}<!-- 独自のタグ -->といったタグはそのままにしてHUGOに移行しました。

({{< toc >}}は便宜上全角で表記しています。)

HUGOではHexoのタグが展開されませんので削除するところですがこのまま残しました。

タグについてはHUGO側で処理(プログラム)を追加し対応しました。

tocタグをHUGO内で置換

{{ replace .Content "{{< toc >}}" .TableOfContents | safeHTML }}

このブログのテーマの例ですと、single.html{{ .Content }}を上記の1行に修正し、Hexoで目次を表すtocタグを置換して、HUGOでも目次を表示させています。

.Contentには記事本文が入っています。

.Content内の{{< toc >}}.TableOfContents(目次・見出し)に置き換えて表示しています。

こう処理することでHexoで使っていた記事内のタグをそのまま使い回すことができます。

基本的にタグを置換(replace)する処理をHUGOに書くことで、ほぼHexo記事のまま移行できます。

記事の再配置

HUGOでは記事は、次のように置きます。

content
 └ post
    └ 記事1.md
    └ 記事2.md
    └ 記事3.md
 └ images
    └ 画像1.jpg
    └ 画像2.jpg
    └ 画像3.jpg
 └ subdir
    └ サブディレクトリ記事1.md
    └ サブディレクトリ記事2.md

記事内のディレクトリ構造はそのまま修正なく使える場合がほとんどだと思います。

当ブログもディレクトリ構造は変更せずに済みました。

まとめ

HUGOへの移行はかなり悩みました。

Hexoで時間がかかるとはいえ2分少々。待てない時間ではありません。

それでもHUGOに変更した理由は

  • ジェネレーターが爆速
  • 記事執筆中やテーマカスタマイズ中でも随時ブラウザが更新され最新の情報がすぐに確認できる
  • Hexoは中華系のテーマが多く馴染めなかった
  • HUGOのテーマが洗練されていた(実際にはHUGOテーマは使っていません。HUGOテーマを参考にしてフルAMP仕様のテーマを作りました。)
  • HUGO/Goを少しかじりたかった

などが挙げられます。

HUGOはあくまでブログを書く手段として捉えていて、深く勉強する予定はありませんが、Hexoからの移行にあたりHUGOテーマのカスタマイズを行いましたので、その時のナレッジを共有できそうでしたら記事にしたいと思います。