WordPressをHugoでアーカイブした話

Ablazeのブログは長らくWordPressで動いていました。

WordPressは非常に人気がありますが、セキュリティ上の問題が多く安全に運用する難易度が高い、プラグインへの依存度が高くメンテナンス性に難があるなどの問題を多く抱えており、ブログのシステムをGhostに移行することとなりました。

過去の記事はアーカイブサイトにリダイレクトしようということになり、5年間運用されていたWordPressの記事（と大量のメディア）をHugo + Cloudflare Pagesの構成に移行した話を、このブログでの記念すべき最初（？）の技術記事にしようと思います。

第一の壁: WordPressのエクスポートデータの変換

最初、専用のプラグイン (https://github.com/SchumacherFM/wordpress-to-hugo-exporter )での変換を試みましたが、タイムアウトしてしまい上手くいきませんでした。

この時点で、これが最も難易度の高いステップに思ってましたが、世の中にはなんと既にWordPressのエクスポートデータをHugoのプロジェクトに変換するという大変ありがたいツールが存在していました。

GitHub - ashishb/wp2hugo: The best WordPress to static site migrator

The best WordPress to static site migrator. Contribute to ashishb/wp2hugo development by creating an account on GitHub.

GitHubashishb

早速GitHubにリポジトリを作成し、Codespacesを立ち上げ変換作業に取り掛かりました。特にエラーもなく無事終了し、Hugoのアーカイブ版サイトを立ち上げるステップまでスムーズに進めました。

第二の壁: 動かないOGP

wp2hugoが出力するMarkdownがやや特殊なせいで、生成された状態だとOGPが動作しないことが分かりました。SNS時代にOGPが表示されないブログはかなり致命的なので、テーマのテンプレートファイルを以下のサイトを参考に手動で修正し、フォールバック画像を設定することで解決しました。

HugoでOGP対応を行う方法

Hugoで作成したサイトにOGP（Open Graph Protocol）を適用することで、SNSでのシェア時に適切なタイトルや画像が表示されるようになります。本記事では、HugoでOGP対応を行った手順を備忘録としてまとめます。 生成AIにまとめてもらったので、間違いがあったらごめんなさい。一応、目では見ています。 OGPとは？ OGP（Open Graph Protocol）は、FacebookをはじめとするSNSでURLを共有した際に、適切なメタデータ（タイトル、説明、画像など）を表示するための仕組みです。適切なOGP設定を行うことで、SNSでのクリック率向上や視認性の向上が期待できます。 それと、単純に見た目がかっこいい。 1. layouts/partials にOGP用のテンプレートを作成 まず、Hugoのテンプレートシステムを活用し、OGP用のmetaタグを管理するために layouts/partials/ogp.html を作成します。 1 2 3 4 5 6 7 <!-- layouts/partials/ogp.html --> {{ with .Title }}<meta property=“og:title” content=”{{ . }}”>{{ end }} {{ with .Description }}<meta property=“og:description” content=”{{ . }}”>{{ end }} {{ with .Permalink }}<meta property=“og:url” content=”{{ . }}”>{{ end }} <meta property=“og:type” content=“website”> {{ with .Site.Params.ogpImage }}<meta property=“og:image” content=”{{ . }}”>{{ end }} <meta property=“og:site_name” content=”{{ .Site.Title }}”> ここでは、ページのタイトルや説明、URLを動的に取得し、OGPのメタタグを出力しています。 2. head.html にOGPテンプレートを組み込む Hugoでは layouts/partials/head.html にサイト共通のメタタグを記述することが一般的です。この中に ogp.html を読み込むようにします。

oeight.me折口詠人

第三の壁: WordPressの特殊な画像パス

いざデプロイしてみても、画像が正しく表示されないことに気づきました。

最初、wp2hugoがダウンロードするメディアが不足しているのではないかと思い--download-all オプションを追加して生成し直してみましたが、やはり上手く表示できません。

F12コンソールで確認すると、どうやら/wp-content/uploads/hoge/fuge/001.pngというファイルに対し、/wp-content/uploads/hoge/fuge/001-1024x657.png というURLで画像が参照されていることが分かりました。私はWordPressに詳しくないのでこれがデフォルトの動作なのか、プラグインによるものなのかは分かりませんが、幸いなことに私たちはLLMという文明を使えばすぐに欲しい正規表現を手に入れられる時代に生きています。

find . -type f -name "*.md" -print0 | xargs -0 sed -i -E 's/-[0-9]+x[0-9]+\.png"/.png"/g'

今後やりたいこと

画像は表示できるようになりましたが、やや巨大な画像が一部の記事に混ざってるのでffmpegか何かとbashで一定サイズ以上のファイルは縮小することを考えています。ただWebPを使用して画質を保ったまま小さくしようとすると拡張子が変わってしまう問題があるので、それの解決にまた工夫が必要になりそうです。

まとめ

PHPで動作するWordPressと比較し、静的サイトを出力してくれるHugoのブログは非常に扱いやすいです。記事を書きにくいという欠点はありますが、アーカイブサイトであれば全く問題ではありません。

CloudflareとSSGのありがたさを改めて実感した一日でした。