WordPressからHUGOに乗り換え

blog, web, ツール
目次

これまで WordPress を使って blog を公開していましたが、静的サイト・ジェネレーターの HUGO に乗り換えました。

HUGO にして良かった点

  1. 速い。公開用の HTML ファイルなどの生成が一瞬です。
  2. 早い。表示速度が WordPress と全然違います。WordPress の場合記事が表示されるまで１テンポ間が開きますが、HUGO の場合は一瞬でページが開きます。
  3. 楽です。記事ごとにフォルダーを分けて作成できるので、関連する画像ファイルをなくす心配がありません。とりあえず表示させなくとも関連するものをすべて入れておけます。もちろん関係のないファイルは、公開用フォルダーには入りません。
  4. 楽です。原稿などただのファイルですので、Git で管理できます。ですので、書き直してもかんたんにもとに戻すことができます。
  5. もう一つ楽です。最近の WordPress も Markdown で記事をかけますが、記事を作成するときにテキストエディタだけで済むのはやっぱり楽です。

Lighthouse の指標を WordPress と比較

もう少し客観的な指標としてLighthouseでGoogle Chrome 59 の Headless モードを使ってみるを測定した指標を示します。

Web サーバには Apache2 を使用して、バージョンやほとんどの設定は同一です。

SEO の指標が HUGO で少し下がっていますが、Performace に関しては大きく改善しています。

WordPress の Lighthouse 指標

WordPress

HUGO の Lighthouse 指標

HUGO

WordPress から記事の抜き出しと加工

WordPress は MySLQ(MariaDB)に記事が格納されていますが、HUGO では記事を単純な Markdown 形式のテキストファイルで作成します。そのため新しいシステムに移行するためには、WordPress の記事を個別のファイルに変換する必要があります。

最も WordPress の記事を Markdown ファイルに抜き出すプラグインwordpress-to-hugo-exporterがあるので、これを使えばかなり手間が省けます。この他にも WordPress の何種類か変換方法がありますし、その他の CMS から Hugo への乗り換えをサポートするソフトが色々ありますのでMigrate to Hugoでうまく行く方法を探してみてください。

wordpress-to-hugo-exporterで Markdown ファイルにはなったのでですが、所々にうまく変換できず HTML が残っていることがあります。この HTML の部分は、デフォルトでは HUGO が削除されていまいます。そのため HTML をいい感じに修正する必要があります。

HTML の修正は手で個別に行えばいつか終わりますが、大抵は HTML を markdown に書き換えるプログラムが欲しくなると思います。私は、残った HTML を Markdown に変換するのに Python のmarkdownifyというライブラリーを使用しました。

HUGO で初めてのサイトを作成

Markdown ファイルを準備できたら、サイトを作成します。

Hugo をインストールしたら、Quick Startを参考にサイトを作成します。

HUGO は、２つの部分で構成されています。

  1. Markdown や見た目を決めるテーマからサイトを作成するhugoコマンド
  2. サイトの見た目を決めるテーマのファイルセット。

表示する仕組みと見た目を決める部分が別れているのは、WordPress と同じです。

テーマには沢山の種類がありますが、オーソドックスな感じなMainroadというテーマにしました。

hugo new site blog
cd blog

# テーマを導入する。
git submodule add https://github.com/vimux/mainroad themes/mainroad
echo theme = \"mainroad\" >> config.toml

# 試してみる。
hugo server -D # -D は、draft状態の記事も表示する。

Quick Startを参考に一通り試してうまく行ったので、ゼロからサイトを設定しようとしたら

WARN 2021/09/03 20:35:25 found no layout file for "HTML" for kind "home": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.

というエラーが発生してブラウザーに何も表示されなくなってしまいました。

原因は非常に単純で、見た目を決める theme をconfig.tomlに追加し忘れていたからでした。

こんな単純なエラーは Google で検索しても有益な解決策が見つかりませんでした。ということで、恥を忍んで同じ恥ずかしいエラーで困った方のために記録を残しておきます。

新しい記事の作成

これまでのサイトを無事に移行できたら、新しい記事を作成します。

手でディレクトリーを作成して Markdown ファイルを作成してもよいのですが、次のようにコマンドで最低限の項目が入力された Markdown ファイルを準備することができます。

# at the top of site
# content 以下に自動的に作成される。
hugo new post/2021-09/2021-09-03_hugo/index.md # (1)

# or

hugo new post/2021-09/2021-09-03_hugo.md # (2)

記事に使用する画像の置き場所

記事の原稿となる Markdowd ファイルは、上のように二種類指定方法がありますが、記事ごとにフォルダーを作成する(1)をおすすめします。

その理由は、記事に関連する画像の管理が楽になるからです。

記事フォルダーに記事原稿をindex.mdとして作成すると、そのフォルダー内にある画像ファイル名を指定するだけパスを気にせず参照することができます。

そして、同じフォルダーに原稿と画像があるので、移動や保存するときに関連する画像が行方不明になることも避けられます。