WordPressからAstro＋Notionへブログを移行した手順と、Astrotionで必要だった改修
2026-07-11
WordPressを静的化して運用していたブログを、Astro＋Notion＋Cloudflareへ移行しました。
移行後はNotionで記事を編集し、Cloudflare上に静的サイトとして公開できるようになりました。
この記事では、Astrotionをローカルで動かす方法、Notionとの接続、Cloudflareへの公開、WordPress記事の移行、実際に必要だった改修を紹介します。
前回の記事では、WordPressからAstro＋Notionへ移行しようと思った理由をまとめています。
移行を検討した背景を知りたい方は、先にこちらをご覧ください。
WordPressからAstro＋Notionへ移行することにした理由｜0が0ではなかった
ローカル環境のWordPressをSimply Staticで静的化し、Cloudflareで公開していたサイトを、Astro＋Notionへ移行することにしました。複数人で編集しにくい運用や、ブロックエディターの余白設定、編集画面と公開後の表示の違いなど、実際に困った点と移行を決めた理由を紹介します。
the-unmaintainables.com/10008/
使った技術
なぜAstrotionを使用したか
日々の振り返りやTipsをNotionにまとめていたため、Notionに記入した内容をそのまま記事作成に利用したいと考えていました。
そこでNotionをブログ化する方法を調べてみた結果、AstroとNotionを連携させる方法が表示速度の面で良さそうだったため、採用することにしました。
Astrotionを選んだ理由はNotion APIへのアクセスをキャッシュできることやOGP画像を自動生成できることです。
AstroとNotionを連携させるだけならastro-notion-blogがありますが、Astrotionのデザインの方が好みだったため、使用することにしました。
具体的な方法
基本的には、AstrotionのREADMEどおりに進めれば動作します。 ただ、いきなり本番環境へアップするのは不安だったため、まずはローカルで動作確認しました。 ローカルで確認する場合は、環境変数の設定などを少し追加で行う必要があります。
必要環境
Node.js v20.18.1 以上
全体の流れ
- AstrotionをGitHubからダウンロードする
- DATA_SOURCE_IDを取得
- NOTION_API_SECRETを取得
- コマンドを実行
AstrotionをGitHubからダウンロードする
Astrotionにアクセスしてダウンロードします。 ZIPファイルを解凍します。
DATA_SOURCE_IDの取得方法
公開するNotionのデータベースを開きます。 スライダーアイコン(並び替えや検索アイコンがあるところ)の設定→データソースを管理する→データソースIDをコピーします。
NOTION_API_SECRETの取得方法
管理者ポータルを開き、コネクト、新規コネクトからアクセストークンを発行します。
コンテンツへのアクセスから「アクセス権限を編集」をクリックして、公開したいデータベースに先ほどのデータベースを追加します。
コマンドを実行
初回のみ npm install を実行します。
環境変数にDATA_SOURCE_IDとNOTION_API_SECRETを追加します。
Windowsの場合
$env:NOTION_API_SECRET="<YOUR_NOTION_API_SECRET>"
$env:DATA_SOURCE_ID="<YOUR_DATA_SOURCE_ID>"
Windows以外
export NOTION_API_SECRET="<YOUR_NOTION_API_SECRET>"
export DATA_SOURCE_ID="<YOUR_DATA_SOURCE_ID>"
npm run dev を実行すると http://localhost:4321 に作成されたサイトを見ることができます。
本番環境へ
Cloudflare WorkerでAstroテンプレートを選択します。
Workerを作成したら、プロジェクトの設定、変数とシークレットからDATA_SOURCE_IDとNOTION_API_SECRETを追加します。
必要ならCUSTOM_DOMAIN、PUBLIC_GA_TRACKING_IDも追加します。
過去の記事から移行
過去記事はWordPressに保存されているため、Notionへの移行作業が必要になりました。
最初WordPressの記事情報をCSVで取り込もうとしましたが、本文の装飾や画像まわりの扱いが思ったようになりませんでした。
そのため、最終的にはWordPressの記事ページから１記事ずつ、手作業でNotionへコピー&ペーストして移行しました。。。
その後、見出し・画像・コードブロック・内部リンクも手作業で確認しています。
スラッグは既存URLから大きく変えないように、Notion側で数値のSlugを設定しました。
追加・変更した機能
これらの改変はすべてCodexにやってもらいました。 Codexありがとう！
デザイン・操作性
- ヘッダー、フッターを以前のサイトのように変更
- ページトップへ戻るボタンを追加
- 目次を追加
- リンクを貼れるボタンを追加
- ブログカードを追加
- キャラクターの吹き出し機能を追加
URL・記事管理
- 特定のページのURLをルート直下になるように変更
- タグが階層構造になるように変更
Notion・Astrotionの不具合対応
- 表の中に画像を入れられなかったため、Notionデータベースを使って描画するように変更
- OGP画像で文字がおかしくなる問題があったため、使うフォントを固定
- 本文の改行が反映されないため、本文のCSSに
white-space: pre-line;を追加 - 公開日時がUTC基準の時刻だったため、日本時間基準に変更
Windows環境での問題
Windows環境では、画像パスの区切り文字が原因で画像が表示されない問題が発生しました。 また、自動生成されるOGP画像も正しく表示されないことがありました。 Windows以外での開発をオススメします。
まとめ
WordPressからAstro＋Notionへ移行したことで、記事の下書きから公開までをNotion中心に進められるようになりました。
Astrotionはそのまま使うだけだと足りない部分もありましたが、URL構造・表示周り・OGP画像・Windows環境の問題を修正することで、実際のブログ運用に近い形まで整えることができました💯
Codexを使えば、欲しい機能を比較的効率よく追加できたので、AstroやNotionを使ったブログ運用を試したい人には面白い選択肢だと思います。
