Migrate Webflow to Astro

Why Astro fits Webflow exits

Setup, end to end

1. 1

   Export from Webflow

   Use Webflow Export. You'll get the static pages plus one folder per CMS collection containing .md, .mdx, and .json files with normalized front-matter.

2. 2

   Create an Astro project

   npm create astro@latest — pick the minimal starter. Add Tailwind or your styling choice via astro add.

3. 3

   Drop in the content folders

   Move each collection folder from the export into src/content/. Move the export's assets/ into public/assets/ (or under src/assets/if you want Astro's asset pipeline to process them).

4. 4

   Define the content collection schema

   Add src/content/config.ts:

   import { defineCollection, z } from "astro:content";
   
   const blogPosts = defineCollection({
     type: "content",
     schema: z.object({
       title: z.string(),
       slug: z.string(),
       date: z.coerce.date(),
       cover: z.string().optional(),
       excerpt: z.string().optional(),
     }),
   });
   
   export const collections = { "blog-posts": blogPosts };

   The keys match the front-matter the exporter generates — no renaming needed.

5. 5

   Build a route

   Add src/pages/blog/[slug].astro:

   ---
   import { getCollection } from "astro:content";
   
   export async function getStaticPaths() {
     const posts = await getCollection("blog-posts");
     return posts.map((p) => ({ params: { slug: p.slug }, props: { post: p } }));
   }
   
   const { post } = Astro.props;
   const { Content } = await post.render();
   ---
   <article>
     <h1>{post.data.title}</h1>
     <time>{post.data.date.toDateString()}</time>
     <Content />
   </article>

6. 6

   Rebuild the static marketing pages

   Pages without CMS data go under src/pages/ as .astrofiles. Use the exported HTML as a layout and copy reference; you'll usually clean up class names and factor out shared chunks into components.

7. 7

   Deploy

   npm run build, drop dist/on any static host. Astro's output is ~50–80% smaller than the equivalent Webflow page once Webflow's runtime CSS and JS are gone.

Webflow CMS fields → Astro schema

FAQ — Webflow to Astro

Does the rich-text body keep its formatting in Astro?

Yes. The exporter converts Webflow rich text to clean Markdown, and Astro's Content component renders it with proper heading levels, lists, code blocks, blockquotes, and inline images.

Can I use MDX instead of plain Markdown in Astro?

Yes — install @astrojs/mdx, then rename the exported .md files to .mdx (or use the .mdx copies the exporter already produces). You can drop Astro components into the content body for callouts, embeds, and anything else.

How do references between collections work?

Use Astro's reference()helper in your schema. The exporter outputs reference fields as the referenced item's slug, which matches the file name in the other collection — so Astro can resolve them at build time.

What about images in CMS rich text?

Every image in a rich-text field is downloaded into the assets folder and the Markdown is rewritten to point at the relative path. In Astro, you can either keep them in /public/assets/ for direct serving, or move into src/assets/and let Astro's image pipeline process them.

Is this faster than the Webflow original?

Almost always. Zero JS by default, no runtime CSS injection, and Astro's image pipeline produces aggressive responsive variants. LCP improvements of 30–60% are typical.