WordPress から Hugo への移行（１）サンプルページの表示まで

現在運用中のサイトの一つで、ドメインを移行作業をしている。

これに伴い公開サイトの Docker 化をしたりしているが、WordPress に関してもこれを機に Hugo に移行することにした。WordPress はアップデートが多くてマネージメントが手間だし、セキュリティー上の不安もある。Hugo ならもっと管理がしやすいらしい。

今回移行する WordPress は記事数が 2000 を超えている。Hugo への移行では手作業がどうしても発生してしまうので、できるだけ自動化したり移行しやすいよう頭を使う必要がある。

一旦 Mac の Hugo で元のブログを再現し、公開方法についてはまた考えることにする。

移行元：
・スターサーバー
・WordPress 6.2

作業環境：
・macOS Ventura 13.5（英語環境）

（１）準備としてあれこれ WordPress をいじるので、念のためバックアップをしておく。

僕は BackWPup と All-in-One WP Migration を使用した。万が一に備えて２種類のバックアップをしている。

BackWPup – WordPress Backup Plugin – WordPress plugin | WordPress.org
https://wordpress.org/plugins/backwpup/

All-in-One WP Migration – WordPress plugin | WordPress.org
https://wordpress.org/plugins/all-in-one-wp-migration/

（２）Hugo への変換においてよけいなショートコードなどがあると手直しが発生するので、WordPress からなるべく不要なプラグインを削除しておく。

（３）WordPress からのデータの書き出しについては Hugo の公式サイトに書かれている。

Migrate to Hugo | Hugo
https://gohugo.io/tools/migrations/#wordpress

Jekyll Exporter は WordPress にプラグインをインストールできるが、なぜか動かなかった。

Jekyll Exporter – WordPress plugin | WordPress.org
https://wordpress.org/plugins/jekyll-exporter/

wordpress-to-hugo-exporter は WordPress にプラグインを手動でインストールする必要があったがうまく書き出せた。WordPress の管理画面で「Tools＞Export to Hugo」をクリックするとダウンロードが開始する。

GitHub - SchumacherFM/wordpress-to-hugo-exporter: Hugo is static site generator written in golang. Wordpress is a tool for remote access to your server ;-)
https://github.com/SchumacherFM/wordpress-to-hugo-exporter

ダウンロードしたファイルを解凍し、その中の md ファイルの中身（個々の記事のファイル）を見てみると、Front matter は yaml 表記だった。

（４）Hugo のインストールは以下のコマンド。

$ brew install hugo

（５）新規サイトの作成は以下のコマンド。

$ hugo new site {サイト名}

（６）テーマを以下のサイトから選ぶ。

Complete List | Hugo Themes
https://themes.gohugo.io/

僕はいろいろ試した結果 Stack にした。レスポンシブデザインだし、ダークモードとライトモードの切り替えができるし、カテゴリーのアーカイブページ等が最初から用意されている。pagination もある。こういったことが、exampleSite のディレクトリを content にコピーすることで、少しいじるだけでいい感じになる。

Stack | Hugo Themes
https://themes.gohugo.io/themes/hugo-theme-stack/

GitHub - CaiJimmy/hugo-theme-stack: Card-style Hugo theme designed for bloggers
https://github.com/CaiJimmy/hugo-theme-stack

Stack | Card-style Hugo theme designed for bloggers
https://stack.jimmycai.com/

テーマのサイトに説明が書いてあるが、cd コマンドで５で作成したサイトのディレクトリに行き、以下のコマンドを実行することで themes ディレクトリにテーマのファイルが入る。

$ git clone https://github.com/CaiJimmy/hugo-theme-stack.git themes/Stack

hugo.toml ファイルに以下を追記することで、Stack をテーマに設定できる。

theme = 'Stack'

（７）３の WordPress からの書き出しファイルのうち、posts にある適当な md ファイルを、Hugo サイトの content ディレクトリに入れる。

（８）以下のコマンドで Hugo のサイトを立ち上げる。

$ hugo server

http://localhost:1313/ にアクセスすればサイトが表示されるはずだ。

７の md ファイルに書かれた URL を見て、http://localhost:1313/{７の URL } にアクセスすれば、そのページが表示されるはずだ。

ctrl + c でサーバーを止める。

静的 HTML ファイルの出力は以下のコマンド。public ディレクトリに出力される。

$ hugo

参考：
Front matter | Hugo
https://gohugo.io/content-management/front-matter/

MacにHugoを入れて、ローカルでサンプルサイトを立ち上げるまで - テストウフ
https://yoshikiito.net/blog/archives/1976/

メモ置き場を Hugo に移行した – 荒木武蔵のメモ置き場
https://musashi.araki.jp/2018/07/10/the-blog-has-migrated-to-hugo/

Webサイト高速化のための　静的サイトジェネレーター活用入門 (Compass Booksシリーズ)