How to Host a Static Website for Free Using Firebase

We know that Google is providing us a lot of products for free. Firebase is one of them. Anyone with a Google account can use Firebase with limited resources. Firebase contains features like Firestore, Cloud storage, Database, etc. Here we are going to discuss the steps of hosting a static website with a Firebase hosting service.

First of all, we want to know the difference between static and dynamic websites.

Static Websites

A static website is usually just a bunch of HTML, CSS, and JavaScript files that are served by a simple web server. Static Website pages cannot change the content until the time a developer edit the source code.

Dynamic Websites

Dynamic Website pages can display different content from the same source code by fetching the data from a server. This fetching of data is done using any backend programming languages.

Importance of Static Websites Today

We have already discussed that static websites cannot change the page contents until the developer changes the HTML code. This definition is changing nowadays with the popularity of React.js, Angular.js, Vue.js, etc. These are JavaScript front-end frameworks and libraries for the web. Using these, we can easily fetch and render the contents from a server or DB to our static website.

In this tutorial, we are not diving to HTML/CSS development. Just downloading a Bootstrap template and hosting it in Firebase.

Setting Up Our Website

Here we need to download a static website template first. Use the below link to get one.

https://startbootstrap.com/template-overviews/one-page-wonder/

This will download a zip file on your downloads folder. Unzip and rename the folder name to SampleWebsite.

cd Downloads
unzip startbootstrap-one-page-wonder-gh-pages.zip
mv startbootstrap-one-page-wonder-gh-pages SampleWebsite

Now the website to be deployed is ready on the SampleWebite directory inside Downloads.

Deploying To Firebase

Step 1

Setup a project on Firebase using the reference below.

https://console.firebase.google.com/

Click on Add project and fill the form with your project name. Press Create project button.

If everything goes well, it shows up a success message as shown below.

Now go to Hosting from the side menu and press Get started button. This will show a modal like below.

It shows the instructions to install firebase-tools on our system. It can be easily done with NPM. So at first, we need to install Nodejs on our system to work with NPM.

curl -sL https://deb.nodesource.com/setup_11.x | sudo -E bash -
sudo apt-get install -y nodejs

Install firebase-tools with the command below.

npm install -g firebase-tools

Now, click the Continue button. This will show a number of commands to execute. These are explained in step 2

Step 2

Log in to the Google account using the command below.

firebase login

This will ask you for permission as below.

Allow Firebase to collect anonymous CLI usage and error reporting information?

Enter yes.

Allow permission to access your Google account.

After that, a Success message will be shown on our system.

Step 3

Now, direct to the template directory.

cd ~/Downloads/SampleWebsite

Initialize Firebase in our project.

firebase init

Now it asks some questions.

1. Which Firebase CLI features do you want to set up for this folder? Press Space
   to select features, then Enter to confirm your choices.

Select Hosting from the options.

2. Select a default Firebase project for this directory

Select the project we created earlier on Firebase(Sample Website)

Step 4

Deploying the project to Firebase can be done by a single command. But as a default, firebase only deploys public folder in our project. This feature can make deploying a React or Angular project you made much easier. In our case, we need to change the file firebase.json.

sudo nano ~/Downloads/SampleWebsite/firebase.json

The above command opens up a text editor inside the terminal. Just paste the code below using the mouse or Ctrl+Shift+v

{
  "hosting": {
    "public": "",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

Now, Save this file using Ctrl+O and exit nano editor by Ctrl+X.

Now deploy your project using the below command.

firebase deploy

If everything goes well, it shows up Deploy complete! message and a hosting URL. In my case, the hosting URL is as given below.

Hosting URL: https://sample-website-133.firebaseapp.com

Now we can connect a domain name(If we have one). Using the below URL, we can add a domain name to firebase and it gives us a TXT record. Just add this TXT record in our DNS.

https://console.firebase.google.com/project/sample-website-133/hosting/main

Have a nice code !