Host a static website for free with Google Firebase

Also located on my New Blog: Host A Website For Free On Google Firebase

In this post, we will learn how to host a static website for absolutely free and one of the best website hosting platforms i.e. Google Firebase.

A Static website is a website that does not have any dynamic rendering and does not have service side rendering. It can still talk to APIs.

We will use Google Firebase Hosting as our hosting provider. Google Firebase provides free web hosting for 1GB of data and 10GB of data transfer limit for a month.

Let's navigate to https://firebase.google.com and log in via your Google account.

The "Spark Plan" of Google Firebase offers 1GB of website hosting and 10GB per month of data transfer and is the free plan that Google Firebase offers.

We will click on the "Start Now" button

When in console.firebase.google.com click on the "Create A Project" button

Give a name for the project, for example, "FreeWebsiteHostingDemo"

Click on "Continue"
Accept the "Terms" from the next screen and click on "Continue"

Then Click on "Create Project" to create a project on Google Firebase.

Now that Google Firebase has created us a project and we are in that project, we will start by creating an application for that project. So we will select a "Web project"
Google Firebase then asks us to Add Firebase to your web app.
Give a name to the web application you want to register with your project.
Example "OurFirstWebsite"

Then, it asks us to add Firebase SDK , which you can ignore for this demo.
From the side navigation, select "Hosting"
Click on "Get Started"

Install Firebase CLI

To host your website with Google Firebase Hosting, you need the Firebase CLI. Run the following npm command to install the CLI or update to the latest version of the CLI.
But before using the command, we have to make sure we have node installed in our machine.

Use the below command to install Google Firebase CLI

npm install -g firebase-tools

Login To Firebase Using The CLI

The next step is to login to the Firebase CLI using the below command. So use the command prompt window or a terminal and paste the below in it.

firebase login

It will ask you the following question: "Allow Firebase to collect CLI usage and error reporting information?" - type "Y" and press enter.
It opens a browser window and asks you to login to Google via your Google account.
After logging in, the command prompt or terminal tells you that you have successfully logged in to the account.

Hosting Your Website

Using command prompt or terminal, browse to the location where you have your website hosted.

For example, my website is physically located under this folder structure

I will use a command prompt or terminal and I will browse to the below location

Then I will use the command "firebase init" (without quotes) and will press enter as below

When it asks "Are you ready to proceed?" type "Y" and press Enter

Then it asks which service do you want to use? Use the arrow keys to come down to hosting and press space to select. Then press "Enter" to continue.

It then asks us if we want to "Use an existing project?"

Type "Y" (without quotes) and press Enter and choose the project that you created for this website.

Then it will ask us where are the files that you want to use for hosting. By default Google will look at a public folder inside your website and go inside the folder and copy all the files to Google.

Create a "Public" folder in your directory and copy all the files needed by the website into this "Public" folder.

Select "N" if it is not a single page application.

Then it asks that it has found a index.html file, do you want to override it?

We will press "N"

Deploy Website To Google Firebase

After all the setup is done, the final step is to deploy the files.

In your command prompt or terminal window, type the below command and press enter.

firebase deploy

After this we have successfully deployed our website to Google Firebase. In the command prompt, it tells us the URL that Google Firebase has given us so copy that and paste that in your browser. 

Your website is now hosted successfully on Google Firebase.

Video Tutorial To Host Your Website On Google Firebase For Free