WordPressからHugoに移行しました

公式ページに掲載されているWordPress用のプラグインです。
WordPressのプラグイン検索画面に表示されなかったのでGitHubからzipファイルをダウンロードしてインストールしました。しかし、プラグインのインストール後にエクスポートを実行すると、サーバー上で503エラーが発生してしまい、データの変換ができませんでした。

Jekyll Exporter & JekyllToHugo

上記のwordpress-to-hugo-exporterが動かないときは下記の方法が紹介されていました。

ℹ️ (Note: If you have trouble using this plugin, you can export your site for Jekyll and use Hugo’s built in Jekyll converter listed above.)

Jekyll Exporterを使用してWordPressの記事をJekyll形式として出力
JekyllToHugoを使用して、Jekyll形式の記事をHugoに変換

こちらはWordPressのプラグイン検索画面からインストールできます。
しかし、このプラグインを実行したところ同様に503エラーが発生してしまいデータの変換ができませんでした。

BackWPupとLocalを使ったWordPressデータ抽出方法

WordPressのバックアップをBackWPupを使用して行っていたので、このバックアップファイルを使用して自分のPCにWordPressの環境を構築できないかと考えました。

検索したところLocalというソフトを使用すればローカル環境にWordPressを構築できそうでした。

https://localwp.com/

下記を参考にBackWPupで取得したバックアップファイルをLocalに適用できるか試してみました。

https://airiitou.com/local_wp_copy/

⚠️ BackWPupを使用してLocal内にWordPressの環境を構築するときは、PHP・Web Server・DBの種類とバージョンをバックアップ環境と合わせてください。

データベースのsqlファイルの移行まではうまくいったのですが、publicフォルダにあるファイルを移行してしまうとデータベースエラーが発生してしまい、移行が最後まで出来ませんでした。

とりあえずデータベースの移行だけ行い、LocalでWordPressの環境を構築しました。
環境構築後、wordpress-to-hugo-exporterをLocalのwordpressにインストールしました。今度はエラーは発生せずにMarkdownに変換されたデータの抽出ができました。
ブログ内で使用している画像のほとんどは自分のPCに保存してあったのですが、一部画像がなかったので、足りない画像は移行元WordPressのメディアライブラリからダウンロードしてきて、自分のPCに保存しました。

データ抽出後のMarkdownの修正

wordpress-to-hugo-exporterを使用するとWordPressの記事がMarkdownファイルに変換されて出力されます。
画像リンクやコードブロックなどの記述がうまく変換されていなかったので、変換がうまくいってない箇所は手動で修正しました。 90記事ほどあったので、修正には20時間近くかかりました。

Markdownの表作成には以下のサイトが便利でした。

https://notepm.jp/markdown-table-tool

GoogleAnalytics4の設定は下記のサイトを参考にしました。

https://kondoumh.hatenablog.com/entry/2022/04/29/232603

問い合わせフォームの設置

問い合わせフォームはGoogle Formを使用しました。

Googleフォームの作成方法は下記のサイトを参考にしました。

https://shihoron4919.com/google-form-making/

スパム対策のためにフォーム内に画像内の文字を読み取って入力する方法は下記のサイトを参考にしました。

https://indoor-days.blogspot.com/2020/08/Google-form.spam.html

Formの送信後のデータはGoogleスプレッドシートに保存されるようになっています。
このままだとFormから問い合わせがあったことに気が付かないので、Googleスプレッドシートにデータが保存後された後に、メールアドレス宛に通知が飛ぶようにしました。設定方法は下記のサイトを参考にしました。

https://note.com/teeda/n/n0511c28c2256

GitHubリポジトリにデータをプッシュ、またはローカルでビルドしたデータをCloudflarePagesにデプロイ

アプリケーションをデプロイする方法は2通りあります。

CloudflarePagesとGitHubを連携させて、リポジトリにデータをプッシュしてデプロイする
ローカルでビルドしたデータをCloudflarePagesにアップロードする

GitHubリポジトリにデータをプッシュしてデプロイする場合

CloudflarePagesとGitHubを連携させると、GitHubリポジトリにデータをプッシュするとCloudflarePages上でビルドが行われ、ブログが自動でデプロイされます。
GitHubのリポジトリはプライベートでも大丈夫です。
CloudflarePagesとGitHubの連携方法は下記のサイトを参考にしました。

https://riq0h.jp/2021/08/07/132024/

CloudflarePagesのデプロイ設定で、環境変数のHUGO_VERSIONを自分のPCで使用しているHugoと揃えるようにしてください。環境変数を設定しないと、ローカル環境で使用したHugoとは別のバージョンがCloudflarePagesのビルド時に使用されて、エラーが発生する可能性があります。
hugo versionと入力すると使用しているHugoのバージョンが表示されます。

>hugo version
hugo v0.117.0+extended

CloudflarePagesの環境変数でHUGO_VERSIONを設定します。

環境変数	値	説明
HUGO_VERSION	0.117.0	hugo versionで表示されたバージョンを入力

ローカルでビルドしたデータをCloudflarePagesにアップロードする場合

GitHubと連携しないで、ファイルを直接アップロードするときはローカルでビルドしたデータをCloudflarePagesにアップロードします。

下記のコマンドを入力するとpublicフォルダにビルドしたデータが出力されます。

>hugo

あとはpublicフォルダに出力されたファイルをCloudflarePagesにアップロードします。

カスタムドメインを使用しているときはネームサーバーをCloudflareに変更

⚠️ ネームサーバーを変更すると移行前のWordPressからバックアップデータを取得する手間が大きくなるので、ネームサーバー変更前にWordPressのバックアップデータを取得しておいてください。

カスタムドメインを使用しているときは、ネームサーバーをCloudflareに変更します。
下記のページを参考にカスタムドメインの設定とネームサーバーの変更をしました。

https://qiita.com/akitkat/items/8aeaee639ba5f2bda141

https://kawaken.dev/posts/20211227_migration-from-netlify-to-cloudflare-pages/

WordPressからHugoの移行まとめ

移行前
Xサーバー + WordPress (サーバー代とドメイン更新料で年間約15000円)

移行後
CloudflarePages + Hugo (ドメイン更新料で年間約1400円)

「エックスサーバー + WordPress」から「CloudflarePages + Hugo」に移行したことで1万円以上のコスト削減になりました。
カスタムドメインを使用しない場合はドメイン取得料や更新料も不要なので無料で運用できます。

またGitとGitHubでバージョン管理できるのと、PHP・WordPress・WordPressプラグイン等のバージョンアップについても気にする必要がなくなったので運用も楽になりそうです。

ドメインの移行について

Cloudflareではドメインの管理もできて、ドメイン更新料も安いのでドメイン移行も併せて行いました。ドメインはムームードメインで管理していたものをCloudflareに移管しました。
下記のサイトを参考にドメインの移行を行いました。

https://www.wp-benricho.com/cloudflare-registrar/

https://totonote.com/2022/02/20/domain-transfer-from-mumu-domain-to-cloudflare/

移行手順

移行手順の概要

Hugoのインストール & Hugoのテーマを選定

WordPressのバックアップを取得

WordPressのデータ抽出してMarkdownに変換

公式ページの抽出方法

wordpress-to-hugo-exporter