Introduction: Free Website Hosting Using Firebase Hosting - Beginners Guide

By Bet prediction
About: Developer, Engineer and love tech...

1) Click https:firebase.google.com/

2) Press Get Started and Sign Up using a Google Account

3) After Signing up create a new project by clicking 'Add Project'

4) First step is to type in the Project name (ideally the Website name also) - use

5) Once the project Name is entered, google will assign a
unique project id for the Firebase hosting. N.B the project id given can be edited now to be more readable and also be used as the domain name (if using the free domain urls).

6) Second Step is to Link you google Analytics (this is an optional step which is highly recommended if testing or reporting are needed)

7) Press Continue after deciding for linking google
analytics

8) Third Step is to Link you Google Analytics Account if Choosing yes in Step 2.

9) Create Project is the Next Step and will be nearly ready from online part.

Two Project that i hosted with firebase spark plan (which is the free hosting) are the Paypal Casino and Soccer Predictions website

Step 1: Firebase Hosting - Static Files

Well Done the Project is now Created. Next Step is to Setup

the files on you local PC and Deploy your content so that it will be hosted directly trough firebase. A domain name is already provided from Firebase for Free and also there are two to choose from which are either '*********.web.app' OR '*********.firebaseapp.com' where ********* is the Project ID assigned earlier on Step 1.

[Domain names can be viewed in the Hosting Section of Firebase Console]

For more details and FAQ question, visit the Firebase
website (getting started page): https://firebase.google.com/docs/web/setup

Step 2: Firebase Deploying - Step 1

Create HTML Static files and Deploy to Firebase

First to start with is to install via npm the firebase-tool as the command below (use cmd for windows )to deploy static files on firebase servers (HTML, CSS, JavaScript, etc).

npm install -g firebase-tools

After installing the firebase tools, prepare you folder with the website static files inside. You are now ready to setup firebase into the Folder. Type in the command prompt

firebase init


A set of question will be needed to setup the deployment.

  1. · press space for the selection wanted when there is more than
  2. · Press enter when ready

The next Selection will be to select a firebase project
(either create a new one or choose an existing project). If the First few steps have been done already online then choose:

‘Use an existing project’

Step 3: Firebase Deploying - Step 2

Next is to select the project created from the list

Final steps include the configurate of the static files and
folder. Choose www as the new folder name (when asked: What do you want to use as you public directory?) – type www

Next question will be to create an already index.html which include the firebase page.

Nearly Ready!

Firebase will create 2 extra files which are the

  1. firebase.json
  2. .firebaserc

So now inside you www folder create place your index .html , so that we deploy. All you need to do now is type

Firebase Deploy

Example of Firebase hosting are these two projects of mine: Bet Prediction Website
and Casino Slots & Free Casino games webiste

Thanks