Wordpress ブログを Astro と Cloudflare Pages でリニューアルしたお話
お金の話
Web開発の話になるのですが、ブログの運用費を節約したいな〜というところから発起したのでお金カテゴリとしておきます！強引か！まぁええわ！
Wordpress で作ってた
このブログはもともと、Amazon Lightsail に Wordpress をインストールして運用していました。
毎月の運用費はこんな感じで大体$13くらいだったのですが、円換算2,000円弱になるなど、地味に高いな〜と感じるようになったのが作り直しのキッカケです。
初めからわかっとったやろという感じなのですが、いまだ$1.00=120円くらいの感覚が抜けなくて…しかたないね！
そもそもなぜ Wordpress で初めたのかを考えると
- とりあえずパパッと始めたかった
- 枯れきった技術なので、いざとなったら他技術間での移行が楽そう
- Next.js とか Gatsby で静的サイト作るのも考えたけど、正直面倒だった
- 自分で作ると画像の置き場所とか考えること多くてダルそう
というようなことが挙げられます。
そんな折に仕事でちょこっと Astro を触る機会があって、Tailwind と組み合わせたらホホイといい感じにスタイリングできるやんということで、ブログも作り直すことにしたという感じです。
Wordpress から記事をエクスポートする
Astro では markdown ファイルを記事データとして扱う（mdx もいけるよ！）ので、Wordpress から記事を markdown 形式でエクスポートします。
我らの味方Webクリエイターボックス様でドンピシャの記事があったので、こちらを参考にさせていただきました。
Wordpress の管理画面で「設定 > エクスポート」をクリックしてエクスポート画面に遷移し、「すべてのコンテンツ」を選択してエクスポートします。
そうすると「サイト名.WordPress.日付.xml」のファイルがダウンロードされるので、わかりやすいフォルダに置いておきます。
エクスポートした xml ファイルを markdown に変換する
xml から markdown を生成するのには wordpress-export-to-markdown というツールを使います。
ターミナルを開き、以下のコマンドを実行します。
※端末に Node.js の実行環境があることが前提です
npx wordpress-export-to-markdownすると、以下のような質問が表示されるので、適宜答えていきます。
✓ Path to WordPress export file? /XXX/xxx.WordPress.yyyy-MM-dd.xml
✓ Put each post into its own folder? Yes
✓ Add date prefix to posts? No
✓ Organize posts into date folders? No
✓ Save images? All Images質問に答え終わると処理が開始され、完了するとコマンドを実行したディレクトリに「output」というフォルダが作成され、その中に markdown ファイルと画像が格納されています。
基本コレでOKなのですが、私が実行したときはリストのインデントが崩れていたので、そこだけ手動で修正しました。
Astro でサイトを作る
あとは Astro のこの辺のドキュメントを見ながら、Markdown をデータとして扱って記事一覧と記事詳細画面を作れば完成です。
- Markdown ファイルを置いておく場所について
- 記事一覧画面の作成について
- 記事詳細画面の作成について
その他、Wordpress が良い感じにやってくれていたページネーションとか関連記事の表示など、実装がやや面倒そうなものは必要になったときに考えるスタイルでやっていこうと思います。
つまり行き当たりバッタリですね。大好きな言葉です。
ホスティングは Cloudflare Pages で
最初はなーんにも考えずに Amazon S3 に置こうと思っていたのですが、独自ドメイン使おうとすると Cloudfront が必要になってコレまたお金がかかります。Lightsail より安いと思うけどね。
なので、ドメインを Cloudflare で管理していたということもあって、Cloudflare Pages にホスティングすることにしました。
ぶっちゃけ他の AWS サービスを組み合わせるとかでなければ、ただ静的サイトをホスティングするだけの用途で S3 を使う優位性って無さそうに思います。
Free プランでもリクエスト無制限！帯域幅無制限！さらにサイト数無制限が合わさりまさに黄金のナイト。メインホスティング盾来た！これで勝つる！
一人で運用する分にはビルド制限も特に気にならないでしょう。
Cloudflare Pages の作成は GitHub のリポジトリとの連携でｶｶッと可能です。
こんな感じです。
ただパッケージマネージャーに pnpm を使っているのですが、それだと Cloudflare Pages 上でビルドができませんでした。
ビルド環境に pnpm をインストールするみたいな方法もありそうでしたが、デフォルトでできないことをハック的にできるようにするのはあまり好きではないので、GitHub Actions でビルドからデプロイまでを賄うことにしました。
name: Deploy
on:
push:
branches:
- main
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- run: corepack enable
- name: Install Node.js
uses: actions/setup-node@v4
with:
node-version: 22
cache: "pnpm"
- name: Install dependencies
run: pnpm install --frozen-lockfile
- name: Build
run: pnpm build
- name: Deploy to cloudflare
uses: cloudflare/wrangler-action@v3
with:
apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
command: pages deploy dist --project-name=XXXビルド後に cloudflare/wrangler-action@v3 を使うだけなのでスッキリしています。
事前に CloudFlare Pages でプロジェクトを作っておく必要もなく、Action 実行時に勝手にプロジェクトが作られます。
たぶん既存のプロジェクト名を入れるとカジュアルに上書きしてしまうんじゃないかな〜と思うので、複数サイトを持ってる場合は注意が必要かもしれません。
だいたい1分くらいでデプロイまで完了しています。
キャッシュはなすがままにしているので、記事数が増えてデプロイ時間が我慢の限界を超えたときになんか考えようかな〜と思います。
つまり行き当たりバッタリですね。とても大好きな言葉です。
Astro と Cloudflare の組み合わせは公式にオンデマンドレンダリング（事前に静的ビルドせずにユーザーがアクセス時にページを生成する）がサポートされているので、そっちにチャレンジしてもいいかもしれません。
おわり
以上で、毎月2,000円弱かかっていた運用費が0円になりました！
色んなものが値上がりしている昨今、お財布の紐はギャンギャンに締めていきましょう！
※この記事の記載は2025年4月現在の情報です。実際に作業をする場合は最新の情報を参照するようにしてください。