How to Migrate Webflow to Astro: The Complete Guide (With Code)

I am a certified Webflow developer, and a growing share of my work is moving sites out of Webflow into Astro. That insider view changes how you approach the migration: I know exactly what Webflow’s export gives you, what it silently drops, and which parts of a Webflow site need rebuilding versus rescuing. This guide is the full process with the code included.

If you would rather hand it off, my Webflow to Astro migration service runs everything below for a fixed quote from $1,250. Building it yourself? Read on.

Short answer: Inventory the site, export your CMS content through the Webflow Data API with a script (the visual export does not include it), pick MDX or Sanity as the content home, rebuild the design as clean Astro components using the exported CSS as reference, recreate interactions with GSAP, then cut over with URL parity, 301s, and metadata carried over. Done in that order, rankings hold. The most common failure is trusting Webflow’s code export to be the migration; it is a snapshot, not a system.

Should you migrate at all?

Honest gate first, because I sell both directions. Stay on Webflow if your marketing team edits page layouts visually every day and the bills are sane; that is what Webflow is best at, and I say so as someone certified in it. Migrate when the costs scale against you (seats, bandwidth add-ons), the CMS item limits or API caps bite, performance has become a funnel problem, or your team wants content in git and AI-ready workflows. The full decision framework is in my Webflow vs Astro comparison.

Step 1: Inventory what Webflow is actually doing

List four things before touching code:

• Pages and components: every static page, the reusable sections, and which pages share layouts.
• CMS collections: each collection, its fields, item counts, and the templates that render them.
• Interactions: every Webflow interaction and animation, cataloged, because none of them export as usable code.
• URLs and rankings: your permalink structure and top pages from Search Console. These decide the redirect map.

Step 2: Understand what the code export gives you (and skip it as a base)

Webflow’s paid-plan export produces HTML, CSS, and JavaScript for static pages. It does not include CMS content, CMS template pages, forms handling, site search, or interactions logic. Two ways to use it:

1. As reference (recommended): keep the exported CSS as your visual source of truth and rebuild pages as clean Astro components that reuse those classes. You get a maintainable codebase that looks identical.
2. As a base: port the exported markup wholesale into Astro layouts. It works and is faster initially, but the markup carries Webflow’s generated structure, which is harder to maintain as the site grows.

Either way, the CMS side always goes through the API, which is the real migration.

Step 3: Export your CMS content through the Data API

Every Webflow site exposes collections through the Data API v2. Generate a site token in your Webflow site settings (Apps & Integrations), then pull every collection and item:

// export-webflow-cms.mjs (Node 20+): Webflow collections -> MDX files
import fs from 'node:fs';

const TOKEN = process.env.WEBFLOW_SITE_TOKEN;
const SITE_ID = 'your-site-id';
const headers = { Authorization: `Bearer ${TOKEN}` };

const { collections } = await (
  await fetch(`https://api.webflow.com/v2/sites/${SITE_ID}/collections`, { headers })
).json();

for (const collection of collections) {
  const dir = `src/content/${collection.slug}`;
  fs.mkdirSync(dir, { recursive: true });

  let offset = 0;
  while (true) {
    const { items } = await (
      await fetch(
        `https://api.webflow.com/v2/collections/${collection.id}/items?limit=100&offset=${offset}`,
        { headers }
      )
    ).json();
    if (!items?.length) break;

    for (const item of items) {
      const f = item.fieldData;
      const front = [
        '---',
        `title: ${JSON.stringify(f.name)}`,
        `slug: ${JSON.stringify(f.slug)}`,
        `pubDate: ${item.createdOn.slice(0, 10)}`,
        '---',
      ].join('\n');
      fs.writeFileSync(`${dir}/${f.slug}.md`, `${front}\n\n${f['post-body'] ?? ''}\n`);
    }
    offset += 100;
  }
  console.log(`Exported ${collection.displayName}`);
}

Notes from running this on real migrations:

• Field names in fieldData match your collection’s field slugs; log one item first and map every field you care about (SEO titles and descriptions included) into frontmatter.
• Rich text fields come out as HTML. Markdown files render embedded HTML fine; pipe through turndown if you want clean markdown.
• Importing into Sanity instead of MDX? Same loop, but write documents through Sanity’s client instead of files. The mapping table (collection field to Sanity field) is the part your team should review before the build.

Step 4: Bring the assets

Image URLs in exported content point at Webflow’s CDN, which keeps working after you leave, but you do not want your site depending on it. Collect every asset URL from the exported content, download each into public/images/, and rewrite references. The Data API also exposes an assets endpoint per site if you prefer pulling the full library directly.

Step 5: Rebuild in Astro

The structure that works, and the one this site’s architecture follows:

• Layouts for the shells (base HTML, head, nav, footer)
• Section components for each visual block, reusing the exported CSS classes so the design stays pixel accurate
• Content collections with a schema for each migrated CMS collection, replacing Webflow’s template pages with dynamic routes
• Forms move to hosted handling (Netlify Forms or similar); search gets rebuilt (Pagefind is the usual answer); interactions are recreated in GSAP from the catalog you made in step 1

Match the current design first. A migration that doubles as a redesign is two projects wearing one deadline.

Step 6: The SEO-safe cutover

The step that decides whether rankings survive:

1. URL parity. Webflow URLs are usually clean (/blog/post-name); build Astro routes to match exactly, including trailing-slash behavior.
2. 301 the exceptions in your host’s redirects file (Netlify _redirects or equivalent), including any Webflow-specific paths you are retiring:

# _redirects: only URLs that changed
/old-landing-page     /new-landing-page     301
/blog/category/news   /blog                 301

3. Metadata parity before improvement. Apply the exported SEO titles and descriptions to the new pages first; improve them after rankings settle.
4. Schema in code. Rebuild structured data properly in your layouts, then extend it (this is also the moment to add the AEO layer: entity schema, FAQ markup, llms.txt).
5. Sitemap and monitoring. Generate the sitemap with Astro’s integration, resubmit in Search Console, keep the Webflow site unpublished but intact as a fallback, and watch coverage daily for 30 days.

The launch checklist

• Every old URL returns 200 (same content) or 301 (mapped), never 404
• CMS items fully migrated, spot-checked against the live Webflow site
• Titles, descriptions, and OG images match or improve the old pages
• Interactions recreated and tested; forms tested end to end
• Lighthouse 95+ verified on key templates
• Analytics wired before cutover; sitemap resubmitted after

What this costs if you hire it out

DIY is 20 to 60 hours depending on CMS size and interaction complexity, and the export script above is the fast part. Hiring me is a fixed quote from $1,250: audit, export with a reviewed field mapping, pixel-accurate rebuild, redirect map, metadata parity, and 30 days of post-launch monitoring. And if the audit says you should stay on Webflow, I tell you that instead, because I do that work too.

FAQ

Can’t I just use Webflow’s code export as my new site?

You can publish it, but you shouldn’t. The export drops the CMS, forms, search, and interactions, so your blog and dynamic pages simply are not in it. It also freezes the site as generated markup that is painful to maintain. Use it as visual reference; rebuild properly.

What happens to my Webflow interactions?

They do not export as usable code. Catalog each one during the inventory, then recreate them with GSAP or CSS in the rebuild. Budget real time here; interaction-heavy sites are where DIY timelines slip most.

Do I need to keep paying Webflow during the migration?

Yes, until cutover. Keep the site live while you build, then downgrade or cancel after the new site has held rankings for a few weeks. The site plan is your rollback insurance during the transition.

Will my rankings drop?

Not if URL parity, redirects, and metadata parity are done as described. Expect small fluctuations that settle within two to four weeks. The migrations that lose 40 to 60 percent of traffic are the ones that changed URLs silently or launched without redirect maps, which is precisely what the checklist prevents.