Are you wanting to export your Webflow site code so that you can host it elsewhere or integrate it directly with a server-side application you're building?
Webflow's export site feature is available on any paid workspace plan. You can export any site, whether or not it's on a hosting plan- however where the export feature is concerned, a Webflow site hosting plan is not needed or relevant in any way.
Critical limitations
Webflow's site export has two critical limitations;
- CMS content is not exported. Your CMS pages will disappear, and Collection Lists throughout your site are removed entirely.
- Webflow localization ( language-translated ) content is unsupported.
In addition, any Webflow hosted services you're using will be lost or will need to be replaced;
- The CMS, and any dynamic content management
- Form submission handling ( switch to Basin )
- ECommerce ( switch to Foxy.io, Shopify buttons, ECwid, etc. )
- User Accounts ( switch to Memberstack )
- Logic ( switch to Make.com, Zapier, or n8n )
- The client editor
- Site search
Exporting a CMS / ECom Site
Webflow's lack of support for CMS content in the export feature is a significant problem, and many designers struggle to understand their options here.
The Webflow CMS Site Export Process
Typically, you would export a Webflow CMS site in several steps;
- Export the site HTML, CSS and JS using the export site workspace feature
- Export all CMS content, one collection at a time
- Similarly, export all ECommerce content, if you have any
And you would then need to re-assemble your content on a new platform, with a new CMS solution- Sanity, Contentful, or something else.
There's a lot of development and rework involved in this platform migration.
Even in your site design itself, this still leaves you with a lot of work around rebuilding CMS template pages, collection lists, user sign-up and log-in, etc.
Exporting your CMS Page designs & Collection lists
Webflow's export feature simply removes these elements and pages from your exported code. The key to obtaining them is to unbind them first, before export.
First, clone your site. We're going to export the cloned site rather than your original, because the process will be destructive. Remember, export is a workspace plan feature, not a site plan feature, so it doesn't matter that you're exporting a clone.
Tools;
- Finsweet's chrome extension, which has an Unbind CMS feature
Static pages containing collection lists;
- Use Finsweet's Unbind CMS tool on the topmost Body element of every page. It should unbind all elements on the page from the CMS.
- You may then need to pull your elements outside of the collection lists, and possibly replace them with 3 nested DIV wrappers, depending on your layout, classes, and Javascript.
Collection pages;
- Do the same process here, as for your static pages
- Then, you'll need to create a static page, and copy your elements over, so that it will be included in the export.
Remember, CMS-bound content can be deeply interwoven into your site. It can exist as CMS-bound custom attributes, HTML Embed fields, and CMS-bound component properties.
For a complex site, this is a lengthy and intense process.
Exporting using DevLink
For developers who are exporting their Webflow site to a React environment, Webflow has a DevLink solution that can help bridge this process.
I've not tested this, but it's likely the same restrictions regarding CMS content mentioned above still exist.
Exporting using Udesly
Udesly provides tools that can assist in the export of Webflow CMS sites by capturing both static content and CMS content, and rebuilding the result on an external framework.
It works well for simpler CMS sites that do not need to be updated often. Platform support includes;
- JAMstack ( Netlify / 11ty )
- Ghost
- WordPress ( may no longer work )
- Shopify
Notes;
https://www.udesly.com/webflow-to-jamstack/
Exporting using WGET
Another approach is to "snapshot" your static site for export to capture all of this content you've created.
WGET is a command-line tool that you can use to download a site.
https://www.gnu.org/software/wget/
Thomas Kirschnick suggested a procedure for exporting your site using WGET, which will capture CMS content as well ( as static exported HTML )
- visit the project settings in webflow
- deactivate CDN, minify and combine
- open the terminal on your mac
- check if wget is working (of not, you have to assure)
- navigate to your planned target folder
- use the following wget command:
Notes
—domains regulates on which pages may be searched. Look in the source code of the Webflow page for the relevant URLs. you'll likely need to specify additional domains for your images and hosted content, like uploads.webflow.com and uploads-ssl.webflow.com. There will likely be others on cloudfront.net. Separate these with commas.
IMPORTANT! If that is not set precisely, you will not get all the files - or - you’ll download half the internet.
—span-hosts is important if files are outside of your own host (fonts, scripts, etc.)
Something gets wrong? You have to kill the command?killAll -9 wget
You probably get the *.js and *.css encrypted. Then just pull them from your webflow source code. This are only 2 files.
You should have the appropriate directories in your target directory after the download. The internal linking should also work.
Legalities of Site Scraping
Historically scraping has been a sensitive issue for Webflow.
Other companies have abused it, e.g. providing outside hosting for webflow.io staged sites under custom domains. Webflow's pricing plans are not setup to handle live-site traffic against free staged sites.
What this means is that even though scraping publicly accessible data is legal ( in the US at least ), there are ToS restrictions that you might be violating.
Web scraping is legal, US appeals court reaffirms
https://techcrunch.com/2022/04/18/web-scraping-legal-court/
Indications are that Webflow has successfully used this to legally block and shut down certain companies, who scrape and serve content from Webflow's hosted sites as a "service."
Other Download Solutions
Sitesucker
https://cryolayer.com/
Resources
https://discourse.webflow.com/t/how-to-export-a-cms-based-webflow-site-to-a-static-site/57409
https://discourse.webflow.com/t/export-cms-site-as-static-site/78576/10
