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.
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.
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
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.
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:
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.
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.
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:
Wait for your website to deploy and you are done. You can access your URL by visiting the hosting section on Firebase console.
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.
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.