• #Nuxt
  • #Cloudflare
  • #WordPress
  • #migration
  • #@nuxt/content
未分類

いいですね、Nuxt なら今のワークフローともきれいに繋がりますし、WordPress を完全に捨てられます。

あなたの条件を整理すると：

  • WordPress はもう触りたくない（完全廃止）
  • ホスティングは Cloudflare に集約したい
  • すでに Nuxt + pages ベースでログサイトを作っている
  • 記事は MD(MDX 的なもの) で書きたい
  • 画像多めのブログ

これに対しての完成形アーキテクチャと、具体的な移行ステップをまとめます。

1. 目指す完成形（Nuxt × Cloudflare 全面移行）

全体構成

  • フロントエンド： Nuxt 3（SSG／プリレンダー）
  • 記事コンテンツ： @nuxt/content + Markdown / MDC（MDX 的にコンポーネント埋め込み）
  • デプロイ： Cloudflare Pages（ビルドコマンドで静的出力）
  • 画像：
    • ① とりあえずは /public/uploads/... で運用
    • ② 将来的に Cloudflare Images / R2 に移す（推奨）
  • ログサイト： 既存の pages/ ベースのログをそのまま統合（/logs 等）

→ これで 「Cloudflare だけで完結する Nuxt ブログ＋ログサイト」 になります。 ConoHa も WordPress も不要です。

2. Nuxt プロジェクト構成イメージ

すでに Nuxt でログサイトを作っているとのことなので、ブログ機能を同じリポジトリ内に足す形を想定します。

root/
  nuxt.config.ts
  package.json
  /pages
    index.vue          … トップ
    logs/
      index.vue        … ログ一覧
      [slug].vue       … ログ詳細（既にある想定）
  /content
    /blog
      2025-11-28-first-post.md
      ...
  /components
    content/
      ProseImage.vue   … 画像コンポーネント（Cloudflare Images 対応など）
  /public
    /uploads           … 当面は旧 WP 画像をここへ

@nuxt/content の導入

npm install @nuxt/content

nuxt.config.ts 例：

export default defineNuxtConfig({
  modules: ['@nuxt/content'],
  content: {
    // 必要があればここで MDC/ハイライト等の設定
  },
  nitro: {
    preset: 'static', // 静的出力（Cloudflare Pagesにそのまま載る）
  },
})

ブログページ例（pages/blog/[slug].vue）：

<script setup lang="ts">
const route = useRoute()
const { data: article } = await useAsyncData('article', () =>
  queryContent('/blog')
    .where({ _path: `/blog/${route.params.slug}` })
    .findOne()
)
</script>

<template>
  <div class="prose mx-auto">
    <ContentDoc v-if="article" :value="article" />
    <p v-else>記事が見つかりませんでした。</p>
  </div>
</template>

一覧ページ（pages/blog/index.vue）：

<script setup lang="ts">
const { data: articles } = await useAsyncData('articles', () =>
  queryContent('/blog').sort({ date: -1 }).find()
)
</script>

<template>
  <div class="mx-auto max-w-3xl">
    <h1 class="text-2xl font-bold mb-4">Blog</h1>
    <ul>
      <li v-for="post in articles" :key="post._path" class="mb-2">
        <NuxtLink :to="post._path">
          {{ post.title }}（{{ post.date }}）
        </NuxtLink>
      </li>
    </ul>
  </div>
</template>

Markdown(MDC) 記事例（content/blog/2025-11-28-first-post.md）：

---
title: "移行後初めての投稿"
date: "2025-11-28"
tags: ["移行", "Cloudflare", "Nuxt"]
thumbnail: "/uploads/hero.jpg"
---

# タイトル

ここに本文。

::ProseImage
src="/uploads/sample.jpg"
alt="サンプル画像"
::

コンポーネントも埋め込めるので、ほぼ MDX 的な運用ができます。

3. Cloudflare Pages へのデプロイ設定

build 設定（Cloudflare Pages 側）

  • Framework preset: None or Nuxt（あれば）
  • Build command: npm install && npm run generate
  • Output directory: Nuxt 3 の場合：.output/public または dist → nitro.preset = 'static' の場合は .output/public になるので、そこを指定

package.json の scripts 例：

{
  "scripts": {
    "dev": "nuxi dev",
    "build": "nuxi build",
    "generate": "nuxi generate"
  }
}

4. WordPress から記事を持ってくる場合の流れ

「もう触りたくない」とはいえ、一度だけエクスポートはしておく価値があります。

  1. WordPress 管理画面 → ツール → エクスポート → 投稿を XML（WXR）で出力
  2. ローカルでその XML → Markdown 変換
    • wordpress-export-to-markdown などの CLI ツール
    • あるいは自前スクリプト + AI で変換
  3. 出力された MD を content/blog/ 配下に配置
  4. frontmatter を整備（title, date, slug, tags, thumbnail）
  5. 古い URL → 新 URL のマッピングを作成し、_redirects で 301 を張る
    • 例：/2023/05/old-post/ /blog/old-post 301

Cloudflare Pages はプロジェクトルートに _redirects ファイルを置けばリダイレクトが効きます。

5. 画像の扱い（当面と将来）

まずはシンプルに（当面）

  • 旧 WordPress の wp-content/uploads を丸ごとダウンロード
  • Nuxt プロジェクトの /public/uploads 以下にそのままコピー
  • Markdown 内の画像パスを https://oldsite.com/wp-content/uploads/... → /uploads/... に一括置換

→ これだけで、Cloudflare Pages 上でも全画像がそのまま表示されます。

将来：Cloudflare Images / R2 へ移行

本気で Cloudflare 集約したくなったタイミングで：

  • 画像を Cloudflare Images にアップロード
  • 返ってくる URL を基底 URL + id 形式で扱う
  • Nuxt 側では ProseImage コンポーネントで src を https://imagedelivery.net/... に差し替え

とすることで、最終的に

  • ページ：Cloudflare Pages
  • 画像：Cloudflare Images
  • その他静的ファイル：Pages（もしくは R2）

という Cloudflare 完結構成になります。

6. ログサイトとの統合

既に pages ベースでログサイトを作っているとのことなので：

  • /logs 配下のルーティングはそのまま維持
  • /blog 配下だけ @nuxt/content を使う
  • 共通レイアウト（layouts/default.vue）でヘッダーに Blog / Logs のナビゲーションを追加

という形にすると、「ブログ＋ログ」を同一 Nuxt アプリ内で完結できます。

7. この後一緒に詰められること

ここから先は、より具体的に詰められます。

  • 実際の nuxt.config.ts（あなたの既存ログサイト構成を前提にした統合案）
  • content/ のディレクトリ構造設計（年別／カテゴリ別など）
  • _redirects のサンプル（旧 WP パーマリンクのリダイレクト設計）
  • ProseImage コンポーネントで Cloudflare Images 前提の書き方

などもすべて具体的に書けます。

もしよければ「今動いている Nuxt ログサイトの構成（ざっくり）」「記事数のおおよその規模」だけ教えていただければ、それに合わせて nuxt.config.ts と ディレクトリ構造案をそのまま貼れる形で出します。