Webflow 轉 Astro：如何遷移 Webflow 網站，同時保住內容、設計與排名

簡短回答

離開 Webflow 比離開 Framer 容易（Framer 完全沒有 HTML 匯出功能），但也只容易一部分。在付費的 Workspace 方案中，你可以匯出網站的 HTML、CSS、JavaScript 與圖片，並放在任何地方代管。Webflow 的說明中心也同樣清楚說明了哪些東西帶不走：CMS 內容、表單處理、站內搜尋、密碼保護、在地化頁面和程式碼元件（code components）都不在匯出範圍內，Collection 清單只會顯示空白狀態（Webflow Help）。

因此，從 Webflow 轉到 Astro，一半是匯出，一半是重建。先匯出 Webflow 能給你的部分，再透過 CSV 或 API 取出 CMS 內容，將每個範本重建為 Astro 元件、替換表單與搜尋、重新製作想保留的互動效果，並為每個有變動的網址設定永久轉址。照這個順序進行，新網站就能保住原本的設計、內容與排名。

為什麼團隊會從 Webflow 轉到 Astro

Webflow 是很強大的視覺化網站建置工具，許多行銷團隊也應該繼續使用它。離開的理由通常與所有權和成本有關，而不是設計：

• 網站改由工程團隊負責。當大部分修改都由開發人員進行時，放在自己儲存庫中的程式碼比視覺化畫布更有效率，而且可以和你的產品、後端與測試放在一起。
• 每個網站的方案費用。根據 Webflow 的價格頁面（2026 年 10 月 13 日查閱），Basic 網站方案每月 15 美元，包含 Webflow CMS 的 Premium 方案每月 25 美元，兩者皆按年計費。在地化則是加購項目，每月 9 美元起。
• 需要真正後端的功能：寫入 CRM 的表單、限定存取的內容、跨多個網站的搜尋，或任何必須在你自己的基礎架構上運行的功能。
• 光靠匯出無法真正搬離。程式碼匯出需要付費的 Workspace 方案，只有網站方案並不夠，而且匯出內容不含 CMS。無論如何，想要乾淨地搬離都需要事先規劃。

如果你的行銷團隊每週都以視覺化方式發布頁面，網站也運作良好，繼續留在 Webflow 是合理的選擇。遷移應該換來某個具體的好處。

Webflow 程式碼匯出包含什麼、不包含什麼

來源：Webflow 說明中心關於匯出網站程式碼的文章。

檢查已發布的 Webflow 網站時，我們看到了什麼

2026 年 10 月 13 日，我們下載了七個以 Webflow 建置的網站首頁（包括 webflow.com 本身），檢視一次遷移需要帶走哪些東西：

• 七個網站都從 Webflow 的伺服器載入 jQuery 與圖片。圖片來自 cdn.prod.website-files.com，而 Webflow 自己的說明中心也指出，匯出成 CSV 的圖片與檔案欄位是指向原專案代管位置的連結，一旦該專案被刪除，連結就會失效（Webflow Help）。每個資源檔都必須下載後重新代管。
• 七個網站的社群分享圖片也都由 Webflow 提供。Open Graph 圖片很容易被遺忘，舊專案一關閉，LinkedIn 或 WhatsApp 上的連結預覽就會少了圖片。
• 七個網站都直接在已發布的 HTML 中呈現 CMS 清單，每個首頁有 3 到 19 個 Collection 清單。這是個好消息：我們的 Framer 轉 Astro 指南提到，Framer 網站會在載入後由執行環境重新組成；已發布的 Webflow 頁面則不同，它是一份完整的參考，能準確告訴你哪些內容放在哪裡，即使程式碼匯出會讓這些清單變成空白。
• 七個網站中有五個使用 Webflow Interactions，以 data-w-id 屬性標記，單一首頁上最多有 109 個元素帶有這個屬性。每一個都是需要重新製作的小型行為，或是需要決定是否捨棄。

Webflow 轉 Astro 的步驟

1. 盤點每個網址。啟用相關選項後，Webflow 會自動產生 /sitemap.xml（Webflow Help）。加入每個 Collection 頁面，以最長的可用時間範圍從 Google Search Console 匯出「網頁」報表，並從 Site settings 的 Publishing 區塊，將現有的 301 轉址匯出為 CSV（Webflow Help）。
2. 匯出內容。從 CMS 面板將每個 CMS Collection 匯出為 CSV；如果使用 Localize，每個語系各匯出一次，並保留 Item ID 欄。CSV 會把結構攤平：參照欄位變成純文字，多重參照變成以逗號分隔的文字，富文字則變成 HTML。凡是有參照的內容，Webflow Data API 能列出項目及其欄位與語系，通常比把多個 CSV 檔案重新拼湊起來更乾淨。
3. 下載所有資源檔。圖片、PDF、你有授權可自行代管的字型、Open Graph 圖片與網站圖示（favicon）。在新網站不再指向 website-files.com 之前，不要關閉 Webflow 專案。
4. 將匯出的程式碼當作參考。如果你使用付費的 Workspace 方案，就匯出 HTML 與 CSS。不要把它部署成新網站：它會帶著 webflow.js、jQuery 與空白的 CMS 清單。用它來查看精確的間距、斷點與 class 結構。
5. 在 Astro 中建立內容模型。將每個 Collection 轉換為 Astro 的 content collection 或 headless CMS 模型，參照關係仍維持為參照，接著將每個範本重建為 Astro 元件，並將圖片改用 astro:assets 處理。
6. 重新製作有意義的互動效果。大多數 Webflow Interactions 都能改用 CSS transition、keyframes 或幾行 JavaScript 實現。若需要更複雜的動態效果，自從 Webflow 在 2025 年 4 月將 GSAP 免費開放後，GSAP 已可免費用於商業用途（Webflow）。無論採用哪種方式，都請遵循 prefers-reduced-motion 設定。
7. 替換表單、搜尋與受保護的頁面。為每個表單設定真正的端點（Cloudflare Worker、表單服務或你的 CRM）；如果網站需要搜尋，就加入 Pagefind 這類靜態搜尋索引；並將所有密碼保護移到你的主機或應用程式上。
8. 好好重建在地化頁面。程式碼匯出只包含主要語系，因此請用 Astro 的 i18n 路由建置每種語言，每種語言各有一個網址，並在彼此之間設定 hreflang。
9. 維持相同的網址格式。Webflow 提供的頁面結尾不帶斜線，並會將 /pricing/ 轉址到 /pricing。請設定 Astro 的 trailingSlash 與 build.format，讓新網站產生相同的網址（Astro 設定參考）；每一處不一致，都是一個原本不需要的轉址。
10. 在伺服器端轉址，然後上線並持續觀察。沒有使用 adapter 的靜態 Astro 建置，會把設定的轉址變成 meta refresh 頁面，因此請在網站代管的地方設定一對一的 301 轉址，例如透過 Cloudflare 的 _redirects 檔案。切換 DNS，在新網站驗證完成前保留 Webflow 專案，並在接下來幾週追蹤 Search Console 的索引報表。我們的網站遷移 SEO 檢查清單涵蓋了上線當天及之後 90 天的工作。

遷移後有哪些改變

保住 SEO

Google 的變更網址的網站搬遷指南在這裡同樣適用：將每個舊網址對應到最相近的新網址、使用伺服器端永久轉址，並至少保留一年。如果網址完全不變（對 Webflow 網站來說，細心的重建通常做得到），你主要需要確認標題、描述、canonical 標籤、結構化資料與 Open Graph 圖片都已完整沿用。

Webflow 特有的陷阱，是殘留的東西：仍從 website-files.com 載入的 Open Graph 圖片或 PDF、仍被索引的 webflow.io 測試網址，或是在遷移中 slug 改變了的 CMS 頁面。關閉 Webflow 專案前，請把這三項都檢查一遍。

Dardo 如何執行 Webflow 遷移

我們將 Webflow 遷移納入網站遷移服務中執行：盤點網址與內容、匯出 CMS，先重建一個具代表性的頁面並在約定的寬度下審查，接著再處理其餘的範本、表單與轉址。建置本身屬於以 Astro 進行的網站開發，動態效果則屬於創意開發。dardo.studio 這個網站本身就是以 Astro 建置、運行於 Cloudflare Workers，內容放在 headless CMS 中，我們也是透過這個 CMS 撰寫並發布這個部落格。

如果你正在評估是否要遷移，把網站和你想改變的地方告訴我們。在報價之前，我們會先告訴你離開 Webflow 是否值得。