WordPressで構築したブログをAstroに移行してみた

こんにちは。
18年ぶりに阪神タイガースがアレしたので、嬉しくてたまらない小林です。

最近、同僚にAstroというWebフレームワークを教えてもらってからというもの、面白くて仕方なく、毎週何かしら触って遊んでいます。

弊社のブログでは、Astroに関して初めて触れるのですが、それが何かというは割愛します。
Astroって何？という方は、以下を参照してください。

ある程度、Astroを理解している人向けの内容になります。

はじめに
1. WordPressに組み込まれたREST APIを使用する
2. WordPressのデータをMarkdown変換して使用する
ブログをWordPressからAstroに移行する
注意事項
感想
参考

はじめに

今回のテーマは、

WordPressで運用されているブログをAstroに移行する

です。

以下のようなことを検討している場合に有益なのではないかと考えています。

WordPressでの運用をやめたい
記事のレビューをGitHubのPullRequestで行いたい

そもそも、WordPressとAstroを組み合わせるという話になると主に２つの方法があります。

WordPressに組み込まれたREST APIを使用する

一つ目は、ビルド時にWordPressにアクセスして、取得したデータを元にブログ用のページを生成する方法です。

参考：Headless WordPress & Astro

WordPressのデータをMarkdown変換して使用する

二つ目は、WordPressのデータをMarkdownに変換し、チュートリアル内にもあったようにプロジェクトの一部として管理する方法です。

参考：Migrating from WordPress

今回は、目的が「WordPressをやめたい」なので、後者を選択します。
応答に時間が掛かる、サーバーの負荷を減らしたいみたいな場合は前者を選択した方がよいと思います。

ブログをWordPressからAstroに移行する

WordPressから記事のデータをXMLとして出力する

まず、WordPressの投稿したデータをXMLファイルに出力します。

WordPressのダッシュボード > サイドバー > ツール > エクスポートを選択します。

「エクスポートする内容を選択」からエクスポートする内容を選択します。

「エクスポートファイルをダウンロード」ボタンを押下するとXMLファイルがダウンロードされます。

% ls -l WordPress.2023-09-19.xml
-rw-r--r-- 1 koba-masa staff 2152770 9 19 22:05 WordPress.2023-09-19.xml

XMLのデータをMarkdownに変換する

次に、ダウンロードしたXMLファイルを解析して、Markdownとして出力をします。

If you want to move all of your existing post content to Astro, you may find this tool for exporting Markdown from WordPress helpful. You may need to make some adjustments to the result if you have to convert a large or complicated WordPress site to Markdown.

引用：https://docs.astro.build/en/guides/migrate-to-astro/from-wordpress/#switch-from-wordpress-to-astro

公式ドキュメントにlonekorean/wordpress-export-to-markdownという便利なツールが紹介されていましたので、こちらを利用して変換していきます。

上記のプロジェクトをgit cloneします。

% ls -l
total 4600
-rw-r--r-- 1 koba-masa staff 198559 9 18 22:11 WordPress.2023-09-18.xml
drwxr-xr-x 12 koba-masa staff 384 9 18 22:10 wordpress-export-to-markdown

あとはREADMEに使い方が書いてありますので、それに倣って実行します。

% cd wordpress-export-to-markdown
% npm install && node index.js

Starting wizard...
? Path to WordPress export file? ../WordPress.2023-09-18.xml
? Path to output folder? ../.
? Create year folders? Yes
? Create month folders? Yes
? Create a folder for each post? Yes
? Prefix post folders/files with date? Yes
? Save images attached to posts? Yes
? Save images scraped from post body content? Yes
? Include custom post types and pages? Yes

Parsing...
13 posts found.
0 attached images found.
49 images scraped from post body content.

Saving 13 posts (0 already exist)...
[OK] post - aws-踏み台サーバネットワークの構築
(省略)
[OK] IMG_4709-scaled.jpg
[OK] wyrd_member.jpg
Done, got them all!

All done!
Look for your output files in: <your_direcotry>

指定したディレクトリにMarkdownファイルが出力されています。

% cd ..
% ls -l
total 4600
-rw-r--r-- 1 koba-masa staff 198559 9 18 22:11 WordPress.2023-09-18.xml
drwxr-xr-x 3 koba-masa staff 96 9 26 22:29 posts
drwxr-xr-x 12 koba-masa staff 384 9 18 22:10 wordpress-export-to-markdown
%
% find posts -type f
post/2021/06/iosのショートカット機能を利用して勤怠管理を行-2/index.md
(省略)
post/2020/10/aws-踏み台サーバネットワークの構築/images/b8d665222d747a4d68fe084cfa02b58e.png
post/2020/10/aws-踏み台サーバネットワークの構築/images/1989aa933c22cc3d909a3d5c949767a4.png
post/2020/10/aws-踏み台サーバネットワークの構築/images/ed61dde1b9f396cf9d968414430bde58.png
post/2020/10/aws-踏み台サーバネットワークの構築/images/6df701b87120fed4e4338211fc4ea7f7.png
post/2020/10/aws-踏み台サーバネットワークの構築/index.md
post/Invalid DateTime/Invalid DateTime/index.md
%

完成

出力先のディレクトリの中身を丸ごと、src/pages/posts配下に移動し、サーバーを起動します。

% find src/pages/posts/2020 -type f
src/pages/posts/2020/10/aws-踏み台サーバネットワークの構築/images/b8d665222d747a4d68fe084cfa02b58e.png
(省略)
src/pages/posts/2020/10/aws-踏み台サーバネットワークの構築/images/6df701b87120fed4e4338211fc4ea7f7.png
src/pages/posts/2020/10/aws-踏み台サーバネットワークの構築/index.md

起動させた結果がこちらになります。