How to Host Webflow sites for free with Netlify

We have been using Webflow to build websites for over a year now. It's a fantastic platform with one main downside - the price.
As well as paying for our own Teams plan, the cost to our clients is usually around $30 a month at the time of writing.

Typically this is not a problem.

But sometimes we have clients for whom this is an issue - businesses who have multiple websites and don't want to pay this fee for each one, or charities who are trying to keep their costs low.

And sometimes there are benefits to hosting on Netlify, even if a client can afford Webflow's hosting prices.

Let's get into it.

Hosting on Netlify

To start, you'll need a Webflow account plan that allows you to export your website.
This allows you to export a ZIP file that contains your Webflow site.

The export feature in Webflow doesn't contain any of your CMS content - we'll first look at how to host a website on Netlify when you have no CMS content.

Hosting websites with no CMS

1: Export your website.

You can do this by clicking the export option in the Webflow designer.
This will take a few minutes to prepare a ZIP file for download.

2: Register an account on Netlify and create new site

Netlify provides static hosting - hosting for websites that don't require a programming language like PHP to run.
This means they can offer a generous free hosting plan that has high performance and quick load times despite being free.

Once you have registered an account, you can create a new website in Netlify with a free randomly generated subdomain.
Go to your dashboard, click 'Add new site' and select 'Deploy manually'.

You will be asked to upload your Webflow website ZIP file. Once done, Netlify will deploy your website onto a free hosting account, and point a free subdomain to it, e.g:

funny-palmier-082c72.netlify.app

3: Optional: Add a custom domain

Netlify's free hosting plan gives you the ability to add your own domain name, along with an SSL certificate.
You can either point your nameservers to Netlify to let them manage them and set up the DNS records manually, or you can keep your nameservers with your domain registrar, and just add in Netlify's DNS records.

You can start this process by clicking into your website in Netlify and going into "Domain settings".

And that's it! Your Webflow website is now hosted for free on Netlify.

You will have to export and re-upload your ZIP file to Netlify each time you change it in Webflow. You can do this by clicking the 'Deploys' tab at the top and dragging your ZIP file into the box at the bottom.

Hosting websites with a CMS

Netlify can host Webflow websites with a CMS make use of their own CMS, Netlify CMS, to allow you or your client to add, update, and delete CMS content.

To do this you will need to pay $99 a year for a 3rd party tool called Udesely.

Udesely lets you convert Webflow websites into Jamstack websites using a framework called 11ty, which is what our web developer Oliver uses to build custom-coded websites.

You can convert unlimited websites with Udesely on their $99 plan. Or you can use their free plan, but they will add a 'Powered by Udesely' badge to your website, similar to the one Webflow adds on their free plans.

1: Register with Udesely

Create a free or paid plan with Udesely.

2: Register with GitHub

Create a free plan with GitHub. This will automatically publish your website to Netlify every time you use Udesely.

3: Install and run the Udesely Chrome Extension

The Udesely Chrome Extension can be downloaded here.

This will export your CMS structure and content out of your Webflow project, since Webflow's export feature does not contain them.

With the extension installed, go into the Webflow Designer for your website and run the extension. On the option menu select 'Webflow to Jamstack', which will download a .udesely-config file

4: Export your Webflow ZIP

As with the previous step when not using the CMS, export your Webflow website as a ZIP file.

5: Upload the ZIP and config file to Udesely

In Udesely, go into their app and select 'Webflow to Jamstack'.

You will then be asked to upload your Webflow ZIP file and Udesely config file.

Once this is done, click 'Upload to Github' instead of 'Download'.
Udesely will ask you to log in with Github. It will make a GitHub repository for your project, and every time you use the Udesely app to publish changes to your Webflow site it will automatically upload your converted website to GitHub.

Now we're done with Udesely and can move on to Netlify.

6: Create a website on Netlify

Create a new website on Netlify.

Instead of selecting 'Deploy manually' like we did when not using a CMS, we will instead select 'Import an existing project'.

Select GitHub on the next page.

Then select your repository which Udesely will have named based on the name of your Webflow website.

You'll then get a complex-looking page with a few options - just leave everything as is and click 'Deploy site'.

This will import your Udesely website from GitHub. Even more importantly, it will automatically re-deploy your website from GitHub every time you re-covert it with Udesely, which you'll have to do every time you make design changes.

Your website will now be live on Netlify after a few minutes, and you can set up a custom domain for free if you want.

Next we will set up the Netlify CMS.

7: Set up Netlify Identity and CMS

Netlify Identity will allow us to create accounts for users to log in with and edit the CMS.

In Site Settings, click on 'Identity' either in the top menu or side menu, and enable Identity.

Once it has been activated you can click 'Identity' at the top and start inviting users, who will get an email to confirm their account and set a password.

From here they can log in to the CMS at this address:

yourwebsite.com/admin

They can now make changes to your CMS here and publish their changes when ready.

This CMS looks different to the Webflow one so you'll want to spend some time exploring it in order to show your client how it works.

Note that every time you publish changes in the CMS, it will take a few minutes for these changes to appear on your live website, as Netlify has to re-deploy your website.

There is one more step to do here before this will all work:

In Site Overview, scroll down to 'Identity', and under 'Git Gateway' click 'Enable Git Gateway'. This lets CMS users push their changes to the live website without having to make a GitHub account.

The best practice for your CMS now is to delete your CMS items in Webflow and keep them in the Netlify CMS only. Any posts that were in Webflow will now be in Netlify thanks to Udesely.

You will use Webflow to change the structure of your CMS and to edit CMS templates and Collections, you just won't be using it to create, update, or delete CMS items.

And that's it! You now have a Webflow website hosted for free on Netlify, with the ability to log in and manage content via the Netlify CMS.

Forms and Emails

Email functionality for forms made in Webflow is taken care of by Netlify. It will automatically detect these forms and set them up to work with Netlify.

You can edit the settings for these forms, such as what email to notify, in the 'Forms' tab in your website settings.

You get 100 form submissions per month with the Netlify free plan.

The downsides to using Netlify

There are a few downsides to hosting your website on Netlify.

No access to Webflow Editor

The Webflow Editor lets your client edit the pages on their website, as well as the CMS.

Netlify CMS only lets your client edit the CMS.

This works fine for us for clients who won't be editing their pages themselves and only need CMS access.

Exporting your website every time you make a change

You have to export your website and upload it to Netlify or Udesely every time you make changes in the designer.

This works fine for us for clients who need a simple website and won't need changes to be made to it often.

Use Cases at Propeller Digital

For business clients who want to edit their website, not having access to the Webflow Editor is a big disadvantage; they can edit and add posts from the CMS but can not edit the content on static pages.

Here are two examples at Propeller Digital where it made sense to host a website on Netlify:

Tennis 4 Cancer

Tennis 4 Cancer is a fundraising initiative that hosts tennis fundraisers in Ireland to raise funds for cancer support and research.

When working out their requirements, we discovered that

1. They would not need to edit the pages themselves and would only need us to make updates a handful of times a year.
2. They needed access to a CMS to add and edit Event listings for fundraising events around the country.
3. As they are a not-for-profit donating all proceeds to charity, all recurring website costs mean less proceeds go to charity. 3 months on the Webflow CMS hosting plan adds up to the cost of a single chemotherapy session in Ireland. Netlify lets them keep their recurring costs down.

Single-page events website

Sometimes we are hired to create single-page websites to promote events or raise funds for a limited amount of time - also typically for charities.
These websites require little to no updates or edits once launched, and are ideal candidates for Netlify hosting since they only need to be live for a short time, usually don't need updates, and are usually done to raise funds for charity.

proaminpink.com is an example of such a site. It is a simple one-page Webflow site, linked to Stripe for payment, that sold raffle tickets to raise funds for cancer research in Ireland. With the hosting free of charge, the charity didn't have to worry about taking down the website immediately after the event to save on hosting costs - it can stay up indefinitely and serve as a reminder of the event.

Other single-page charity fundraiser websites we have built include

winahandbag.ie

charlottesvision.ie

Video Tutorial

You can watch me deploy a Webflow CMS website on Netlify with Udesely and GitHub on our YouTube channel: