日々の記録
WordPressのブログを静的HTMLに作り直しました
長くWordPressで運用してきたこのサイトを、静的HTMLで表示する構成に作り直しました。過去の記事や写真、公開日、URLを引き継ぎながら、記事をMarkdownで管理し、EleventyでHTMLを生成する形にしています。
今回移したのは、2026年10月9日のバックアップに含まれる公開記事1,049件と固定ページ3件。記事の日付は2004年4月から2021年10月まであります。長年の記録を、これからも読める形で残すための作業です。
記事と画像、これまでのURLを引き継ぐ
まず、WordPressのデータベースから公開記事を取り出し、タイトル、本文、公開日、更新日、カテゴリ、タグを整理しました。本文はMarkdownへ変換し、画像のキャプションや複雑な表などは、必要に応じてHTMLを残しています。
画像などのメディアは1,476ファイルを移植しました。記事URLは従来の「年／月／日／記事名」の形式を維持し、画像も元のアップロード先のパスを引き継いでいます。
過去の記事には、古い形式の内部リンクや不完全な商品リンクもありました。移行先を特定できる内部リンクを修正し、Amazonの商品リンク31件も商品IDを使ったURLに直しました。行き先が分からないものは推測で置き換えず、確認が必要なリンクとして記録しています。
動画や音源の埋め込みも見直す
WordPressで使っていた専用の記法や古い埋め込みコードも調べ、YouTube、Vimeo、SoundCloudなどを静的なページで表示できる形に変換しました。
対象166件のうち、159件を埋め込みとして復元しています。旧Flash形式など、そのまま復元できない7件はリンクを残しました。
埋め込みにはタイトルと元サイトへのリンクを付け、スマートフォンでも本文の幅に収まるようにしています。ただし、外部サービス側で動画や音源が現在も再生できるかは、別途確認が必要です。
本文と見た目を分け、読みやすさを整える
新しい構成では、記事本文、サイトの設定、表示用テンプレート、CSSを分けました。記事を追加するときはMarkdownを書き、一覧やカテゴリ、タグ、年月別のアーカイブは記事データから生成します。
新しいブログのデータ構造
記事や設定を編集するファイルと、公開用に生成するHTMLを分けています。
| データ | 保存場所・形式 | 内容・役割 |
|---|---|---|
| 記事 | src/posts/・Markdown |
タイトル、公開日、更新日、URL、カテゴリ、タグ、概要、下書き状態、本文 |
| 固定ページ | src/pages/・Markdown |
Aboutなどの本文とページ情報 |
| サイト設定 | src/_data/・JSON |
サイト名、ドメイン、ナビゲーション、カテゴリ、タグ、GA4設定 |
| 表示テンプレート | src/_includes/ |
記事・固定ページ・一覧の共通レイアウト |
| スタイル | src/styles/・CSS |
文字、余白、配色、画面幅に応じた表示 |
| 画像など | public/ |
既存画像は元のパスを維持。新しい画像はmedia/へ保存 |
| 移行記録 | migration/・JSON |
WordPressのIDとURLの対応、変換結果、確認が必要な項目 |
| 公開用ファイル | dist/・HTMLなど |
Eleventyで生成したページ、画像、CSS、RSS、サイトマップ |
更新するときは記事のMarkdownや設定を編集し、そこから公開用ファイルを生成します。記事本文に共通のデザインを持たせないため、レイアウトや配色はまとめて変更できます。
見た目も作り直しています。本文の幅や行間を調整し、リンクには下線を付けました。キーボードで操作したときのフォーカス表示や、本文へ直接移動するリンクも用意しています。
配色はOSの設定に合わせて自動で切り替わり、手動でライトとダークを選ぶこともできます。
移した内容を検証し、公開の仕組みを用意する
移行後は、記事のIDと公開パスを照合し、内部リンクやローカル画像の参照先を検査しました。下書きがページや記事一覧に出ないことも確認しています。
ブラウザーでは、トップや記事、カテゴリなどの代表的なページを、PCとスマートフォンの幅で確認しました。確認したページでは横スクロールやローカル画像の読み込み失敗はありませんでした。全記事の目視確認や、アクセシビリティの全項目の試験は、まだ行っていません。
検索エンジン向けのsitemap.xmlを自動生成し、従来のGA4設定も引き継ぎました。ローカルの確認画面ではアクセスを送信しないようにしています。本番で計測データが届くかは、公開後に確認する項目です。
GitHub Actionsには、HTMLの生成と検証が成功したらXserverへ転送する仕組みも用意しました。
古いリンクや画像の説明文、旧URLからの転送など、残っている確認事項はあります。過去の記事を引き継ぎ、今後はMarkdownを編集して更新していくための構成ができました。