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

简短回答

Framer 自己的帮助中心明确表示，Framer 不提供可用于自托管的 HTML 导出（Framer Help）。因此，从 Framer 迁移到 Astro 是一次重建，而不是一次导出。你需要把已发布的网站采集下来作为参考，将每个模板重建为 Astro 组件，把 CMS 内容迁入内容集合，重做真正需要的动效，并为每个发生变化的 URL 设置永久重定向。

按这个顺序来做，新网站可以保持原有的外观、加载更少的 JavaScript，并保住排名。如果跳过采集或重定向映射，你得到的就会是一次没人要求的改版，外加搜索流量的下滑。

团队为什么要离开 Framer

Framer 是快速设计和发布营销网站的好工具。离开它的理由通常是实际问题，而不是审美问题：

• 托管与所有权。Framer 网站运行在 Framer 的服务器上。如果团队希望把代码放进自己的代码仓库、部署在自己的主机上，或者与自己的后端放在一起，就需要重建。
• 按站点计费的方案费用。根据 Framer 的价格页面（2026 年 10 月 12 日查询），Basic 方案每月 10 美元，增加了网站重定向功能的 Pro 方案每月 30 美元，均按年付费。本地化是付费附加功能。
• 重定向限制。Framer 的重定向只适用于同一域名内的路径（Framer Help）。
• 需要真正后端的表单、数据和集成：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）。下载每张图片和每个文件，并在自托管任何字体之前确认其授权许可。
3. 采集已发布的网站作为参考。在每个断点下记录每个模板，以及你想保留的每个动画的时间参数。我们的工具会在 1440、810 和 390 像素宽度下采集页面，然后针对在网站 CSS 中找到的每个断点，分别在低一像素、恰好等于和高一像素的宽度下再采集一次。
4. 将模板重建为 Astro 组件。把 CMS 集合迁入内容集合或无头 CMS，把图片交给 astro:assets 处理，把本地化页面交给 Astro 的 i18n 路由，每种语言一个 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 配置参考）。请在网站的托管位置设置 1:1 的 301 重定向，例如使用 Cloudflare 的 _redirects 文件或 Worker。
9. 上线，然后持续观察。切换 DNS，在新网站验证无误之前保留 Framer 项目，并在之后几周关注 Search Console 的索引编制和“网页”报告。我们的网站迁移 SEO 清单涵盖了上线当天以及之后 90 天的工作。

迁移之后有哪些变化

保住 SEO

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

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

Dardo 如何执行 Framer 迁移

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

如果你正在考虑迁移，把网站和你想改变的地方发给我们。在报价之前，我们会先告诉你重建是否值得。