---
title: "Framer 轉 Astro：Framer 網站遷移指南"
description: "Framer 無法匯出 HTML。如何將 Framer 網站遷移到 Astro：該擷取什麼、如何重建 CMS、動態效果與表單，並保住網址與 SEO。"
url: "https://dardo.studio/zh-Hant/blog/framer-to-astro/"
language: "zh-Hant"
translations: {"en":"https://dardo.studio/en/blog/framer-to-astro/","es":"https://dardo.studio/es/blog/migrar-de-framer-a-astro/","fr":"https://dardo.studio/fr/blog/migrer-framer-vers-astro/","de":"https://dardo.studio/de/blog/framer-zu-astro-migrieren/","it":"https://dardo.studio/it/blog/migrare-da-framer-ad-astro/","pt":"https://dardo.studio/pt/blog/migrar-de-framer-para-astro/","nl":"https://dardo.studio/nl/blog/framer-naar-astro/","sv":"https://dardo.studio/sv/blogg/migrera-framer-till-astro/","pl":"https://dardo.studio/pl/blog/migracja-z-framera-do-astro/","uk":"https://dardo.studio/uk/blog/framer-to-astro/","ru":"https://dardo.studio/ru/blog/framer-to-astro/","ar":"https://dardo.studio/ar/blog/framer-to-astro/","hi":"https://dardo.studio/hi/blog/framer-to-astro/","th":"https://dardo.studio/th/blog/framer-to-astro/","ja":"https://dardo.studio/ja/blog/framer-to-astro/","ko":"https://dardo.studio/ko/blog/framer-to-astro/","zh-Hans":"https://dardo.studio/zh-Hans/blog/framer-to-astro/"}
updated: "2026-10-13T01:01:50.480Z"
---

[部落格](https://dardo.studio/zh-Hant/blog/)

# Framer 轉 Astro：如何遷移 Framer 網站，同時保住設計與排名

Framer 沒有 HTML 匯出功能，所以改用 Astro 等於重建網站。本文說明該先擷取什麼、哪些地方會出問題，以及如何保住設計、網址與排名。

作者： [Nicolás Cerón](https://dardo.studio/zh-Hant/studio/) ·2026年10月12日

![夜晚的畫家工作室裡，畫架上立著一個空的鍍金畫框，一條深紅色的線從畫框延伸出敞開的窗戶，沿著山坡小徑一路通往星空下一座亮著燈的天文台。](https://dardo.studio/_astro/01M4S57PW4TH7D1E7E3RQM4Z4E_Z3SVDC.webp)

## 重點

- Framer 不提供可供自行代管的 HTML 匯出功能，因此遷移到 Astro 意味著以已發布的 Framer 頁面為參考，重建整個網站。
- 重建前先擷取每個網址、CMS collection、斷點與動畫，因為 Framer 是從自己的 CDN 與執行環境載入內容、圖片與程式碼。
- Framer 的表單與 CMS 檔案依賴 Framer 的執行環境；請為每個表單設定自己的端點，並將 CMS 內容搬進 Astro collections 或 headless CMS。
- 在你的主機上設定一對一的伺服器端 301 轉址；沒有 adapter 的靜態 Astro 建置只會產生 meta refresh 轉址。
- 上線後，確認沒有任何 canonical、sitemap 項目或 Open Graph 標籤仍指向舊的 Framer 網址。

## 簡短回答

Framer 的說明中心明確表示，Framer 不提供可供自行代管的 HTML 匯出功能（[Framer Help](https://www.framer.com/help/articles/can-i-export-my-website-to-html-and-self-host-it/)）。因此，從 Framer 轉到 Astro 是重建，而不是匯出。你要先把已發布的網站擷取下來當作參考，再將每個範本重建為 Astro 元件、把 CMS 內容搬進 collections、重新製作真正需要的動態效果，並為每個有變動的網址設定永久轉址。

照這個順序進行，新網站可以維持相同的外觀、載入更少的 JavaScript，並保住排名。若跳過擷取或轉址對照表，結果就是一次沒人要求的改版，外加搜尋流量下滑。

## 為什麼團隊會離開 Framer

Framer 很適合快速設計並發布行銷網站。離開的理由通常是實務上的考量，而不是美感問題：

- **主機代管與所有權。**Framer 網站運行在 Framer 的伺服器上。想把程式碼放在自己的儲存庫、自己的主機上，或放在自家後端旁邊的團隊，就必須重建。
- **每個網站的方案費用。**根據 Framer 的[價格頁面](https://www.framer.com/pricing/)（2026 年 10 月 12 日查閱），Basic 方案每月 10 美元，加入網站轉址功能的 Pro 方案每月 30 美元，兩者皆按年計費。在地化則是付費加購項目。
- **轉址限制。**Framer 的轉址只適用於同一網域內的路徑（[Framer Help](https://www.framer.com/help/articles/how-to-setup-redirects-to-maintain-seo-ranking/)）。
- **需要真正後端的表單、資料與整合：**CRM、預約系統、限定存取的內容，或任何必須在你自己的基礎架構上運行的功能。

如果你的行銷團隊每週都以視覺化方式建立和編輯頁面，而網站也運作良好，繼續留在 Framer 可能才是正確的決定。遷移需要投入設計與開發時間，應該換來某個具體的好處。

## 開發 Framer 擷取工具學到的事

Dardo 開發了一套內部工具，可以擷取已發布的 Framer 頁面（限你擁有的網站），並將其轉換為一個獨立的參考檔案，外加一份 Astro 遷移追蹤表，每個需要重建的項目各佔一列。開發這套工具，讓我們看清 Framer 網站把複雜度藏在哪裡：

- **資源檔放在 Framer 的 CDN 上。**圖片、字型與程式碼都從 framerusercontent.com 及相關網域載入。響應式圖片會以多種寬度（?width=512、?width=1024）請求同一個檔案，因此擷取時每張圖片只保留一個本機檔案，也就是最大的那個。
- **JavaScript 是分層載入的。**Framer 會載入一些只負責重新匯出真正 bundle 的小型模組，所以只掃描一次會漏掉部分程式碼。這套工具會反覆重新掃描，直到不再出現新的模組為止。
- **CMS 內容是另一種檔案格式。**Framer CMS 的 collections 以 .framercms 檔案提供，頁面會從 CDN 以位元組範圍（byte range）分段取得。在一般的靜態主機上，這些請求會回傳整個檔案，而負責組成這些檔案網址的模組仍然指回 Framer。
- **執行環境會在載入後改寫頁面。**Framer 的 React 執行環境（runtime）會對 HTML 進行 hydration，並可能把你刪除的元素重新插入。例如「Made in Framer」徽章，就會被 hydrate 到它自己的容器中。
- **表單依賴 Framer。**擷取下來的表單沒有 HTML action 屬性；只有透過 Framer 的用戶端執行環境才能送出。
- **SEO 標籤指向 Framer。**除非改寫，否則 canonical 與 Open Graph 網址會繼續標示原本的 Framer 網址。
- **動態效果其實是資料。**出現效果（Appear effects）以 JSON 資料的形式儲存在頁面中，因此這套工具會把它們連同每個執行中動畫的關鍵影格與時間設定一併記錄下來。

我們得出的結論是：匯出的檔案是證據，而不是交付成果。我們從不上線擷取下來的 HTML 或 Framer 的執行環境。它們的用處，是準確告訴我們該重建什麼。

## Framer 轉 Astro 的步驟

1. **盤點每個網址。**從網站的 sitemap.xml 開始，加入每個 CMS 頁面，並以最長的可用時間範圍，從 Google Search Console 匯出「網頁」報表。記下已在 Framer 的 Site Settings 中 Hosting 區塊設定的所有轉址。
2. **匯出 Framer 允許匯出的內容。**Framer 表示，CMS 內容可以透過外掛匯出為 CSV 或 JSON 等格式（[Framer Help](https://www.framer.com/help/articles/porting-your-data-from-framer/)）。下載所有圖片與檔案，並在自行代管每款字型之前確認其授權。
3. **將已發布的網站擷取下來作為參考。**記錄每個範本在各個斷點的樣貌，以及每個你想保留的動畫的時間設定。我們的工具會以 1440、810 與 390 像素寬擷取頁面，再針對網站 CSS 中找到的每個斷點，在斷點前 1 像素、斷點本身與斷點後 1 像素各擷取一次。
4. **將範本重建為 Astro 元件。**把 CMS collections 搬進 [content collections](https://docs.astro.build/en/guides/content-collections/) 或 headless CMS，圖片改用 [astro:assets](https://docs.astro.build/en/guides/images/)，在地化頁面則改用 [Astro 的 i18n 路由](https://docs.astro.build/en/guides/internationalization/)，每種語言各有一個網址。
5. **重新製作有意義的動態效果。**大多數 Framer 效果都能改用 CSS transition、keyframes 或一小段腳本實現。請遵循 prefers-reduced-motion 設定。在我們自己的一個 Framer 轉 Astro 重建專案中（一個有 18 條路由、並非客戶專案的網站），219 個捲動與互動狀態中，有 217 個與原版的像素差異在 1% 以內。
6. **為每個表單設定真正的端點。**將每個表單指向你自己的處理程式（Cloudflare Worker、表單服務或你的 CRM），並在測試環境中確認資料能順利送達。
7. **沿用搜尋中繼資料。**每個頁面都要有標題、描述、Open Graph 標籤、結構化資料，以及指向自身的 canonical，並另外產生一份新的 XML sitemap。
8. **在伺服器端轉址，而不是在 HTML 中轉址。**沒有使用 adapter 的靜態 Astro 建置，會把設定的轉址變成沒有 HTTP 狀態碼的 meta refresh 頁面（[Astro 設定參考](https://docs.astro.build/en/reference/configuration-reference/)）。請在網站代管的地方設定一對一的 301 轉址，例如透過 Cloudflare 的 \_redirects 檔案或 Worker。
9. **上線，然後持續觀察。**切換 DNS，在新網站驗證完成前保留 Framer 專案，並在接下來幾週追蹤 Search Console 的索引與「網頁」報表。我們的[網站遷移 SEO 檢查清單](https://dardo.studio/zh-Hant/blog/website-migration-seo-checklist/)涵蓋了上線當天及之後 90 天的工作。

## 遷移後有哪些改變

| 項目   | 在 Framer 上             | 在 Astro 上                          |
| ---- | ---------------------- | ---------------------------------- |
| 編輯   | Framer 的視覺化畫布          | CMS 欄位或程式碼，視你的選擇而定                 |
| 主機代管 | Framer 的伺服器            | 任何靜態主機或邊緣平台，例如 Cloudflare          |
| 轉址   | 需 Pro 方案；僅限同一網域內的子路徑   | 在你的主機上設定伺服器端 301，不受網域限制            |
| 動態效果 | 內建的效果與互動               | 你擁有且能量測的 CSS 與 JavaScript          |
| CMS  | Framer CMS collections | Content collections 或 headless CMS |
| 表單   | Framer 的表單處理           | 你自己的端點與資料儲存                        |

## 保住 SEO

Google 的[變更網址的網站搬遷指南](https://developers.google.com/search/docs/crawling-indexing/site-move-with-url-changes)在這裡同樣適用：將每個舊網址對應到最相近的新網址、使用伺服器端永久轉址，並至少保留一年。如果網址完全不變（細心的重建通常做得到），你只需要確認新頁面帶有相同的內容與中繼資料。

Framer 特有的陷阱，是殘留的 Framer 網址。請確認沒有任何 canonical、sitemap 項目或 Open Graph 標籤仍然指向舊的 Framer 網址，並在新網站上線後，將 Framer 專案取消發布或設定轉址。

## Dardo 如何執行 Framer 遷移

我們將 Framer 遷移納入[網站遷移](https://dardo.studio/zh-Hant/services/website-migration/)服務中執行：盤點、擷取，先重建一個具代表性的頁面並在約定的寬度下審查，接著再處理其餘的範本、表單與轉址。建置本身屬於以 Astro 進行的[網站開發](https://dardo.studio/zh-Hant/services/web-development/)，動態效果則屬於[創意開發](https://dardo.studio/zh-Hant/services/creative-development/)。dardo.studio 這個網站本身就是以 Astro 建置、運行於 Cloudflare Workers，內容則放在 headless CMS 中，這也是我們最常使用的架構。

如果你正在評估是否要遷移，[把網站和你想改變的地方告訴我們](https://dardo.studio/zh-Hant/contact/?service=website-migration)。在報價之前，我們會先告訴你重建是否值得。

## 常見問題

**可以把 Framer 網站匯出成 HTML 嗎？**

官方並不支援。Framer 的說明中心表示，Framer 不提供可供自行代管的 HTML 匯出功能。雖然有工具可以擷取已發布的頁面，但結果仍然依賴 Framer 的執行環境與 CDN，因此應將它當作重建時的參考，而不是直接部署的成品。

**從 Framer 轉到 Astro，會讓 Google 排名下降嗎？**

只要每個帶來流量的網址都持續有回應，就不會。盡可能維持相同的路徑，為有變動的網址加上 301 永久轉址，沿用標題、描述與結構化資料，並在上線後幾週持續關注 Search Console。

**可以匯出 Framer CMS 的內容嗎？**

Framer 表示，CMS 內容可以透過外掛匯出為 CSV 或 JSON 等格式。也請下載所有圖片與檔案，因為 collection 欄位經常指向 Framer 的 CDN。

**遷移到 Astro 之後，團隊還能不寫程式就編輯網站嗎？**

可以，只要新網站使用 headless CMS。編輯人員在網頁介面中作業，Astro 網站再根據這些內容重新建置。dardo.studio 就是這樣運作的。

**Framer 的動畫可以在 Astro 中使用嗎？**

無法直接使用。Framer 的效果是在它自己的執行環境中運行，因此每個想保留的動畫都要用 CSS 或一小段腳本重新製作，最好也提供減少動態效果的版本。

## 資料來源與延伸閱讀

本頁內容的資料來源，並附上原始發布者提供的更多詳情。

- [Framer Help：可以把網站匯出成 HTML 並自行代管嗎？（英文）](https://www.framer.com/help/articles/can-i-export-my-website-to-html-and-self-host-it/) · framer.com
- [Framer Help：將資料移出 Framer（英文）](https://www.framer.com/help/articles/porting-your-data-from-framer/) · framer.com
- [Framer Help：如何設定轉址（英文）](https://www.framer.com/help/articles/how-to-setup-redirects-to-maintain-seo-ranking/) · framer.com
- [Framer 價格方案（英文）](https://www.framer.com/pricing/) · framer.com
- [Astro 文件：Content collections（英文）](https://docs.astro.build/en/guides/content-collections/) · docs.astro.build
- [Astro 文件：圖片（英文）](https://docs.astro.build/en/guides/images/) · docs.astro.build
- [Astro 文件：國際化（i18n）路由（英文）](https://docs.astro.build/en/guides/internationalization/) · docs.astro.build
- [Astro 文件：設定參考（轉址）（英文）](https://docs.astro.build/en/reference/configuration-reference/) · docs.astro.build
- [Google 搜尋中心：變更網址的網站搬遷](https://developers.google.com/search/docs/crawling-indexing/site-move-with-url-changes) · developers.google.com

[Nicolás Cerón](https://dardo.studio/zh-Hant/studio/)

Nicolás Cerón 是 Dardo 的創辦人。Dardo 是一間位於哥倫比亞波哥大的品牌、網頁設計與開發工作室。

## 相關文章

- [**網站改版與搬遷 SEO 檢查清單：更換平台或網域，也不掉排名**排名下滑，通常不是因為換了新平台，而是原本帶來流量的網址不再有回應。這份檢查清單從網址盤點一路帶你走到第 90 天。](https://dardo.studio/zh-Hant/blog/website-migration-seo-checklist/)
- [**WordPress vs 客製化網站：該怎麼選？各自在什麼情況下值得投資**WordPress vs 客製化網站：什麼時候該選 WordPress、什麼時候客製化網站更划算，以及 headless WordPress 這條中間路線，從成本、速度、更新與所有權全面比較。](https://dardo.studio/zh-Hant/blog/wordpress-vs-custom-website/)
- [**Webflow 轉 Astro：如何遷移 Webflow 網站，同時保住內容、設計與排名**Webflow 轉 Astro 之前要知道：程式碼匯出不含 CMS、表單、搜尋與多語系頁面。本文說明該從 Webflow 匯出什麼、在 Astro 重建什麼，以及如何保住排名。](https://dardo.studio/zh-Hant/blog/webflow-to-astro/)
- [**3D 網站：什麼時候值得做，以及如何維持載入速度**3D 網站什麼時候值得做、什麼時候影片或圖片更合適，以及我們如何讓 Janus Observatory 的十個 3D 世界保持快速、無障礙又好用。](https://dardo.studio/zh-Hant/blog/3d-websites/)

## 繼續探索。

- [服務 · **網站遷移，不流失 SEO 成果**](https://dardo.studio/zh-Hant/services/website-migration/)

- [您的專案 · **開始聊聊**](https://dardo.studio/zh-Hant/contact/)