- Webflow code export — what it means
- Webflow’s code export writes the HTML, CSS and JS of a site built in Webflow out as files. It requires the Workspace Freelancer plan at $16/month, and the export itself is 3 clicks.
Note: the steps and screens in this article are as of 2023. Names, placement and pricing may have changed in the current interfaces of Webflow and the services mentioned.
Hello, this is Masato, a Webflow specialist. I am answering the following questions.
“I want to keep the site I built in Webflow running cheaply. I want the site and the domain to survive after I cancel Webflow. I want to know which parts of the exported code to edit.”
✓ What you will learn in this article
- How to migrate from Webflow to a server of your own
- Which server is cheap and saves time
- How to use the code exported from Webflow.
I run my business on Webflow and have supported over 50 companies. I have actually exported code and published a site that way, and I am sharing what that experience taught me.
This blog requires no specialist knowledge. Everything is presented so that it makes sense even if all you can do is no-code.
What you need in order to migrate away from Webflow
- Code export: you need to be on the Workspace Freelancer plan, $16/month
- The export itself is over in 3 clicks
- CMS articles are not exported along with it
- Forms stop working > substituting Google Forms is the easy option.
Code export is finished by clicking ① in the image below and saving.
Here I am exporting static pages only, with no CMS. If you bring a CMS into it, you are migrating to WordPress, so the work involved changes.
The server I recommend for migrating off Webflow
The server I am using here is Lolipop, a Japanese shared host. My reasons for choosing Lolipop are as follows.
- It is seriously cheap: about ¥5,000 for a year, about ¥7,000 for three years
- It has been around a long time and is well known.
Publishing a site on Webflow without a CMS costs $14 (about ¥2,100). I wanted to shave even ¥100 off the running cost, so I went looking for the cheapest server. There are all sorts of servers out there, but here I will explain it using the one I actually used. Since I am at it, I will put my referral link here. The 10-day free trial is here
(2026 update: Webflow revised its pricing in May 2026, and the site plans are now Basic $15 and Premium $25 per month billed annually. The figure in the text is the price at the time of writing.)
How to migrate from Webflow to a server of your own
The procedure runs as follows. It is about five minutes of work.
- Sign up for a server with Lolipop
- Register your own domain in the Lolipop user page
- Enter the same name as the domain into the public (upload) folder
- Open Lolipop! FTP from the sidebar
- Upload the files exported from Webflow to FTP
- Set the public upload folder for the “www.domain” subdomain
- Change the domain settings
- Click through the SSL setup
- Done: wait about a day and check that it is live
Sign up for a server with Lolipop
My view is that you sign up with somewhere cheap and upgrade once your pageviews grow.
Registering a domain
Domains have nothing to do with SEO or anything else, but the stylish ones are short and easy to understand. For a personal blog, something like “mblog.com”; for a company, something like “recruit.co.jp”. When it is short, people can tell what the site is from the domain alone, which is kind to users.
The endings — .com, .jp and so on — go in and out of fashion to some extent. In no-code circles .io is common. Around November 2023, .ing had just been released and was causing a bit of a stir. code.ing, eat.ing and the like are unique and popular. Watching the fashions in each area and buying accordingly is fun too.
Mine, incidentally, is “non-haru.com”. I lined up the names of the cats I used to keep. I think it could have been a little shorter, but if you are attached to it, that is fine.
There are things you must not do when setting a domain.
- Putting another company’s name in it
- Names that get you banned on social media (prohibited words and the like)
Avoid the above.
Register your own domain in the Lolipop user page
Now set up your own domain. If you cannot find where to do it, click the company logo at the top left. That takes you to the page below. Click the custom domain setting and go through to the page below.
You already have the domain, so we move on to step 2, pointing the domain at Lolipop. Set it as follows.
- The custom domain to set: enter the domain you registered
- Public (upload) folder: enter the same name as the domain
- Lolipop! Accelerator setting: ON (either is fine, but turn it on to be safe)
Enter the same name as the domain into the public (upload) folder
This item is where I got stuck. So let me share the mental picture I use.
- PC files > Server A (upload) > Server B (read) > shown to the user
The “public (upload) folder” you set here means choosing the file where the HTML to be published is stored. But that stage is “Server B” above. First comes the work of uploading to “Server A”.
Open Lolipop! FTP from the sidebar
We use a service called FTP to upload the HTML and the rest to Server A.
Upload the files exported from Webflow to FTP
There are all sorts of FTP services, but installing one is a chore, so I use Lolipop! FTP.
Lolipop! FTP has automatically created a file with the name you entered in the public (upload) folder. That is easier to follow later, so I recommend it.
Put the code exported from Webflow into that automatically created file and you can publish. Let’s get on with it.
Unzip the ZIP exported from Webflow and upload all of its contents. The HTML goes in as it is; the CSS and anything else that comes as a folder gets a folder created inside FTP and goes in level by level.
That is it. Fundamentally, if you create the files and folders exactly as Webflow exported them, it works.
Set the public upload folder for the “www.domain” subdomain
If you were hosting on Webflow, you are probably publishing on the www. domain as well. So set www up on the Lolipop server too. Enter a file with the same name as the public (upload) folder you just created and you are done. (In this case that is the domain name.)
Change the domain settings
Go to wherever your domain is managed, delete the DNS you set for Webflow, and switch to the following.
The format you set here is a little different from the Webflow one. I normally use Google Domains, but Google Domains was acquired by Squarespace, so I am holding off on a specific walkthrough with screenshots for now. On Google Domains the following settings resolve it.
- Delete the default name servers
- Open custom name servers and click “switch settings”
- Enter the following name servers. Primary name server: uns01.lolipop.jp Secondary name server: uns02.lolipop.jp
(2026 update: Google Domains has completed its migration to Squarespace, and domains are now managed from the Squarespace dashboard. Check the current help pages of your own domain registrar for the name server screen and its wording.)
Click through the SSL setup
Go back to the first screen and to the SSL item.
Click free SSL. That is all.
Done: wait about a day and check that it is live
Once all the work is finished, click the URL and check. It usually goes live immediately, but SSL and the www. version can take time. So once the work above is done, leave it about a day before checking.
I actually checked straight away, thought “I am getting an error,” went to bed, and found it had resolved itself.
Editing the files Webflow exports
Specifically, there are many places to change: image file names, meta tags, the names of the HTML, CSS and JS files, and more. You can run the site perfectly well without changing any of them.
I intended to write out the method, but a single page needed a considerable volume of changes, so I gave up. If you are delivering code to a client, it is better to tell them you used Webflow. Present it well and you will be rated more highly than an ordinary coder. You can also propose managing it in Webflow, so it works twice over.
For anyone who still wants to make the changes, I have put together a short list, so follow the steps below.
- Change the class names: Webflow uses particular naming conventions to generate its classes. It is important to change these class names so they differ from what Webflow generated. There are a fair number of classes called webflow.
- Delete unnecessary meta tags: remove meta tags that identify Webflow, such as name="generator", from the HTML.
- Consolidate the stylesheets: combine the several CSS files Webflow generates into one, and rename the obvious ones such as webflow.css.
- Consolidate the scripts: consolidate or minify the scripts Webflow generates to reduce direct references to the libraries Webflow provides.
- Remove Webflow’s brand elements: strip out any branding or badges Webflow may have added.
- Optimize the code: edit the generated HTML, CSS and JS files by hand to remove surplus code and customize the file structure.
- Rename the image files: Webflow sometimes generates image file names in a particular format, so you can rename them to make it look as though Webflow is not involved.
- Use Google Tag Manager: manage analytics and other tracking scripts through Google Tag Manager instead of direct tracking code.
- Changing the forms: for forms, I substituted Google Forms.
FAQ
What do I need in order to export code from Webflow?
You need the Workspace Freelancer plan, $16/month. The export itself is over in 3 clicks. CMS articles are not exported along with it, though, and forms stop working, so substituting Google Forms is the easy option.
Which server do you recommend migrating to from Webflow?
This article uses a Lolipop server. It is cheap, at about ¥5,000 for a year or ¥7,000 for three years, and it has been around a long time and is well known, which is why I chose it. The idea is to sign up with somewhere cheap and upgrade once your pageviews grow.
Can a site that uses the CMS be migrated the same way?
What this article covers is exporting static pages only, with no CMS. If you bring a CMS into it you are migrating to WordPress, so the work involved changes.
What should I do if the site does not appear straight after the migration work?
It usually goes live immediately, but SSL and the www. version can take time. Once the work is finished, leave it about a day before checking.
What name servers do I set when migrating to Lolipop?
Delete the DNS you set for Webflow and set uns01.lolipop.jp as the primary name server and uns02.lolipop.jp as the secondary. After that, do not forget to enable free SSL as well.
