WordPressからAstro(AstroPaper v5)への移行を全7回で記録しました。
セットアップから各種外部サービスの設置まで、実際に行った作業をそのまま追える構成です。
全7回の記事一覧
第1回 AstroPaper v5のセットアップ
WordPressからAstroへ移行した話(1)AstroPaper v5のセットアップ
AstroPaperのクローンから npm run dev でローカル動作確認するまでの手順。v5のディレクトリ構成の変更点も解説。
第2回 サイト基本設定とカスタマイズ
WordPressからAstroへ移行した話(2)サイト基本設定とカスタマイズ
src/config.ts のサイト情報書き換え、ソーシャルリンク削除、トップページ日本語化など、最初に必要な基本カスタマイズ。
第3回 331件の記事を移行スクリプトで変換
WordPressからAstroへ移行した話(3)331件の記事を移行スクリプトで変換
WordPressからエクスポートしたMarkdownをAstroPaper v5形式に一括変換するスクリプト。ogImageのスキーマと画像パスのハマりポイントも。
第4回 GitHub ActionsでFTP自動デプロイ
WordPressからAstroへ移行した話(4)GitHub ActionsでFTP自動デプロイ
GitHubにpushするだけでビルドからコアサーバーへの転送までを自動化。SSH非対応サーバーでのFTP運用とlftpを使った画像差分転送の工夫。
第5回 Google AdSenseの設置
WordPressからAstroへ移行した話(5)Google AdSenseの設置
ads.txt の配置と Layout.astro へのスクリプト追加。Astroで外部広告スクリプトを動かすのに必須の is:inline 属性について。
第6回 GA4設定とView Transitions対応
WordPressからAstroへ移行した話(6)GA4設定とView Transitions対応
AstroPaperのView Transitionsを使っている環境でGA4が正しくpageviewを計測するための send_page_view: false + astro:page-load 手動送信パターン。
第7回 The Moneytizer広告の移行
WordPressからAstroへ移行した話(7)The Moneytizer広告の移行
CocoonテーマのMoneytizer設置コードをAstroへ移植。CMP(InMobi Choice)はheadの先頭、広告ユニットはFooterに配置するルール。
まとめ
WordPressからAstroへの移行はやることが多いですが、一度動き出すと運用は格段に楽になります。
GitHub Actionsの自動デプロイのおかげで、記事を書いてpushするだけで本番に反映されるのが快適です。