Gatsby to Webflow

Gatsby is a React framework that generates fast static sites, but running one usually means a developer for every design change, a build pipeline to maintain and a separate headless CMS. If your team wants to edit pages and publish without a deploy, Webflow is a common place to move. This guide covers how to migrate a website from Gatsby to Webflow: what to export, how to rebuild the components, how to import content and how to keep the rankings you have already earned.

Gatsby to Webflow Migration at a Glance

• Typical timeline: about 2 to 4 weeks for a marketing site, longer for large blogs or sites with heavy custom React components.
• Biggest SEO risks: changed URLs without 301 redirects, lost page titles and meta descriptions, trailing slash differences, and structured data that lived in your React components.
• What moves over: your content (markdown, MDX or headless CMS entries) and media. Your React components, GraphQL queries and build setup do not. The design is rebuilt in Webflow.
• What protects your SEO: a full URL and metadata audit before you start, a one-to-one redirect map, and Search Console monitoring after launch.

Why Migrate from Gatsby?

• No developer for every change: designers and marketers can edit layouts and publish directly in Webflow.
• One platform: hosting, CMS and design in one place, instead of Gatsby plus a headless CMS plus a host such as Netlify or Vercel.
• Less maintenance: no dependency updates, plugin conflicts or broken builds to fix.
• Faster iteration: changes publish in seconds, without a build and deploy cycle.

Gatsby vs Webflow

Gatsby

• Developer-driven: React, GraphQL and static site generation, with complete control over the code.
• Separate services: content usually comes from markdown files or a headless CMS such as Contentful or Strapi, and the site is deployed to a separate host.
• Build step: every content change triggers a rebuild before it goes live.

Webflow

• Visual development: design and build in the browser, with clean HTML and CSS output.
• Integrated CMS and hosting: collections, SSL and a CDN come with the platform.
• Less flexibility for complex apps: highly custom React logic, authenticated dashboards and complex data fetching are not what Webflow is built for, so check whether your site really is a marketing site.

Before You Migrate: Audit Your Gatsby Site

1. List every URL. Check your sitemap (often /sitemap-index.xml or /sitemap-0.xml with gatsby-plugin-sitemap) and run a crawler such as Screaming Frog to catch pages it misses.
2. Record your metadata. Export each page’s title, meta description, H1, canonical and Open Graph tags. In Gatsby these often live in a React SEO component, so a crawl is the easiest way to see the final output.
3. Find your best pages in Google Search Console. These must keep their content and URLs where possible.
4. Map your data sources. Note whether content comes from markdown, MDX, JSON, a headless CMS or an API, and which pages are generated from which source.
5. List your integrations: forms, analytics, search, newsletter tools and any serverless functions.
6. Check your existing redirects. They may live in gatsby-node.js (createRedirect), a Netlify _redirects file or vercel.json. Export them so they can be merged into Webflow.
7. Note your trailing slash behaviour. Gatsby can serve URLs with or without a trailing slash depending on configuration. Webflow serves URLs without one.

Exporting Content and Assets from Gatsby

1. Markdown and MDX content: collect the files from your content folder and convert the front matter and body into columns in a CSV. A short script, or a spreadsheet, is usually the quickest way.
2. Headless CMS content: export entries from Contentful, Strapi, Sanity or similar. Most offer a CSV or JSON export, or an API you can query.
3. Media assets: download images and files from your static folder or CMS. Keep file names and alt text, since both help image SEO.
4. Custom code: gather any JavaScript, CSS or tracking snippets so you can re-add what is still needed.
5. Convert body content to HTML. Webflow rich text fields accept HTML, so convert markdown to HTML before import and check headings, links and code blocks.

Rebuilding the Site in Webflow

1. Set up a Webflow project and define your colours, typography and spacing as variables before building pages.
2. Turn React components into Webflow components. Navbars, footers, cards and CTAs become reusable Components, so you keep the same “build once” idea without the code.
3. Recreate each layout with a consistent class naming system. Layouts built from CSS grid or flexbox translate well, since Webflow supports both.
4. Rebuild animations with Webflow interactions. Libraries like Framer Motion or GSAP do not carry over automatically, so decide which effects are worth recreating.
5. Check every breakpoint. Webflow is desktop-first, so test tablet and mobile as you build.

Importing Content into Webflow

1. Create CMS collections that mirror your data sources: blog posts, case studies, authors, categories and so on. Use reference fields for relationships that Gatsby handled in GraphQL.
2. Prepare your CSV with columns that match the collection fields, including slug, SEO title and SEO description.
3. Import the CSV and check a sample of items for formatting and image problems.
4. Upload media to the Assets panel and link it to the right items.
5. Replace gatsby-image output. Gatsby generates optimised image variants at build time. Webflow does this on upload, so use the original high-resolution files.

Check your Webflow plan’s CMS item limit before importing a large collection, since it varies by plan.

Replacing Gatsby Plugins and Features

• gatsby-plugin-sitemap: Webflow generates an XML sitemap automatically at /sitemap.xml.
• gatsby-plugin-react-helmet or SEO components: use Webflow’s SEO settings for titles, descriptions and Open Graph tags, and the schema markup field for structured data.
• Forms and serverless functions: use Webflow Forms with an integration such as Zapier or Make, or webhooks for anything custom.
• Search: Webflow has built-in site search, or you can embed a third-party search tool.
• Analytics: add Google Analytics or your preferred tool through custom code settings.
• Authentication and gated content: use a tool built for Webflow such as Memberstack, or Webflow’s own user accounts where they fit.

Gatsby URL Patterns to Redirect

• Blog post paths: Gatsby derives these from file names or a slug field. Webflow CMS pages sit under a collection prefix such as /blog/post-name, so posts that lived at other paths need a redirect.
• Trailing slashes: if your Gatsby URLs end in a slash, test that each old URL reaches the new page with a single redirect.
• Tag and category pages: pages created by gatsby-node.js for tags and categories need a redirect to the closest new page.
• Pagination: paginated blog URLs such as /blog/2 should point to the blog index or a collection page.
• Page data and other generated files: check your crawl for any other paths that were indexed.

Managing SEO and Redirects

1. Build the redirect map in a spreadsheet, with every important old URL next to its new Webflow URL.
2. Add the 301 redirects in Webflow under Site settings → Publishing → 301 redirects. Add them one at a time, use wildcard rules for whole folders, or import a CSV for a long list. Importing a CSV overwrites existing redirects, so export your current list first. My Webflow 301 redirects guide covers the syntax and wildcards.
3. Carry over metadata: copy every title, description and alt text into Webflow, and re-add structured data such as Article, Organization or FAQ schema.
4. Publish, because redirects only take effect after publishing.
5. Check for broken links with a crawler to catch internal links that still point at old URLs.

If you need to move a large site gradually rather than all at once, my guide to migrating to Webflow in stages with a reverse proxy explains how.

Gatsby to Webflow SEO Checklist

1. Copy every title, meta description, H1 and image alt text into Webflow.
2. Keep your URL slugs the same wherever you can.
3. Test your redirects after launch: each old URL should return one 301 to a live page, with no chains.
4. Check your sitemap lists only the pages you want indexed.
5. Update internal links to point to final URLs, not redirects.
6. Reconnect analytics and conversion tracking.
7. Keep your old Gatsby site and host running until DNS has fully switched.
8. Submit the new sitemap in Google Search Console and review the Pages and Performance reports weekly for a few weeks.

Launching the Webflow Website

1. Test your site on desktop, tablet and mobile, including forms, links and interactions.
2. Lower your DNS TTL a day before launch, so the switch takes effect quickly.
3. Connect your domain in your Webflow site’s publishing settings and update the DNS records at your registrar as instructed. SSL is added automatically.
4. Publish the site and your redirects, then test a sample of old URLs.
5. Monitor Search Console and analytics for 404s and ranking changes, and fix any quickly.

Common Problems

• Moving an app, not a website: Gatsby sites with authenticated dashboards or heavy client-side logic may not suit Webflow.
• Missing generated URLs: tag, category and pagination pages created in gatsby-node.js are easy to forget.
• Lost structured data: schema added in React components is not exported with the content.
• Broken images: posts that still point at the old host break the moment it is switched off.
• Overwriting redirects: importing a CSV without exporting the existing list first.

Need Help Migrating from Gatsby to Webflow?

I’m Nikolai, a Webflow Premium Partner who builds and migrates websites for SaaS companies. I handle the URL audit, content conversion, redirect map and SEO checks so you keep your rankings through the move. Get in touch to talk about your site, or read more about my Webflow migration services. Moving from another framework? See the guides for Next.js and React.

Frequently Asked Questions

How do I migrate a website from Gatsby to Webflow?

Export your content from markdown files or your headless CMS, rebuild the design and components in Webflow, import the content into CMS collections via CSV, then set up 301 redirects, carry over your metadata and publish. Audit your URLs and metadata first so nothing is lost.

Why would a team migrate a Gatsby site to Webflow?

Teams often move off Gatsby to reduce the ongoing engineering work of maintaining a React-based static site generator, its build pipeline and hosting, in favour of a visual editor that lets non-developers make content and design changes directly.

Can Gatsby’s GraphQL data layer be replicated in Webflow?

Not directly. Webflow uses its own CMS collections rather than GraphQL, so structured content modelled in Gatsby’s data layer needs to be re-modelled as Webflow collections and fields. This usually maps well for typical blog and marketing content.

Will migrating from Gatsby to Webflow hurt my SEO rankings?

Not if it is handled carefully. Gatsby sites are often already fast, so the priority is keeping that performance in Webflow and setting up 301 redirects from every existing URL, along with your titles, descriptions and structured data.

Does migrating from Gatsby mean giving up custom code entirely?

No. Webflow supports custom code at the page and site level, so specific interactive components can still use custom JavaScript. Highly complex React components may need to be simplified or rebuilt with Webflow’s native interactions.

How long does a Gatsby to Webflow migration take?

Most marketing sites take two to four weeks, depending mainly on how many unique layouts and custom components need rebuilding and how much content has to be converted.