---
title: "Framer 迁移到 Astro：方法与 SEO 要点"
description: "Framer 迁移到 Astro：Framer 无法导出 HTML。要采集什么，如何重建 CMS、动效和表单，以及如何保住 URL 和 SEO。"
url: "https://dardo.studio/zh-Hans/blog/framer-to-astro/"
language: "zh-Hans"
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-Hant":"https://dardo.studio/zh-Hant/blog/framer-to-astro/"}
updated: "2026-10-13T00:59:14.165Z"
---

[博客](https://dardo.studio/zh-Hans/blog/)

# Framer 迁移到 Astro：如何迁移 Framer 网站，同时保住设计和排名

Framer 不提供 HTML 导出，所以迁移到 Astro 只能重建。先采集什么、哪些会失效，以及如何保住设计、URL 和排名。

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

![夜晚的画室里，画架上立着一个空的鎏金画框，一根深红色的线从画框延伸出去，穿过敞开的窗户，沿着山坡小路一直通向星空下一座亮着灯的天文台。](https://dardo.studio/_astro/01M4S57PW4TH7D1E7E3RQM4Z4E_Z3SVDC.webp)

## 要点

- Framer 不提供用于自托管的 HTML 导出，因此迁移到 Astro 意味着以已发布的 Framer 页面为参考，重建整个网站。
- 重建之前，先记录每个 URL、CMS 集合、断点和动画，因为 Framer 是从自己的 CDN 和运行时加载内容、图片和代码的。
- Framer 表单和 CMS 文件依赖 Framer 的运行时；请为每个表单配置你自己的端点，并把 CMS 内容迁入 Astro 内容集合或无头 CMS。
- 在主机上设置 1:1 的服务器端 301 重定向；未使用适配器的 Astro 静态构建只会生成 meta refresh 重定向。
- 上线后，确保没有任何 canonical、站点地图条目或 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 内容迁入内容集合，重做真正需要的动效，并为每个发生变化的 URL 设置永久重定向。

按这个顺序来做，新网站可以保持原有的外观、加载更少的 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 加载的小模块只是重新导出真正的代码包，所以只扫描一遍会漏掉代码。这个工具会反复扫描，直到不再出现新的模块。
- **CMS 内容是一种单独的文件格式**。Framer CMS 集合以 .framercms 文件的形式发布，页面会按字节范围从 CDN 获取这些文件。在普通的静态主机上，这些请求会返回整个文件，而负责构建其 URL 的模块又会指回 Framer。
- **运行时会在页面加载后改写页面**。Framer 的 React 运行时会对 HTML 进行水合（hydration），并可能重新插入你删除的元素。例如，“Made in Framer”徽标就会被水合到它自己的容器中。
- **表单依赖 Framer**。采集到的表单没有 HTML action，只有通过 Framer 的客户端运行时才能提交。
- **SEO 标签指向 Framer**。如果不加改写，canonical 和 Open Graph URL 会继续宣传原来的 Framer 地址。
- **动效是数据**。出现效果（Appear effects）以 JSON 数据的形式存储在页面中，因此工具会把它们连同每个正在运行的动画的关键帧和时间参数一起记录下来。

我们得出的结论是：导出结果是证据，而不是交付物。我们从不上线采集到的 HTML 或 Framer 的运行时。它们的作用，是准确地告诉我们需要重建什么。

## Framer 迁移到 Astro：分步指南

1. **盘点每个 URL**。从网站的 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 中找到的每个断点，分别在低一像素、恰好等于和高一像素的宽度下再采集一次。
4. **将模板重建为 Astro 组件**。把 CMS 集合迁入[内容集合](https://docs.astro.build/en/guides/content-collections/)或无头 CMS，把图片交给 [astro:assets](https://docs.astro.build/en/guides/images/) 处理，把本地化页面交给 [Astro 的 i18n 路由](https://docs.astro.build/en/guides/internationalization/)，每种语言一个 URL。
5. **重做承载意义的动效**。大多数 Framer 效果都可以改用 CSS 过渡、关键帧动画或一小段脚本来实现。请遵循 prefers-reduced-motion 设置。在我们自己的一次 Framer 到 Astro 重建中（一个包含 18 个路由的网站，并非客户项目），219 个滚动和交互状态中有 217 个与原网站的像素差异在 1% 以内。
6. **为每个表单配置真正的端点**。将每个表单指向你自己的处理程序（Cloudflare Worker、表单服务或你的 CRM），并在预发布环境中测试能否正常送达。
7. **迁移搜索元数据**。每个页面都要有标题、描述、Open Graph 标签、结构化数据和自引用 canonical，并生成一份新的 XML 站点地图。
8. **在服务器端重定向，而不是在 HTML 中**。未使用适配器的 Astro 静态构建，会把配置好的重定向变成没有 HTTP 状态码的 meta refresh 页面（[Astro 配置参考](https://docs.astro.build/en/reference/configuration-reference/)）。请在网站的托管位置设置 1:1 的 301 重定向，例如使用 Cloudflare 的 \_redirects 文件或 Worker。
9. **上线，然后持续观察**。切换 DNS，在新网站验证无误之前保留 Framer 项目，并在之后几周关注 Search Console 的索引编制和“网页”报告。我们的[网站迁移 SEO 清单](https://dardo.studio/zh-Hans/blog/website-migration-seo-checklist/)涵盖了上线当天以及之后 90 天的工作。

## 迁移之后有哪些变化

| 方面  | 使用 Framer          | 使用 Astro                    |
| --- | ------------------ | --------------------------- |
| 编辑  | Framer 中的可视化画布     | CMS 字段或代码，取决于你的选择           |
| 托管  | Framer 的服务器        | 任意静态主机或边缘平台，例如 Cloudflare   |
| 重定向 | Pro 方案；仅限同一域名内的子路径 | 在你的主机上设置服务器端 301，不受域名限制     |
| 动效  | 内置效果和交互            | 由你掌控、可以衡量的 CSS 和 JavaScript |
| CMS | Framer CMS 集合      | 内容集合或无头 CMS                 |
| 表单  | Framer 的表单处理       | 你自己的端点和数据存储                 |

## 保住 SEO

Google 关于[涉及网址变更的网站迁移](https://developers.google.com/search/docs/crawling-indexing/site-move-with-url-changes)的指南同样适用于这里：把每个旧 URL 对应到最接近的新 URL，使用服务器端永久重定向，并至少保留一年。如果 URL 保持完全一致（细致的重建通常可以做到这一点），你只需确认新页面带有相同的内容和元数据。

Framer 特有的陷阱是遗留的 Framer 地址。请确保没有任何 canonical、站点地图条目或 Open Graph 标签仍然指向旧的 Framer URL，并在新网站上线后，取消发布 Framer 项目或为其设置重定向。

## Dardo 如何执行 Framer 迁移

我们把 Framer 迁移作为[网站迁移](https://dardo.studio/zh-Hans/services/website-migration/)服务的一部分来执行：盘点、采集，先重建一个有代表性的页面并在约定的宽度下审核，然后再完成其余的模板、表单和重定向。构建本身属于基于 Astro 的[网站开发](https://dardo.studio/zh-Hans/services/web-development/)，动效工作则属于[创意开发](https://dardo.studio/zh-Hans/services/creative-development/)。本网站 dardo.studio 就是用 Astro 构建、运行在 Cloudflare Workers 上，内容存放在无头 CMS 中，这也是我们最常用的架构。

如果你正在考虑迁移，[把网站和你想改变的地方发给我们](https://dardo.studio/zh-Hans/contact/?service=website-migration)。在报价之前，我们会先告诉你重建是否值得。

## 常见问题

**能把 Framer 网站导出为 HTML 吗？**

官方不支持。Framer 的帮助中心表示，它不提供用于自托管的 HTML 导出。有些工具可以采集已发布的页面，但得到的结果仍然依赖 Framer 的运行时和 CDN，因此应把它当作重建的参考，而不是可以直接部署的东西。

**从 Framer 迁移到 Astro，会丢失 Google 排名吗？**

只要每个带来流量的 URL 都能继续访问，就不会。尽可能保持路径不变，为发生变化的路径添加永久 301 重定向，迁移标题、描述和结构化数据，并在上线后的几周内关注 Search Console。

**可以导出 Framer CMS 的内容吗？**

Framer 表示，CMS 内容可以通过插件导出为 CSV 或 JSON 等格式。同时也要下载每张图片和每个文件，因为集合字段往往指向 Framer 的 CDN。

**迁移到 Astro 之后，团队还能不写代码就编辑网站吗？**

可以，前提是新网站使用无头 CMS。编辑人员在网页界面中工作，Astro 网站再根据这些内容重新构建。dardo.studio 就是这样运作的。

**Framer 的动画在 Astro 中还能用吗？**

不能直接使用。Framer 的效果在它自己的运行时中运行，因此每个想保留的动画都要用 CSS 或一小段脚本重建，最好同时提供一个减少动态效果的版本。

## 资料来源与延伸阅读

本页内容的资料来源，并附有原出版方提供的更多详情。

- [Framer 帮助中心：能否将网站导出为 HTML 并自行托管？](https://www.framer.com/help/articles/can-i-export-my-website-to-html-and-self-host-it/) · framer.com
- [Framer 帮助中心：从 Framer 迁出数据](https://www.framer.com/help/articles/porting-your-data-from-framer/) · framer.com
- [Framer 帮助中心：如何设置重定向](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 文档：内容集合](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-Hans/studio/)

Nicolás Cerón是Dardo的创始人,Dardo是一家位于哥伦比亚波哥大的品牌、网页设计与开发工作室。

## 相关文章

- [**网站迁移 SEO 清单：更换平台或域名，也不丢排名**排名下降，很少是新平台的错；真正的原因是曾带来流量的 URL 不再有响应。这份清单从 URL 盘点一直覆盖到第 90 天。](https://dardo.studio/zh-Hans/blog/website-migration-seo-checklist/)
- [**WordPress 与定制网站怎么选？各自在什么情况下更划算**WordPress 与定制网站怎么选：何时选 WordPress，何时定制网站更划算，以及无头 WordPress 这条中间路线，从成本、速度、更新和所有权进行比较。](https://dardo.studio/zh-Hans/blog/wordpress-vs-custom-website/)
- [**Webflow 迁移到 Astro：如何迁移 Webflow 网站，同时保住内容、设计和排名**Webflow 迁移到 Astro 之前要知道：代码导出不含 CMS、表单、搜索和多语言页面。哪些要从 Webflow 导出、哪些要在 Astro 中重建，以及如何保住排名。](https://dardo.studio/zh-Hans/blog/webflow-to-astro/)
- [**3D 网站：什么时候值得做，以及如何保持快速**3D 网站什么时候值得做，什么时候视频或图片效果更好，以及我们如何让 Janus Observatory 的十个 3D 世界保持快速、无障碍且易用。](https://dardo.studio/zh-Hans/blog/3d-websites/)

## 继续探索。

- [服务 · **网站迁移，不丢失 SEO**](https://dardo.studio/zh-Hans/services/website-migration/)

- [你的项目 · **开始沟通**](https://dardo.studio/zh-Hans/contact/)