Astro 是 2026 年最佳 WordPress 替代品，適用於內容型網站——部落格、文件、行銷頁面——因為它預設只運送零 JavaScript，並在 Core Web Vitals 上比 WordPress 優勝 60-80 分。在過去兩年中，我已將十幾個 WordPress 網站遷移到 Astro，範圍從 50 篇文章的個人部落格到 3000 頁的文件入口網站，結果總是令人印象深刻：次秒級載入時間、Lighthouse 分數超過 95，託管費用從 $99/月降至零。

這不是「只是匯出 XML 並祈禱」指南。我將帶你瞭解我使用的確切流程，包括不規劃就會咬傷你的陷阱——破損的 URL、遺漏的圖片、孤立的短代碼，以及讓每個人都困惑的評論系統問題。

為什麼選擇 Astro 而不是 WordPress

WordPress 對大多數內容網站來說是過度設計的。你正在執行 PHP、MySQL、網頁伺服器、快取層，以及可能幾十個外掛，只是為了提供根本上是靜態內容的東西。每個頁面載入都會命中資料庫。每個外掛都是潛在的安全漏洞。每次更新都是希望沒有東西壞掉的祈禱。

Astro 翻轉了這個模型。它在建置時將頁面預先渲染為靜態 HTML。沒有資料庫。沒有伺服器端執行時。沒有 PHP。輸出是純 HTML、CSS，以及——只有當你明確選擇時——JavaScript。

以下是我在整個遷移中持續看到的：

指標	WordPress（託管）	Astro（靜態）	改進
Lighthouse 效能	34-55	95-100	+60-80 分
首次內容繪製	2.8-4.2s	0.4-0.8s	~80% 更快
總阻止時間	200-800ms	0-10ms	~98% 減少
頁面大小（典型部落格文章）	1.5-3.5 MB	80-250 KB	~90% 更小
互動時間	4-8s	0.5-1.0s	~85% 更快
HTTP 請求	60-130	8-15	~85% 較少

這些不是精選的。它們是來自真實遷移的平均值。配有快取外掛和 CDN 的 WordPress 網站仍然無法接觸靜態 Astro 建置，因為他們基本上在每個請求上做更多工作。

安全角度

WordPress 是網際網路上受攻擊最多的 CMS。不是因為它很差，而是因為它無處不在且攻擊面巨大——PHP 執行、資料庫存取、檔案上傳、XML-RPC、REST API 端點、管理員登入頁面。每個月都會帶來新的外掛漏洞。

部署到 CDN 的 Astro 網站基本上沒有攻擊面。沒有伺服器可利用，沒有管理員面板可暴力破解，沒有資料庫可注入。你的網站是一個 HTML 檔案資料夾，位於全球邊緣網路上。

開發人員體驗

如果你曾經試圖自訂 WordPress 佈景主題，你知道痛苦：PHP 範本標籤混合 HTML、需要記憶的範本階層、成為無法維護怪物的 functions.php 檔案、持續的外掛衝突。

Astro 使用基於元件的架構與看起來像 HTML 加強版的檔案格式。你可以在 Astro 頁面內使用 React、Vue、Svelte 或 Solid 元件——但只有當你實際需要互動時。對於部落格或行銷網站，你可能不需要。

---
// src/pages/blog/[...slug].astro
import { getCollection } from 'astro:content';
import BlogLayout from '../../layouts/BlogLayout.astro';

export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map(post => ({
    params: { slug: post.slug },
    props: { post },
  }));
}

const { post } = Astro.props;
const { Content } = await post.render();
---

<BlogLayout title={post.data.title} description={post.data.excerpt}>
  <article>
    <h1>{post.data.title}</h1>
    <time datetime={post.data.date.toISOString()}>
      {post.data.date.toLocaleDateString()}
    </time>
    <Content />
  </article>
</BlogLayout>

那是一個完整的動態部落格文章頁面。嘗試在 WordPress 中以相同的清晰度做到這一點。

Astro vs Next.js vs Gatsby 的 WordPress 遷移

Astro

Astro 是為內容網站而專門打造的。其「島嶼架構」意味著你除非特定元件需要，否則不會運送任何 JS。內容集合提供具有內建架構驗證的型別安全 markdown 處理。建置時間快速，心智模型簡單，你不需要瞭解 React 即可使用它。對於部落格、文件和行銷網站，這是 2026 年的明確選擇。如果你正在探索此路線，我們的 Astro 開發團隊已在各種規模的遷移中工作。

Next.js

Next.js 是一個完整的應用程式框架。它處理身份驗證、伺服器端渲染、API 路由、中介軟體，以及你對部落格不需要的一百多件其他事情。你將為每個訪客運送 React 執行時，無論他們是否需要互動（App Router 的伺服器元件有所幫助，但基線套件仍然較重）。Next.js 在你建置 SaaS 產品或具有大量動態功能的網站時很有意義——用戶儀表板、電子商務、實時功能。對於從 WordPress 的內容遷移？這是過度設計。也就是說，如果你的網站確實需要這些功能，我們的 Next.js 團隊可以幫助你找出正確的架構。

Gatsby

Gatsby 實際上處於維護模式。Netlify 在 2023 年收購了它，開發速度降至爬行速度。曾經看起來聰明的 GraphQL 資料層現在感覺像不必要的複雜性。大型網站的建置時間令人痛苦。外掛生態系統已過時。我強烈建議避免在 2026 年開始新的 Gatsby 專案。如果你目前在 Gatsby 上，遷移到 Astro 實際上比從 WordPress 遷移更容易，因為你的內容可能已經是 markdown。

功能	Astro	Next.js	Gatsby
預設運送的 JS	0 KB	~85-100 KB	~70-90 KB
內容集合	內建，型別安全	手動設置	GraphQL 層
建置時間（1000 篇文章）	~30-45s	~60-90s	~120-300s
學習曲線	低	中-高	中
最適合	內容網站	網頁應用程式	遺留專案
活躍開發	非常活躍	非常活躍	最少
SSR 支持	選擇性	預設	有限

7 步驟遷移行動計畫

這是我遵循的確切流程。沒有含糊其辭。

步驟 1：稽核你的 WordPress 網站

在你接觸任何程式碼之前，你需要知道你在處理什麼。登入你的 WordPress 管理員並進行盤點。

# 如果你安裝了 WP-CLI（你應該安裝）
wp post list --post_type=post --format=csv --fields=ID,post_title,post_name,post_date > posts.csv
wp post list --post_type=page --format=csv --fields=ID,post_title,post_name,post_date > pages.csv
wp plugin list --format=table
wp theme list --format=table

記錄每個外掛及其功能。你需要找到 Astro 等效項或放棄它們。常見的：

Yoast SEO → Astro 的內建 <head> 管理 + @astrojs/sitemap
Contact Form 7 → Formspree、Formspark 或無伺服器函式
WP Super Cache / W3 Total Cache → 不需要（你的網站已經是靜態的）
Wordfence / Sucuri → 不需要（沒有伺服器可保護）
Google Analytics 外掛 → 直接指令碼標籤或 Partytown 整合
WooCommerce → Snipcart、Shopify Buy Button 或專用電子商務平台

步驟 2：匯出 WordPress 內容

你有兩個選項：XML 匯出或 REST API。我建議使用 XML 匯出用於大多數網站，因為它在一次拍攝中捕獲所有內容。

在 WordPress 管理員中：工具 → 匯出 → 所有內容 → 下載匯出檔案

這會給你一個包含每個文章、頁面、評論、自訂欄位、類別、標籤和媒體參考的 .xml 檔案。

對於較大的網站（1000+ 篇文章），REST API 方法更可靠：

// scripts/export-wp.mjs
import fs from 'fs/promises';
import path from 'path';

const WP_URL = 'https://your-wordpress-site.com/wp-json/wp/v2';
const PER_PAGE = 100;

async function fetchAllPosts() {
  let page = 1;
  let allPosts = [];
  
  while (true) {
    const res = await fetch(
      `${WP_URL}/posts?per_page=${PER_PAGE}&page=${page}&_embed`
    );
    
    if (!res.ok) break;
    
    const posts = await res.json();
    if (posts.length === 0) break;
    
    allPosts = allPosts.concat(posts);
    console.log(`Fetched page ${page} (${allPosts.length} posts total)`);
    page++;
  }
  
  return allPosts;
}

const posts = await fetchAllPosts();
await fs.writeFile('wp-posts.json', JSON.stringify(posts, null, 2));
console.log(`Exported ${posts.length} posts`);

步驟 3：建立 Astro 專案

npm create astro@latest my-new-site
cd my-new-site

# 新增你需要的整合
npx astro add mdx
npx astro add sitemap
npx astro add tailwind

# 安裝其他依賴
npm install sharp @astrojs/rss

我建議從最小化設置開始，而不是佈景主題。佈景主題會增加你在遷移期間不需要的複雜性。先讓內容運作，然後設定樣式。

步驟 4：將內容轉換為 Markdown

這是真正的工作所在。你需要將 WordPress HTML 內容轉換為乾淨的 markdown，並具有適當的 frontmatter。

我使用帶有 turndown 的自訂 Node.js 指令碼用於 HTML 轉 markdown 轉換：

npm install turndown @wordpress/block-serialization-default-parser

// scripts/convert-posts.mjs
import TurndownService from 'turndown';
import fs from 'fs/promises';
import path from 'path';

const turndown = new TurndownService({
  headingStyle: 'atx',
  codeBlockStyle: 'fenced',
});

// 處理 WordPress 特定的 HTML
turndown.addRule('wpCaption', {
  filter: (node) => {
    return node.nodeName === 'DIV' && 
           node.className.includes('wp-caption');
  },
  replacement: (content, node) => {
    const img = node.querySelector('img');
    const caption = node.querySelector('.wp-caption-text');
    return `![${caption?.textContent || ''}](${img?.src || ''})\n`;
  },
});

const posts = JSON.parse(await fs.readFile('wp-posts.json', 'utf-8'));

for (const post of posts) {
  const slug = post.slug;
  const markdown = turndown.turndown(post.content.rendered);
  
  const frontmatter = `---
title: "${post.title.rendered.replace(/"/g, '\\"')}"
date: ${post.date}
excerpt: "${(post.excerpt.rendered || '').replace(/<[^>]*>/g, '').trim().replace(/"/g, '\\"')}"
categories: [${(post._embedded?.['wp:term']?.[0] || []).map(c => `"${c.name}"`).join(', ')}]
tags: [${(post._embedded?.['wp:term']?.[1] || []).map(t => `"${t.name}"`).join(', ')}]
featuredImage: "${post._embedded?.['wp:featuredmedia']?.[0]?.source_url || ''}"
draft: false
---`;

  const content = `${frontmatter}\n\n${markdown}\n`;
  
  await fs.mkdir('src/content/blog', { recursive: true });
  await fs.writeFile(`src/content/blog/${slug}.md`, content);
  console.log(`Converted: ${slug}`);
}

步驟 5：下載和組織媒體

WordPress 在 wp-content/uploads/YYYY/MM/ 目錄中儲存媒體。你需要下載所有內容並更新參考資料。

# 快速且不完美：你上傳目錄的 wget 鏡像
wget -r -np -nH --cut-dirs=2 -P public/uploads \
  https://your-wordpress-site.com/wp-content/uploads/

# 然後在你的 markdown 檔案中尋找並替換舊 URL
find src/content/blog -name '*.md' -exec sed -i '' \
  's|https://your-wordpress-site.com/wp-content/uploads/|/uploads/|g' {} +

對於生產遷移，我使用 Astro 的圖片最佳化與 sharp 函式庫來轉換所有內容為 WebP 並在建置時產生回應式大小。光這一點就可以將圖片負載減少 40-60%。

步驟 6：建立布局和元件

建立你的 Astro 布局以符合（或改進）你的 WordPress 佈景主題結構。最少你需要：

src/layouts/BaseLayout.astro -- HTML 殼層、<head>、導覽、頁腳
src/layouts/BlogLayout.astro -- 單一文章範本
src/pages/blog/index.astro -- 部落格清單，含分頁
src/pages/blog/[...slug].astro -- 動態文章頁面
src/pages/index.astro -- 首頁

步驟 7：測試、重新導向、部署

在本機建置並驗證所有內容：

npm run build
npm run preview

# 檢查破損的連結
npx linkinator http://localhost:4321 --recurse

設定重新導向（下面詳細涵蓋），設定你的 DNS，並部署。我將在成本比較部分涵蓋託管選項。

WordPress 資料匯出至 Astro 內容集合

Astro 的內容集合是其最好的功能之一。他們透過架構驗證為你提供對 markdown 內容的型別安全存取。以下是如何為遷移的 WordPress 內容正確設定它們。

定義你的架構

// src/content.config.ts
import { defineCollection, z } from 'astro:content';
import { glob } from 'astro/loaders';

const blog = defineCollection({
  loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/blog' }),
  schema: z.object({
    title: z.string(),
    date: z.coerce.date(),
    excerpt: z.string().optional(),
    categories: z.array(z.string()).default([]),
    tags: z.array(z.string()).default([]),
    featuredImage: z.string().optional(),
    draft: z.boolean().default(false),
  }),
});

export const collections = { blog };

這個的美妙之處：如果你的任何遷移文章都有缺少或格式錯誤的 frontmatter，Astro 會在建置時告訴你一個清楚的錯誤訊息。沒有更多無聲失敗。

處理 WordPress 短代碼

這是大多數遷移指南跳過的陷阱。如果你的 WordPress 文章使用短代碼如 [gallery]、[caption]、[embed]，或外掛中的任何自訂短代碼，它們會在你的 markdown 中顯示為原始文字。

你有三個選項：

在轉換期間預先處理 -- 在你的轉換指令碼中編寫正則表達式規則以將短代碼轉換為 markdown 或 HTML 等效項
使用 MDX -- 將受影響的文章轉換為 .mdx 並建立用於替換短代碼的 Astro 元件
手動尋找並替換 -- 對於小型網站，有時最快的方法

// 範例：在轉換期間轉換 WordPress 相簿短代碼
function convertShortcodes(content) {
  // [gallery ids="1,2,3"]
  content = content.replace(
    /\[gallery ids="([^"]+)"\]/g,
    (match, ids) => {
      const imageIds = ids.split(',');
      return imageIds.map(id => `![](/uploads/gallery/${id.trim()}.jpg)`).join('\n');
    }
  );
  
  // [youtube url="..."]
  content = content.replace(
    /\[youtube[^\]]*url="([^"]+)"[^\]]*\]/g,
    (match, url) => `<iframe src="${url}" width="560" height="315" frameborder="0"></iframe>`
  );
  
  return content;
}

查詢內容

一旦你的內容在集合中，查詢它很簡單：

---
// src/pages/blog/index.astro
import { getCollection } from 'astro:content';
import BlogLayout from '../../layouts/BlogLayout.astro';

const posts = (await getCollection('blog'))
  .filter(post => !post.data.draft)
  .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
---

<BlogLayout title="Blog">
  <ul>
    {posts.map(post => (
      <li>
        <a href={`/blog/${post.slug}/`}>
          <h2>{post.data.title}</h2>
          <time>{post.data.date.toLocaleDateString()}</time>
          <p>{post.data.excerpt}</p>
        </a>
      </li>
    ))}
  </ul>
</BlogLayout>

保護 SEO：301 重新導向、網站地圖和架構

這一部分很關鍵。一個搞砸的遷移可以在一夜之間摧毀多年的 SEO 公平性。不要跳過這任何部分。

URL 結構和 301 重新導向

WordPress 預設為 URL，如 /2024/03/my-post-title/ 或 /?p=123。你需要將每個舊 URL 對應到其新的 Astro 等效項。

首先，產生舊 URL 的完整清單：

# 使用 WP-CLI
wp post list --post_type=post,page --field=url > old-urls.txt

# 或抓取網站地圖
curl -s https://your-site.com/sitemap.xml | grep -oP '<loc>\K[^<]+'

對於 Vercel，在你的專案根目錄中建立 vercel.json：

{
  "redirects": [
    { "source": "/2024/03/my-old-post/", "destination": "/blog/my-old-post/", "permanent": true },
    { "source": "/:year(\\d{4})/:month(\\d{2})/:slug/", "destination": "/blog/:slug/", "permanent": true },
    { "source": "/category/:slug/", "destination": "/blog/category/:slug/", "permanent": true },
    { "source": "/feed/", "destination": "/rss.xml", "permanent": true }
  ]
}

對於 Netlify，使用 _redirects 在你的 public/ 資料夾中：

/2024/03/my-old-post/  /blog/my-old-post/  301
/category/*            /blog/category/:splat  301
/feed/                 /rss.xml  301

對於 Cloudflare Pages，使用 _redirects（與 Netlify 相同的格式）或儀表板中的大量重新導向。

網站地圖產生

@astrojs/sitemap 整合會自動處理這個：

// astro.config.mjs
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';

export default defineConfig({
  site: 'https://your-new-site.com',
  integrations: [sitemap()],
});

部署後，立即在 Google Search Console 中提交你的新網站地圖。同時提交任何不再存在且不被重新導向的 URL 的移除請求。

結構化資料 / 架構標記

如果 Yoast 處理你的架構標記，你需要複製它。建立一個可重複使用的元件：

---
// src/components/ArticleSchema.astro
const { title, date, excerpt, image, author = 'Your Name' } = Astro.props;

const schema = {
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": title,
  "datePublished": date,
  "description": excerpt,
  "image": image,
  "author": {
    "@type": "Person",
    "name": author
  }
};
---

<script type="application/ld+json" set:html={JSON.stringify(schema)} />

RSS 訂閱源

不要忘記你的 RSS 訂閱者：

// src/pages/rss.xml.js
import rss from '@astrojs/rss';
import { getCollection } from 'astro:content';

export async function GET(context) {
  const posts = await getCollection('blog');
  return rss({
    title: 'Your Site',
    description: 'Your description',
    site: context.site,
    items: posts.map(post => ({
      title: post.data.title,
      pubDate: post.data.date,
      description: post.data.excerpt,
      link: `/blog/${post.slug}/`,
    })),
  });
}

託管成本比較

這是遷移商業案例變得無法忽視的地方。

託管情景	月成本	年成本	備註
WP Engine（託管 WordPress）	$30-60	$360-720	啟動-成長計畫
Kinsta（託管 WordPress）	$35-70	$420-840	初級-商業計畫
Flywheel（託管 WordPress）	$15-30	$180-360	微型-個人計畫
自託管（DigitalOcean + 維護）	$12-24	$144-288	加上你的更新時間
Astro on Vercel（嗜好）	$0	$0	100GB 頻寬/月
Astro on Netlify（免費）	$0	$0	100GB 頻寬/月
Astro on Cloudflare Pages（免費）	$0	$0	無限頻寬
Astro on Vercel（Pro）	$20	$240	1TB 頻寬、團隊功能

對於絕大多數內容網站——部落格、投資組合、文件網站、行銷網站——Vercel、Netlify 或 Cloudflare Pages 上的免費層已足夠。你正在提供來自全球 CDN 的靜態檔案。每月獲得 100,000 個頁面檢視的網站幾乎不會觸及免費層限制。

讓我拼出數學。如果你為託管 WordPress 託管支付 $50/月，那就是 $600/年。在三年內，那是 $1,800。新增進階外掛授權（Yoast Premium 為 $99/年、Elementor Pro 為 $59/年、WP Rocket 為 $59/年），你正在查看每年 $800-$1,000 用於可以免費託管的內容網站。

遷移本身是一次性成本。如果你自己處理，這就是你的時間。如果你透過我們的我們的無頭 CMS 開發服務僱用團隊，ROI 通常在 6-12 個月內從託管節省中獲得——更不用說效能和 SEO 改進。查看我們的定價頁面以獲取詳細資訊。

但是動態功能呢？

最常見的反對意見：「我的 WordPress 網站有聯絡表單、搜尋、評論和電子商務。」

聯絡表單：Formspree（免費層：50 份提交/月）、Formspark 或簡單的無伺服器函式
搜尋：Pagefind（免費，完全在用戶端執行，為靜態網站而構建）——它令人難以置信
評論：Giscus（免費，GitHub 支持）或如果你必須的話 Disqus
電子商務：Snipcart、Shopify Lite 或 Stripe Checkout
電子報註冊：直接 API 呼叫 ConvertKit、Mailchimp 或 Buttondown

這些都不需要伺服器。這些都不會增加有意義的成本。

常見問題

WordPress 到 Astro 遷移需要多長時間？

對於典型的部落格，有 50-200 篇文章，如果你自己做，期望 1-2 週的兼職工作。內容轉換通常只需一天的好指令碼工作。建立 Astro 布局和元件需要 2-4 天，取決於設計複雜性。測試、重新導向設定和部署需要另外 1-2 天。對於較大的網站（500+ 篇文章）或具有複雜自訂文章類型和外掛依賴的網站，預算 3-6 週。如果你寧願交給我們，與我們的團隊聯絡 -- 我們通常在 2-4 週內完成遷移。

Astro 能處理 1000+ 篇文章的 WordPress 部落格嗎？

絕對可以。我已遷移了超過 3000 篇文章的網站，構建時間保持在 2 分鐘以下。內容集合針對大型資料集進行了最佳化，由於所有內容都編譯成靜態 HTML，無論內容量多少，都沒有執行時效能罰則。建置步驟是唯一尺度重要的地方，而 Astro 的建置效能很好——比用於靜態內容的 Gatsby 或 Next.js 快得多，而且規模更大。

Astro 支持 WordPress 評論嗎？

沒有原生支持，說實話，這是一個功能，而不是一個錯誤。WordPress 評論是一個垃圾郵件磁石，需要持續審核。對於 Astro 網站，最佳選項是：Giscus（使用 GitHub 討論--免費、沒有追蹤、對開發人員受眾很好）、Disqus（舊的備選方案，免費層有廣告）、Commento（隱私權導向，$5/月）或使用 Turso 或 Supabase 之類的資料庫以及 Astro API 路由的自訂解決方案。如果你想保護現有的 WordPress 評論，匯出它們並將它們顯示為靜態內容，然後對新評論使用其中一項服務。

Astro 比 WordPress 快嗎？

這甚至不接近。靜態 Astro 網站將優於最最佳化的 WordPress 設定，因為它消除了基本瓶頸：伺服器端處理。WordPress 必須執行 PHP、查詢資料庫、組裝頁面並發送它——針對每個請求（除非快取）。Astro 預先建置所有內容。你的訪客接收預先渲染的 HTML，直接來自靠近他們的 CDN 邊緣節點。典型改進是 80-90% 更快的載入時間和 60-80 分 Lighthouse 分數改進。

我的 WordPress 管理員和所見即所得編輯器發生了什麼？

你失去了 WordPress 管理員面板。對於大多數開發人員，那是一種解脫。你將直接編輯 markdown 檔案，速度更快，可攜性更強。如果你有需要視覺化介面的非技術內容編輯者，請考慮無頭方法：讓 WordPress 繼續作為內容後端運行，並使用 Astro 作為前端。或者將 Astro 與無頭 CMS 配對，如 Sanity、Contentful、Storyblok 或 Keystatic（具有真正很好的基於 GitHub 的編輯器）。我們的無頭 CMS 開發服務可以幫助你為你的團隊挑選正確的內容後端。

遷移後我的 Google 排名會下降嗎？

他們不應該，在大多數情況下他們會改進——但只有在你正確處理重新導向時。每個舊 URL 必須仍然工作或 301 重新導向到其新等效項。在你啟動的同一天提交你的新網站地圖到 Google Search Console。在前 30 天監控索引涵蓋報告。我已看到網站在遷移後 2-3 個月內有機流量增加 15-30%，僅因為 Core Web Vitals 改進，由於 Google 使用頁面體驗信號作為排名因素。

我可以將 WordPress 保留為無頭 CMS 並為前端使用 Astro 嗎？

是的，這是一個很好的中間方法。你保留 WordPress 管理員和編輯器體驗，但完全拋棄 PHP 前端。Astro 在建置時從 WordPress REST API（或 WPGraphQL）獲取內容並產生靜態頁面。你仍然需要在某處託管 WordPress，所以你不會在託管成本上節省，但你會獲得所有前端效能優勢。對於深度投資於 WordPress 編輯工作流的團隊，這通常是務實的選擇。

我需要知道 React 或任何 JavaScript 框架來使用 Astro 嗎？

不是。Astro 元件使用看起來像帶有 frontmatter 指令碼塊的 HTML 的 .astro 檔案格式。如果你可以編寫 HTML 和 CSS，你可以建立一個 Astro 網站。JavaScript 框架（React、Vue、Svelte）是選擇性的——你只有在需要互動用戶端元件時才會帶入它們，如搜尋小工具、帶驗證的表單或圖片轉盤。對於部落格或行銷網站，你可以在不接觸 React 的情況下建立整個東西。

WordPress 至 Astro 遷移指南：2026 年 7 個步驟

目錄

為什麼選擇 Astro 而不是 WordPress

安全角度

開發人員體驗

Astro vs Next.js vs Gatsby 的 WordPress 遷移

Astro

Next.js

Gatsby

7 步驟遷移行動計畫

步驟 1：稽核你的 WordPress 網站

步驟 2：匯出 WordPress 內容

步驟 3：建立 Astro 專案

步驟 4：將內容轉換為 Markdown

步驟 5：下載和組織媒體

步驟 6：建立布局和元件

步驟 7：測試、重新導向、部署

WordPress 資料匯出至 Astro 內容集合

定義你的架構

處理 WordPress 短代碼

查詢內容

保護 SEO：301 重新導向、網站地圖和架構

URL 結構和 301 重新導向

網站地圖產生

結構化資料 / 架構標記

RSS 訂閱源

託管成本比較

但是動態功能呢？

常見問題

Let's build
something together.

目錄

為什麼選擇 Astro 而不是 WordPress

安全角度

開發人員體驗

Astro vs Next.js vs Gatsby 的 WordPress 遷移

Astro

Next.js

Gatsby

7 步驟遷移行動計畫

步驟 1：稽核你的 WordPress 網站

步驟 2：匯出 WordPress 內容

步驟 3：建立 Astro 專案

步驟 4：將內容轉換為 Markdown

步驟 5：下載和組織媒體

步驟 6：建立布局和元件

步驟 7：測試、重新導向、部署

WordPress 資料匯出至 Astro 內容集合

定義你的架構

處理 WordPress 短代碼

查詢內容

保護 SEO：301 重新導向、網站地圖和架構

URL 結構和 301 重新導向

網站地圖產生

結構化資料 / 架構標記

RSS 訂閱源

託管成本比較

但是動態功能呢？

常見問題

Let's build something together.

Let's build
something together.