はじめに
WordPressで運用してきたブログを、静的サイトジェネレーター（SSG）のAstroへ移行しました。
astro
https://astro.build/
「Wordpressが動かなくなった」が直接の移行原因ですが、その他にもこんな動機があります。
- PHPのメンテナンスやプラグインの更新が煩わしくなってきた
- Markdownで記事を書きたい
移行の全工程を記録していきます。全7回となりました。
まず第1回はAstroPaperのセットアップからです。
ちなみに中級以上のPCスキルとGitbub等の利用知識があること、またはClaude CLIの様なAIのサポートが大前提です。
ない場合は頑張っていただくしかないです。
環境
- OS: Windows 11
- Node.js: v22
- Astro: 5.x
- テーマ: AstroPaper v5
Astroとは
AstroPaperの事です。
AstroPaperはAstro製のブログテーマ。
シンプルなデザイン、ダーク/ライトモード切替、タグ機能、全文検索（Pagefind）など、ブログに必要な機能が最初から揃っています。
セットアップ手順
1. AstroPaperをクローンする
npm create経由だと対話メニューが出てわかりにくいため、GitHubから直接クローンするのがおすすめです。
git clone https://github.com/satnaing/astro-paper.git sakura86
cd sakura86
npm installsakura86の部分は自分のプロジェクト名（フォルダ名）に変えてください。
2. ローカルで動作確認する
npm run devブラウザで http://localhost:4321 を開いてデモサイトが表示されれば成功です。
AstroPaper v5の構成（v4以前との違い）
AstroPaper v5はv4以前からディレクトリ構成が変わっています。既存の情報を参考にする際は注意が必要です。
| 項目 | v4以前 | v5 |
|---|---|---|
| 記事の場所 | src/content/blog/ | src/data/blog/ |
| ファイル形式 | サブフォルダ形式（slug/index.md） | フラットなmdファイル（slug.md） |
v5では記事が src/data/blog/ にフラットなMarkdownファイルとして置かれる形になりました。
まとめ
セットアップ自体は git clone → npm install → npm run dev の3ステップで完了します。
次回は src/config.ts を中心にしたサイト基本設定のカスタマイズを紹介します。