Introduction

Hello everyone, in today's post I wanted to show you how to use the google cloud hosting service. using that service, we can host static web pages easily, free, and securely.

Why use Firebase Hosting?

Firebase hosting will provide you impressive good speed without the need for separate CDN and it's FREE, easy to use, and provides the SSL certificate so that your website will be hosted securely with HTTPS.

Requirements

Google account for Firebase setup in console
Domain: you can purchase a domain from any provider
Firebase-CLI (installation process showed later in this post)

Hosting a static website

Step 1 - Configure Firebase project on Firebase console

Open Firebase Console ==> Sign in with your Google account ==> Create project ==> Add title ==> Enable Google analyitics for your country.
See the images below for guidance.

get started firebase.png

welcome to firebase.png

create project step 1.png

create a project step 2.png

create a project step 3.png

Step 2 - Install Firebase-CLI on your machine

Simply execute the following command:

npm install -g firebase-tools

or you can use:

yarn global add firebase-tools

Step 3 - Configuration of Firebase-CLI on the local machine

Create a new folder on your computer
Open a new CMD(command prompt) and cd into the newly created folder
Now execute the command:

firebase login

This will redirect you to the sign-in page in the browser, where you just need to simply sign in.

After successfully given access, you should get the below message on the browser

succes message.png

Step 4 - Initialize project

On your command prompt, simply execute the following command:

firebase init

After executing this command you should see the following screen:

firebase init.png

After pressing enter to the question

are you ready to proceed?

you should select the option:

Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys

Use arrows to change selection and select using the spacebar, then press enter.

Once the Hosting option is selected, they'll provide the option to choose an existing project or create a new one. As we have already created a sample static project, you need to just choose the existing option and press enter.

project setup.png After pressing enter you should see your Firebase project, select it, and press enter. hosting setup.png Then it will ask you for a name for the public directory, you can put the same name as your project, and after pressing enter the following question should appear

configure single page.png

If your page is a single page like mine you should answer yes.

Step 5 - Publish website on LocalHost:5000

After we are done with the configuration we need to run the following command:

firebase serve

If we followed all of the steps correctly, in the folder created at the beginning we will find another folder and inside an index.html file that will be shown on localhost:5000

firebase serve.png

After watching the screen above without showing problems then we can exit with Ctrl+C

Step 6 - Adding our files

We're almost done!, now it's time to delete the index.html file and replace it with our wanted index.html, index.css, images, and icon files.

Back at the CMD terminal we can repeat step 5 and now we should see our website on localhost:5000, it's likely that we see the old file instead of the new one so to fix that make sure to refresh the browser with Ctrl+Shift+R

Step 7 - Deploy on the Firebase server

After making sure everything works properly on localhost:5000, we can now exit and proceed with the deploy

firebase deploy

firebase deploy.png As we can see from the image above, after the deploy it's complete, we should get a Hosting URL, if we paste that into our web browser we should see our website.

We are Done!

Step 8 - Add Costume Domain

In the likely case that you don't want your website URL to look like this: https://sample-9f6cf.web.app/ and want to use a custom domain instead, we can do just that from the Project dashboard, just follow the images below.

project dashboard.png

Inkedproject hosting_LI.jpg

link domain steps.png

In my case, I already had a domain from https://domains.google/ and after following the three steps from the image above we should get a register type, host, and value (image below).

step 3.png

Now we need to go to Google Domains ==> Select your domain ==>DNS ==> Manage custom records ==> Create new record and enter the values there ==> Save. See the images below for guidance.

new record.png

Now we should wait some time, normally it's a few minutes, and after that, we are done hosting our website with firebase!.

Farewell

I really hope this post has taught you how to host your website with Firebase and if you have any suggestions or ideas, let me know in the comments below, see you in the next post!.

Host A Static Website With Firebase Hosting Service

Comments (2)

More from this blog

Tarjan Algorithm Beginner Overview

The Greedy Guide: Essential Problems and Solutions for Competitive Programming

Optimal Play: A Dynamic Programming Approach to an Array-based Turn Game"

2D Prefix Array And 2D Segment Tree Overview

Unveiling Dynamic Programming Solutions for 'Roads' and 'Organizing Tiles' Problems.

Introduction

Why use Firebase Hosting?

Requirements

Hosting a static website

Step 1 - Configure Firebase project on Firebase console

Step 2 - Install Firebase-CLI on your machine

Step 3 - Configuration of Firebase-CLI on the local machine

Step 4 - Initialize project

Step 5 - Publish website on LocalHost:5000

Step 6 - Adding our files

Step 7 - Deploy on the Firebase server

Step 8 - Add Costume Domain

Farewell

Command Palette

Comments (2)

More from this blog

Introduction

Why use Firebase Hosting?

Requirements

Hosting a static website

Step 1 - Configure Firebase project on Firebase console

Step 2 - Install Firebase-CLI on your machine

Step 3 - Configuration of Firebase-CLI on the local machine

Step 4 - Initialize project

Step 5 - Publish website on LocalHost:5000

Step 6 - Adding our files

Step 7 - Deploy on the Firebase server

Step 8 - Add Costume Domain

Farewell