Christopher Unum I am a software Developer, I write web development tutorials, I also mentor aspiring web developers. 19/05/2020s

how to host your website for free on firebase with free ssl certificate

Hosting your website on hosting sites like bluehost or ipage can cost you an arm and a leg. These past few years I have been spending a lot of money paying for hosting not knowing I could have easily done it for free. In this tutorial, I will walk you through on how to host your website for free on Firebase. Firebase free hosting offers you 10GB storage space, 10GB bandwidth per month, free SSL certificate and lets you host multiple websites.

Below are the steps you’ll take to host your website for free on Firebase.

STEP 1: CREATE A PROJECT ON FIREBASE

To create a project on firebase, you will need to go to console.firebase.google.com and log in with your Google account

Click on the Create a project button and you will be redirected to the page shown in the image below

Enter your desired project name, accept terms and click on continue to proceed to the next step shown below.

For web projects, I usually advise folks not to enable Google analytics here but sign up directly on analytics.google.com. When you are done, click continue and wait for your project to be created.

Your project is now created and now we have to create a web project. To create a web project, click on the web symbol '</>' just above the balloons as shown in the image above.

Now pick a name for your web project and register app and then click continue to console.

Now you are set for deployment.

STEP 2: CREATE DEPLOYMENT FOLDER

To deploy your website, you need to create a folder and name it public (can name it whatever) and transfer your website to the folder as shown below

STEP 3: INSTALL NODE.JS

Node.js is needed to run commands that aid in deploying your website, so head over to nodejs.org, download and install node.js for your computer.

STEP 4: ADD FIREBASE FILES TO PROJECT FOLDER

Open the command prompt on Windows or the Mac equivalent and change directory to the folder containing the public folder you just created.

After changing the directory, you have to install Firebase tools using the command:

npm i -g firebase-tools

then log in using the command:

firebase login

Follow the instructions and log in. After logging in, run the command:

firebase init hosting

Then select the project you just created as the project you would like to deploy your website to and do not overwrite your index file if asked. Now you have added Firebase to folder containing the public folder.

STEP 5: CLEAN URLS (OPTIONAL)

You can remove the .html extension from your website URLs if you choose to. To do this, head over to the folder where your public folder is located and open firebase.json in your preferred text editor

Add cleanUrls:true to the file as shown in the image below

This removes the .html extension.

STEP 6: DEPLOY WEBSITE

To deploy your website, head back to the command prompt with the directory still pointing to the directory where the public folder is located and run the command below:

firebase deploy

Wait for your website to deploy and you are done. You can access your URL by visiting the hosting section on Firebase console.

STEP 7: ADD CUSTOM DOMAIN (OPTIONAL)

You can add your purchased domain from sites like GoDaddy.com or namecheap.com to your web project. To do this go to the hosting section of your project''s console and click on add custom domain.

You will be asked to verify your domain by adding a txt record in your domain settings. Then follow instructions to add the domain.

CONCLUSION

Hosting your website using Firebase is really easy and you get super-fast loading time for your viewers with almost no downtime. Hope you enjoyed the tutorial, see ya.