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 组件，替换表单和搜索，重做你想保留的交互，并为每个发生变化的 URL 设置永久重定向。按这个顺序来做，新网站就能保住原有的设计、内容和排名。

团队为什么从 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. 盘点每个 URL。启用相应选项后，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 列表。用它来查看精确的间距、断点和类名结构。
5. 在 Astro 中为内容建模。把每个 Collection 转换为 Astro 的内容集合或无头 CMS 模型，引用关系仍保持为引用，然后把每个模板重建为 Astro 组件，并把图片交给 astro:assets 处理。
6. 重做承载意义的交互。大多数 Webflow Interactions 都可以改用 CSS 过渡、关键帧动画或几行 JavaScript 来实现。对于更复杂的动效，自 2025 年 4 月 Webflow 将 GSAP 免费开放以来，GSAP 已可免费用于商业用途（Webflow）。无论采用哪种方式，都要遵循 prefers-reduced-motion 设置。
7. 替换表单、搜索和受保护页面。为每个表单配置真正的端点（Cloudflare Worker、表单服务或你的 CRM）；如果网站需要搜索，就添加 Pagefind 这样的静态搜索索引；并把所有密码保护迁移到你的主机或应用中。
8. 认真重建本地化页面。代码导出只包含主语言，因此要用 Astro 的 i18n 路由构建每种语言，每种语言一个 URL，并在它们之间设置 hreflang。
9. 保持 URL 格式一致。Webflow 提供的页面不带末尾斜杠，并会把 /pricing/ 重定向到 /pricing。请设置 Astro 的 trailingSlash 和 build.format，让新网站生成相同的地址（Astro 配置参考）；每一处不一致，都意味着一个本不需要的重定向。
10. 在服务器端重定向，然后上线并持续观察。未使用适配器的 Astro 静态构建，会把配置好的重定向变成 meta refresh 页面，因此要在网站的托管位置设置 1:1 的 301 重定向，例如使用 Cloudflare 的 _redirects 文件。切换 DNS，在新网站验证无误之前保留 Webflow 项目，并在之后几周关注 Search Console 的索引编制报告。我们的网站迁移 SEO 清单涵盖了上线当天以及之后 90 天的工作。

迁移之后有哪些变化

保住 SEO

Google 关于涉及网址变更的网站迁移的指南同样适用于这里：把每个旧 URL 对应到最接近的新 URL，使用服务器端永久重定向，并至少保留一年。如果 URL 保持完全一致（对 Webflow 网站来说，细致的重建往往可以做到），你主要需要确认标题、描述、canonical 标签、结构化数据和 Open Graph 图片都已完整迁移。

Webflow 特有的陷阱是遗留的东西：仍从 website-files.com 加载的 Open Graph 图片或 PDF、仍被索引的 webflow.io 预发布地址，或者在迁移中 slug 发生了变化的 CMS 页面。关闭 Webflow 项目之前，请把这三项都检查一遍。

Dardo 如何执行 Webflow 迁移

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

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