自分のブログが WordPress から Eleventy に移行して Jamstack な運用に移行できたメモ

自分のブログが WordPress から Eleventy に移行して Jamstack な運用に移行できたメモ

自分のブログが WordPress から Eleventy に移行して Jamstack な運用に移行できたメモです。

背景

今年の 5 月中旬のこと。私のレンタルサーバーで運用している自分のブログの WordPress です起きました。

WordPress のいろいろなプラグインも WordPress 本体も最近アップデートしてないなー、というか、毎度毎度アップデート自体うまくいくか怖いのがストレスなんだよなーとか思いつつ、いざアップデートをかけてみました。

すると、突然、投稿しようとしたらホスティングサーバー自体から、 WAF(Web Application Firewall)が発動して投稿が保存できない状況になってしまいました。

原因を調べるとホスティングサーバー側のセキュリティ設定が原因ではあるもの WordPress の編集画面から投稿内容が "SQLインジェクションと誤検知" されてブロックされていたのです。

WordPress の本体かプラグインが原因かはわかりませんが、アップデートしたらサーバーから弾かれるってやばすぎる・・・。しかも、某プラグインに至っては、今までできてた機能がうまくいかなかったり、メールアドレスで会員登録させたり、他の機能とバッティングして SEO で大事な機能が、どうも打ち消されてたり、なかなかの危機的状況。

それ以降は、記事を保存するたびにエラーが起きるので .htaccess での除外設定をしても、別のタイミングでエラーが起きたりで根本的には解決せず「書きたいのに書けない」状態になってしまいました。

WordPress から Eleventy(11ty) に移行して Jamstack な運用へ移行

もう、アップデートを戻すというのも怖すぎますし、まだギリギリ過去の記事が機能しているうちに、Eleventy(11ty) に移行して Jamstack な運用へ移行する決意をしました。

こんなかんじ。

この 1 ヵ月めちゃくちゃいろいろやったのですが、ザっというと、

  • 従来より WordPress 記事バックアップをしていた Airtable + Webhook で記事データの起点に移行開始
  • 上記データを元に 11ty へ静的サイト構築環境を移行し Markdown 記事書き出しは保った状態で新ブログ環境を AI 併走で開発
  • SEO・構造化データ・画像運用などの周辺整備も一気に対応
  • 移行完了!

ということをしてました。

現在のスナップショット

Eleventy is a simpler static site generator

11ty なかなか良い感じに動いてます。記事が Git にちゃんと差分が記録されていくのもいいですし、記事生成もかなり高速に動いてます。

  • 投稿は従来通り Markdown で書けてサクサク。
  • 静的サイトなので高速・安定。記事生成もイイ感じ。
  • Airtable による記事管理が当たって旧記事の編集・生成も仕組み化。
  • 正式に GA4 の導入でアクセス解析もうまく稼働。
  • WAF などの面倒なトラブルがゼロに。
  • CSS などレイアウトも従来の見た目をおおよそ移行できたっぽい

ということで改めて「書くこと」に集中できる環境ができてきました。Markdown で書けることは従来の仕組みをうまく移行でき、コードフェンスなどの特別処理は減ってシンプルな仕組みと記述にまとまりました。

なにより Airtable から復元した記事データたちが、調整の末に 99% は、以前と同じ URL で生成できたがうれしいです。SEO や検索データ的にもちゃんと移行できました!

いやー、こういう経験は初でしたが、書く環境が不穏だとアウトプットの気持ちが荒みましたね。

あらためて、ここで整備できてよかったです。

AI 併走で乗り越えたこととか 11ty 移行での様々な知見とか、あらためて素の SEO と対峙した話とか、移行までの下準備のこととか、いろいろとナレッジはたまったので、どこかでまとめられたらとも思います。

快適になったブログ執筆環境でアウトプットがんばっていきます!