Webflow free hosting with firebase

This article is a small summary of how you can have a one page website, built using webflow, but hosted in firebase, so that you don’t pay for hosting.

This is something that I am surprised not many people know about. A lot of cloud hosting providers give you a lot of room and free credits to get started, but firebase is literally free.

The plan on the left is the spark plan which is free. So unless you spend more than 10GB of storage, and 360MB per day, you can host your personal website with a custom domain for free. This is a short guide on how to do that.

Things you will need:

• A webflow paid account that enables you to download the code (On webflow, this is for static websites only). Or a simple html site that you would like to host.
• A firebase account, and a firebase project.

To upload the website code to firebase you will need to use the terminal. Don’t worry, you only need to use 3 to 4 commands.

First, let’s install the firebase command line interface so that you can talk to firebase directly from the terminal. You can install this tool by downloading it directly from their website, using an npm, or running the following command on your terminal.

curl -sL https://firebase.tools | bash

This should install the firebase CLI tool, if you have issues with this, you can read more about it on their site. https://firebase.google.com/docs/cli#mac-linux-auto-script

Once you have installed the firebase CLI, open the terminal and navigate to the directory where you want to setup your firebase project locally, and login to firebase with the command:

firebase login

This will prompt you to login to your firebase account by opening a browser window. Once you are logged in, you can continue to the terminal and enter the next command:

firebase init

and follow the prompts from the terminal. If you followed the prompts to create a website, you should see an index.html file under the public folder. Copy the files from your website to this folder, and once you’re ready to show your work to the world you can use.

firebase deploy

deploy will do just that. This will upload your code to your firebase project, and host it on a public url.

That’s it, your website is now live!

If you want to add a custom domain, you can follow the steps from the firebase project dashboard, under the hosting category.

Thank you for reading :)