Skip to content
sakura86.com
戻る

WordPressからAstroへ移行した話 まとめ

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するだけで本番に反映されるのが快適です。