This guide explains the high-level technical process required to move your website, content, and CMS from Webflow to Netlify Create.
This process is highly variable based on your site and your needs. In general, there are two typical ways to migrate.
- One-Time Migration: Migrating all at once is the fastest way to move off of Webflow and onto modern architecture. But it takes longer to launch and involves more effort up front.
- Gradual Migration: Migrating a page (or series of pages) individually means getting (part of) your new site into production faster. It’s also a lower barrier to entry, and is a great way to test if Netlify Create is right for you before fully migrating.
Scroll to the bottom of the guide for a list of common questions that our customers ask while considering this move. And talk to us at any time for guidance on your migration.
One-Time Migration from Webflow to Netlify Create
Migrating all at once is the fastest way to move off of Webflow and onto modern architecture. But it takes longer to launch and involves more effort up front.
Follow the sections below for an overview of the one-time migration process.
Create New Netlify Create Project
We recommend that you begin by getting familiar with Netlify Create. You can follow the getting started tutorial and read how Netlify Create works.
After you’re comfortable with Netlify Create and how it works, create your new site using your preferred stack. If you aren’t sure or don’t see a reference to your preferred stack in the docs, talk to us.
At the end of this step, you should have the beginnings of a new website using a framework (e.g. Next.js, SvelteKit, Astro), with content in a content source (e.g. Contentful, Sanity, Markdown/JSON files).
Export Webflow Content
Once you are beginning to get comfortable with Netlify Create, it’s time to pause and export your code and content from Webflow.
This guide shows you how to export collections content (as CSV files), while this guide walks through exporting your code.
Import Content into New Content Source
Once you’ve exported your content, it’s time to transform and import it into your new content source. This process varies depending on the types of pages and content you’re working with. See below for more details on importing Webflow content.
Note that, even though you are planning to migrate your whole site at one time, you don’t have to migrate all your content at one time. You can start the process, then move on to build the relevant parts of the site, and come back to the content.
This can make the process feel more approachable without burning you out before you’ve written much code.
Build Out Your Website
Once at least some content is in your content source, you can start fetching it and building out your site’s components and page templates.
Continue doing this until you’re ready to launch.
Launch the New Site
When it’s time to launch, you’d follow this process like you would while building any other site. Work through pre-launch tasks, such as ensuring all SEO content is in place and page speeds are performing well. Then pick a build/hosting provider, wire up the DNS, and go live!
If you need help launching your site or if you get stuck during any part in this process, contact support.
Gradual Migration from Webflow to Netlify Create
Migrating a page (or series of pages) individually means getting (part of) your new site into production faster. It’s also a lower barrier to entry, and is a great way to test if Netlify Create is right for you before fully migrating.
Follow the sections below for an overview of the gradual migration process.
Create New Netlify Create Project
We recommend that you begin by getting familiar with Netlify Create. You can follow the getting started tutorial and read how Netlify Create works.
After you’re comfortable with Netlify Create and how it works, create your new site using your preferred stack. If you aren’t sure or don’t see a reference to your preferred stack in the docs, talk to us.
At the end of this step, you should have the beginnings of a new website using a framework (e.g. Next.js, SvelteKit, Astro), with content in a content source (e.g. Contentful, Sanity, Markdown/JSON files).
Build the Home Page
With your new code framework and content source in place, build out the content models and component code necessary to build the home page.
At this point, you could choose to rebuild the home page just as it was, or also use this as an opportunity to improve upon your existing site.
Deploy New Website
Once the first page is done, you can deploy your new site. How exactly you execute this depends on the build/hosting provider that you choose.
But, in most cases, the best way to do this is like this:
- Configure a reverse proxy on the new site’s domain (the one with just a home page) that proxies all routes that aren’t the home page to some subdomain. For example, say Webflow is using www.mysite.com. You would create a proxy for all pages under the new site to point to something like old.mysite.com.
- Launch the new site (www.mysite.com).
- Configure Webflow and your domain to use the subdomain (old.mysite.com).
Note that there is often a bit of downtime here, so you may want to do this during low-traffic hours. Contact support for guidance, as needed.
If you’re using Netlify, here is an article that explains the process.
Continue Building One Page at a Time
Once you’ve launched the home page, you can now continue by adding a new page (or series of pages), one at a time.
Here’s a talk from Jamstack Conf 2020 that further explains the process (also within the context of Netlify).
Migrating to a New Content Source
The getting started tutorial (the recommended first step in both migration patterns) teaches you that Netlify Create sites must follow a content-driven development approach. This means:
- Your content is separated from your code and lives in a content source.
- To provide a flexible editing experience, the content should be structured into reusable component models that can be stitched together within page models.
Handling Collection Content
Collections in Webflow are already structured and exportable. This means you can write a script that does the following:
- Parse the CSV collection content.
- Transform data objects to match what your new content source expects.
- Import transformed data into the new content source.
Most common CMS providers today offer a means of importing content via an API and/or a supported SDK library in your preferred language.
Working with Page Content
Unfortunately, Webflow only structures collection-based content, like posts and products. Page content is embedded directly in the exported HTML code, which makes it extremely difficult and unpredictable to remove programmatically.
The content is also not structured using components, which further complicates the migration process.
For many sites, the best option may be to manually load the new content. However, for sites with a large number of pages, there are extraction and migration strategies we can employ to make this process less painful. Talk to us for details.
Migrating Assets
Assets are automatically packaged with the code export. Like handling collection content, most CMS providers enable you to programmatically upload assets. However, linking to these assets may be a manual process, depending on how you’ve decided to import page (and component) content.
Webflow Migration FAQs
Here are a series of questions we’re often asked when teams are looking to move their website to Netlify Create:
How much effort is this going to take? The time and effort is highly dependent on your situation, which is unique to other Webflow projects. It also varies based on whether you decide to migrate gradually or all at once. Contact us for a more specific estimate based on your site.
Do I have to rebuild/rewrite all my content? No, not necessarily. Collections can be exported and relatively easily imported into your new content source. Page content may have to be rewritten, although there are strategies to automate this, too. See above for more details on content migration.
Can I migrate over time, or do I have to do it all at once? You can definitely migrate one page at a time. This is a great fit for many projects. See the gradual migration section for more information.
Does this migration require development skills? Yes. But if you don’t have a developer, we can help pair you with the right one.
Do I have to rebuild the site? The exported Webflow code is in such a state that it is often highly beneficial to rewrite the code. The exported code is not modularized or built with best practices in mind. And the associated CSS and JS files are very difficult to work with. We can help guide you on the best approach for your site.
Will I be locked into using Netlify Create after the migration? No! Not at all! One of our core values is that you avoid vendor lock-in when working with Netlify Create. The content sources we support all have capabilities to export your content and move it elsewhere. And you have 100% ownership over your code, so you can move, customize, and migrate it however you’d like. Working with Netlify Create requires just a little configuration and markup.