Hosting Webflow Sites for Free: The Definitive Guide
Do you feel like Webflow’s site plans are a bit pricey? Well, this guide will teach you how you can host your static Webflow sites for free.
Interested in trying out Webflow? Feel free to do so. By using my affiliate link, I’ll get a small commission, which would make me very happy. Thank you! :)
Webflow site plans
Let me explain how the Webflow pricing system works. It can be a bit confusing.
There are two kind of plans for you to use:
- Account plans
- Site plans
The account plan has three tiers; free, lite and pro. You can read more about them by checking out the official Webflow docs (UPDATE: this pricing system was recently changed).
The free tier gives you basic access to build a couple of projects, while the paid tiers comes with a few more features. One of these features is the ability to export the code of a project.
The ability to export code is essential for this guide, so make sure to upgrade your plan.
Let’s go on to the site plans.
There are four tiers that gives you the ability to publish and host your sites through Webflow.
- Basic — $12/month yearly, or $15 month to month
- CMS — $16/month yearly, or $20 month to month
- Business — $36/month yearly, or $45 month to month
- Enterprise — Custom pricing
So what does this tell us?
In order to host a site with Webflow, you will have to pay a monthly price of at least $12. I feel like this is quite expensive in some cases.
If you don’t need the CMS, there’s really no need to pay this much, especially when there are so many cheap and/or free alternatives on the market.
Let’s go through some alternatives.
Free hosting platforms
Here are a few platforms that lets you deploy and host your static sites for free. You’ve probably heard of some of them:
While you probably wouldn’t be able to host a site gaining tens of thousands in traffic a month, many of the plans offers quite generous free hosting plans.
In this guide I’ll explain the hosting process on two of the listed platforms — Github Pages & Netlify.
1 — Webflow hosting using Github pages
Uploading and deploying a static site on Github pages is an extremely easy way of getting a live site up and running.
It can be done in a few easy steps:
- Create a Github account
- Create a repository
- Upload your code into the repository
- Connect a domain
- That’s it
Let me go through the process step by step, starting with exporting your code out of a Webflow project.
1.1 — Webflow code export
In order to complete this step, you will need two things:
- A Webflow lite account plan (UPDATE: This plan is called “Core” nowadays)
- A Webflow project that you want to host
Start by opening your Webflow project in the designer view. Then hit Export code in the top right corner.
A popup will pop up (hehe), that prepares the code for you. Click Prepare ZIP as soon as it’s fully loaded.
Then simply hit Download ZIP and a compressed ZIP-file will be downloaded. Beautiful.
That’s all. Now extract the ZIP file and let’s continue.
1.2 — Creating a Githup repository
In order to host your site with Github pages, the code needs to exist inside a Github repository.
There are a few different ways of uploading your code to Github, but we’ll take the easy way.
If you don’t have a Github account, this would be a good time to set one up. The registration process is simple and works just like any other website out there.
Now click the little plus icon to the left of your profile picture, and give it a name. Any name. It doesn’t really matter.
1.3 — Uploading code into a repository
The instructions (that pops up on your screen) to push code into your repository might seem a bit intimidating. There are however a few other ways of doing uploading code.
- Using a terminal (SSH)
- Using the Github Desktop app
- Simply uploading through a browser
We’re taking the easiest way here. Uploading through a browser.
Simply press the little Upload an existing file option. It should look something like this.
This will redirect you to a page on which you can drag and drop files into your repository.
You should drag in all the files that Webflow gave you when exporting your code.
Now press the little Commit changes button and your files will be saved.
Optionally you can write a message and / or a description for your current commit to keep yourself organized. This isn’t required though.
Great. Github will now process your files for a minute or two, and then your files exists inside your repository.
It should look something like this when finished:
1.4 — Using Github pages
Now navigate to your repository settings by clicking the settings tab to the right.
Scroll to the Github Pages section and select your main branch as the source for your site. If you haven’t changed any brances, the main branch should be the one containing all your uploaded code.
Now choose the folder in which your files exist. In most cases this will be the root folder.
Hit the Save button.
You should now see that Github is publishing your site. It may take a minute or two, but it should give you its URL when it’s finished.
Great, now our site is live on the internet.
1.5 — Connecting a custom domain to Github Pages
Navigate back to your repository settings and scroll down to the Custom domain section.
Enter your domain in the input box. Then hit Save.
This will create a CNAME file in your repository. Make sure not to delete it, it’s quite important.
Navigate to your domain name registrar (Godaddy, Namecheap, Google domains or whatever you’re using) and find the settings for your domain.
This step is a bit different for different registrars, so do a bit of research or ask the support if you can’t find it.
Here you’ll have to enter both A records as well as CNAME records.
Github have their own A records, so take a look in their documentation to make sure you have the latest ones.
You also want to set the CNAME records, so you might want to take a look at this page of the official documentation to make sure you set the right one.
Okay, that’s it. Your domain should now be connected to your repository. After the DNS settings have updated you should be able to navigate to it in your browser.
Amazing.
1.6 — Updating your Webflow site on Github
When using Github, you have access to your source code directly in your browser. This can be found in your repository.
If you know basic HTML, CSS & Javascript, you can edit the code directly through their editor.
When you’re done editing, simply press the Commit changes button and the repository will update. These updates should be visible on your page almost immediately.
If you’re not comfortable coding yourself, you can simply edit your site in Webflow and reupload & commit all your files to your repository.
After committing the new code, your new version of your site will be available online. And that’s it.
If you rather use Netlify to host your Webflow sites for free, feel free to continue reading.
2 — Netlify
Netlify is a cloud based service that offers quite a lot of free tools to deploy, host and maintain websites and web applications.
The platform works through the Git version control system, so you’re able to use Github to upload your code and Netlify will automatically host whatever content you have inside a selected Github repository.
In this guide we will follow the most simple way to host your site on Netlify:
- Exporting code out of Webflow
- Upload the code into a Github repository
- Connecting & deploying the repository through Netlify
- Connect a custom domain
- All done
2.1 — Deploying your site on Netlify
Start off by creating your Netlify account if you don’t have one already.
Navigate to the sites tab on your profile, and hit New site from Git.
Now you have to connect and authorize your Netlify account with your Github account.
Simply press the Github button on the setup page, and allow Netlify to access your repositories.
Now it’s time to pick out the repository containing your code.
Select your repository and press Continue.
You shouldn’t have to change any settings on the page that follows. Since you’re publishing a static site, you don’t need to add any build commands or edit any other advanced settings.
Now click the Deploy your site button and let Netlify do its job. It usually finishes really fast.
The page will tell you that Netlify is deploying your site. It can take a few minutes.
Okay, now you’re done. You have successfully deployed your Webflow site on Netlify.
You should be able to click on the random generated domain that Netlify provides you and access your site through your browser. Well done.
Let’s continue by connecting a custom domain to your site.
2.2 — Connecting your domain
Head over to the Site settings -> Domain management. Here you will find all settings you need to connect your domain.
This setup works very similar to the way Webflow is connecting domains. You do this by adding CNAME records and A records to your domain on you registrar.
You can find all information about the specific needed records on Netlifys official documentation.
Conclusion
Okay, now you’re done. Your Webflow site is uploaded on Github, connected with Netlify and your domain is connected.
And the best part is that you follow these steps over and over if you are one of those people who create lots of sites. Simply create more Github repos and more Netlify projects. Amazing.
Have an amazing day,
Robin G.
