yamac-tech.com

WordPress移行がめんどくさくなったのでAstroでブログを作り直した

既存記事の移行をやめてAstroのBlog StarterからMarkdownだけで書けるブログを作った記録。

正直に言います。 WordPressの移行を考えるのがめんどくさくなりました。

最初はちゃんと移行するつもりだったんです。 記事を調べて画像を整理してURLもなるべく維持する。 そのうえで安い公開先へ移そうとしていました。

でも調べるほど作業が増えていきます。 そこで一度だけ考え直しました。

自分は何を移したいんだろう。

本当に残したかったもの

元のWordPressにはブログらしい機能が一通りありました。

これらを一つずつ見ていくと今回は使わない機能ばかりでした。 過去の記事も移さなくていい。 見た目も同じにしなくていい。

残したかったのは新しい記事を公開する場所だけです。

そこまで決めたら話が急に小さくなりました。 WordPressを別のサーバーで再現する必要はありません。 MarkdownをHTMLへ変換できれば十分です。

というわけでAstroを使うことにしました。

今回の構成

構成はかなりシンプルです。

役割 選んだもの
記事を書く Markdown
サイトを作る Astro 7.2.10
変更履歴を残す Git
公開先 まだ未接続

CMSもデータベースもありません。 ローカルでMarkdownを書いて静的なHTMLを作ります。

Astroには公式のBlog Starterがあります。 今回は親のGitリポジトリ内へ site ディレクトリを作ったためAstro側のGit初期化は切りました。

npm create astro@latest site -- --template blog --install --no-git --yes

実行するとサンプル記事や記事ページのひな型まで入ります。 ゼロからページ構成を考えなくていいので早いです。

ただし今回はスターターの機能も少し多めでした。 MDXやRSSやサイトマップは使いません。 Aboutページやサンプル画像やSNSリンクも外しました。

スターターを入れてから削る。 この順番のほうが自分には分かりやすかったです。

Markdownを記事として読み込む

記事は src/content/blog に置きます。 AstroのContent Collectionsで *.md だけを読み込む設定にしました。

const blog = defineCollection({
  loader: glob({ base: './src/content/blog', pattern: '**/*.md' }),
  schema: () =>
    z.object({
      title: z.string(),
      description: z.string(),
      pubDate: z.coerce.date(),
      updatedDate: z.coerce.date().optional(),
      draft: z.boolean().default(false),
      sample: z.boolean().default(false),
    }),
});

glob() がMarkdownを読み込みます。 schema は記事のタイトルや日付が足りているかをビルド時に確認する役目です。

各記事の先頭には公開情報を書きます。

---
title: "記事タイトル"
description: "記事の短い説明"
pubDate: 2026-09-01
draft: true
---

書いている途中は draft: true にします。 一覧と記事URLの生成時に下書きを除外しているため公開用のHTMLには入りません。

管理画面の公開ボタンはありません。 この一行が公開前のストッパーです。

iPhoneで見られるところまで確認した

Macだけで見てもスマホの読みやすさは分かりません。 同じWi-FiにつないだiPhoneから開けるように開発サーバーを起動しました。

npm run dev -- --host 0.0.0.0

ターミナルに表示されたLAN用URLをiPhoneで開きます。 これは信頼できる自宅LANでの一時確認にだけ使いました。

実際に見てみるとかなりシンプルです。 でも記事を読む場所としてはこれで十分でした。

記事リンクは指で押しやすい大きさにしています。 本文幅は日本語が長くなりすぎないよう680pxへ絞りました。 長いコードは横へスクロールできます。

ここで地味に抜けていたのが記事ページの <!doctype html> です。 コードレビューで見つけて追加しました。 見た目だけで終わらせずHTMLも確認しておいてよかったです。

静的ビルドを確認する

公開前と同じ形へ変換できるかも確認します。

npm run build

今回の結果は次の通りです。

/blog/markdown-publishing-workflow/index.html
/blog/wordpress-to-astro/index.html
/index.html
3 page(s) built

公開記事2本とトップページが生成されました。 draft: true の下書きは生成されていません。

ちゃんと狙った通りです。

まだ公開はしていない

現時点ではCloudflare Pagesや独自ドメインへ接続していません。 そのため月額の維持費もまだ実測できていません。

また過去の記事を廃止する判断もしています。 以前の記事を残したいブログにはこのやり方は向きません。

検索やコメントが必要なら別の仕組みも要ります。 今回は「記事を置いて読める」をゴールにしたから小さくできました。

WordPressの移行先を探していたはずなのに最後に残ったのはMarkdownファイルと静的HTMLでした。 移行を諦めたというより必要なものだけ選び直した感じです。

次からは管理画面を開きません。 Markdownを一枚増やします。

参考にした公式資料

← 記事一覧へ戻る