WordPressから静的サイトジェネレータAstroにブログを移行する方法
2024-05-26
2024-05-26
最近、筆者が運営しているLinuxをテーマに扱っているブログ「クロの思考ノート」をWordPressから静的サイトジェネレータであるAstroに移行しました。今回はWordPressからAstroへの移行について記事にしたいと思います。
Astroとは
AstroはJavascriptで作られた静的サイトジェネレータです。似たような機能を提供するものとして、Gatsby, Pelican, Hugo, Hakyll等の静的サイトジェネレータがあります。多くの静的サイトジェネレータと同様にコンテンツはYAML形式のメタデータを含むMarkdownもしくはCMSから提供できます。
静的サイトジェネレータの名前の通りAstroによってビルドされたサイトは静的なHTML, CSS, Javascriptからなるサイトです。よってデプロイもWebサーバーに配置するだけの非常にシンプルなものです。
WordPressからAstroに移行する方式について
WordPressのサイトをAstroサイトに変換するにはいくつかの方法が考えられます。ここでは大きく分けてWordPressをCMSとして活用する場合とMarkdownに以降する方法について考えます。
1. WordPressをヘッドレスCMSとして利用する場合
WordPressのAPIを利用してヘッドレスCMSとして描画をAstroで行う方法です。このようにCMSからコンテンツをJSON形式で取得し、Astroで静的この場合、コンテンツの追加はWordPressの管理画面を介して行うことになります。この方法の場合、Markdownファイルをローカルで管理する必要はなくります。
- メリット：Markdownファイルをローカルで管理する必要はない、WordPressの管理画面でコンテンツ管理ができる
- デメリット：WordPressの管理をするコストは発生し続ける。
2. AstroでMarkdownでコンテンツを管理する場合
Markdownファイルによってコンテンツ管理する方法です。タイトルや日付などのメタ情報はYAML形式のフロントマターとしてMarkdownファイルに記述します。ローカルでファイルを管理するだけのシンプルな方法ですが、コンテンツ数が多くなると管理が大変になります。
- メリット：WordPressから完全脱却が可能。CMSに非依存のサイトを構築できる。 コンテンツ管理はMarkdownファイルを管理するだけのシンプルな管理
- デメリット：データがDBにないため、サイトの構造変化に伴うメタ情報の変化などには弱い。
上記２つの方法以外にもWordPress以外のCMSにデータを移行し、フロントにはAstroを使用するなどの方法も可能です。
今回のブログの移行の前提条件
ここで、筆者が今回WordPressからAstroにサイトを移動した際の前提条件を整理してみます。
| 項目 | 説明 |
|---|---|
| コンテンツ管理方式 | Markdownファイル |
| デプロイ環境 | VPS |
| Webサーバー | Nginx |
| ビルド | ローカル環境でビルド |
| デプロイ方式 | rsyncによるファイルアップロード |
WordPressのデータをMarkdownファイルにエクスポートする
現在あるWordPressのサイトをAstroに移行するには、まずWordPressの管理画面からエクスポートデータを取得することから始めます。
管理画面のサイドメニューからツール > エクスポートを選択します。以下のような画面が出ます。
エクスポートしたいデータを選択しXMLデータをエクスポートします。
エクスポートデータをMarkdownファイルに変換
次に、エクスポートしたデータをMarkdownファイルに変換しましょう。WordPressのエクスポートファイルをMarkdownに変換するツールは公式サイトでも紹介されています。しかし、wordpress-to-markdownはAstro専用ではないため、‘layout’フロントマターを追加する機能などはありません。そこで筆者はwp-to-astroという変換ツールを書きました。wp-to-astroはAstro用のMarkdownに変換することを目的としていて、コマンドによってlayoutフロントマターを追加することができます。
今回はエクスポートファイル名を’export.xml’としてlayoutフロントマターに’../layouts/page.astro’を付与し、‘./output’ディレクトリにMarkdownファイルを出力する例を示します。以下のコマンドを実行します。
wp-to-astroの使用例
npm install kurocode25/wp-to-astro
npx wp-to-astro \
--outdir ./output \
--layout ../layouts/post.astro \
export.xml
画像データの移行について
画像データの移行の仕方は色々ありますが、今回はデプロイ先のWebサーバーがNginxである前提で作業を進めます。もしApacheやその他のWebサーバーでも基本的な考え方は同じです。
今回のブログの移行ではWordPressでのwp-content/uploadsディレクトリをウェブサーバーのルートディレクトリにコピーし、画像のURLはWordPressでもAstroのサイトでも同じURLになるようにWebサーバーで設定します。Nginxの設定に関しては別項でまとめて取り扱います。
RSSフィードとURLについて
Astroの公式ドキュメントで紹介されている@astrojs/rssを使用するとRSSフィードを生成できます。今回はrss.xml.jsファイルを作成することでWEBルートにrss.xmlファイルが生成されました。これによりRSS用のURLhttps://note.kurodigi.com/rss.xmlが機能します。しかし、WordPressでは筆者はhttps://note.kurodigi.com/?feed=rss2をRSS用のURLとして使用してきましたので、旧URLでもRSSフィードが機能するようにnginxでrewriteしています。(設定例はNginxの設定例で示します)
Sitemapを生成する
Astroでサイトマップを利用するにはAstro公式ドキュメントに記載がある通り、@astrojs/sitemapを使用してサイトマップページを構築することができます。
@astrojs/sitemapを利用するにはastro.config.mjsに以下のように追記します。本番ビルドをするとルートディレクトリにsitemap-index.xmlが生成されます。
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';
export default defineConfig({
// ...
site: 'https://stargazers.club',
integrations: [sitemap()],
});
Nginxの設定を行う
今回のサイト移行に伴うNginxの設定を例示します。RSS用のURLと旧WordPressの画像URLをAstroサイトでも使えるようにするためにNginxの設定を行っています。
※：ここでは例のためSSLに関する設定は省略しています。
nginxでのAstroサイトの設定例
server {
listen 80;
server_name note.example.com;
# BLOG
location / {
root /var/www/html/note; index index.html;
try_files $uri $uri/ /index.html;
if ($args ~* 'feed=rss2') {
set $args '';
rewrite ^ /rss.xml break;
}
}
# WP-CONTENT
location ^~ /wp-content/ {
alias /var/www/note/wp-content/;
}
}
ビルドとデプロイ
ここまで準備ができれば後はAstroで本番用ビルドを行い、静的サイトを構築し、Webサーバーにファイルをアップロードするだけです。この過程をCIを使うこともできますが、私はローカルでビルドしてファイルをrsyncコマンドでアップするという原始的な方法で行っています。
まとめ
WordPressからAstroへのサイト移行について自分が行ったことをまとめてみました。WordPressからMarkdownファイルを用いる方式の基本的なデータ移行については記せたかと思います。まだ必要最低限のSSR, Sitemapを有するブログですが、ソーシャルボタン機能、検索機能なども追加していく予定です。