How to Host a Static Website for Free Using Firebase

We know that Google is providing us with 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. But we are now going to use Firebase hosting to host a static website for free.

First of all, I am going to explain what is 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 till 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 achieved using any backend programming languages.

IMPORTANCE OF STATIC WEBSITES TODAY

I already told 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. 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 websites. This can also be done without using JQuery, that we already know.

Here in this tutorial, I am not going to use any JS frameworks or libraries. Also, I am not concentrating on HTML, CSS development. I will just download a simple Bootstrap static website and host it with Firebase. I am using Ubuntu on my system and so the instructions below are compatible with it.



SETTING UP YOUR WEBSITE

As I already told, I am not explaining the development of a website rather than deploying it to Firebase. I just downloaded a free Bootstrap template from startbootstrap.com. I shared the link below.

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 using the terminal command shown below.

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

First, we need to set up a hosting project in Firebase.

Go to

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 your system. Since the installation is using npm, you have to install Node.js on your system before it. So install Node.js using the below commands and install firebase-tools.

curl -sL https://deb.nodesource.com/setup_10.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

On your terminal, execute the below command to log in to your Google account.

firebase login

This will ask you for a permission like below.

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

Enter yes.

Now there open a tab on your browser to log in your Google account and accept the permissions. This will be like below.

Allow the permission to access your Google account.

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

STEP 3

Now, chain direct to your project directory in terminal.

cd ~/Downloads/SampleWebsite

Initialize the Firebase in your 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 you created earlier. Sample Website

STEP 4

Deploying the project to Firebase can be done by a single command. But as default, firebase only deploys public folder in your project. This makes deploying a React or Angular project you made much easier. In our case, we need to change the file firebase.json. You can use any text editor to change this. Here I am using nano.

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 given below.

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

This is your URL to the website you created.

Now you can connect your domain name(If you have purchased one) using the URL below.

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

The above URL directs you to a page as below. Click Connect domain, Enter the domain name you owned in the input field and continue. It gives you a TXT record and you have to paste this on your DNS field. I am not going for it now and if you have any query regarding it, I am always ready to help you.



Have a nice code !

You May Also Like

About the Author: Syamlal CM

Hi, I'm Syamlal, the co-founder of Redmonark. I'm a developer, writer and also have a little bit of experience in graphic designing.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.