Hosting an HTML and CSS project with Firebase.

Prabhjot Singh
Code is Life
Published in
3 min readFeb 19, 2022

--

Have you ever wondered, how to host just an HTML and CSS project ? Of course, you have done some amazing work with your HTML and CSS skills but stuck on how to share it with people around the world ?

Well, Firebase seems to be the best option for any professional or a student, as it provides free hosting along with tons of other services. So let’s dive into this together without wasting any time further.

To get started, all you just need is a google account.

A demo project that I learnt from Udemy.

This is what my project looks like when I open it on my Local Host.

Now let’s go to Firebase and create one project.

https://firebase.google.com

Open the above link, login and go to console.

Click on add project.

Enter the project name and click continue.

You may ignore enabling Google analytics for the project and click on create project.

wait for the project to be created and click continue.

Now, in order to setup FireBase hosting for your project, go to root folder of your project, open terminal and type and follow along:

npm install -g firebase-tools

If you are not logged in, you will be asked to login.

Make sure to select Hosting and keep following along.

Select the project we just created.

In the next step, I will select public folder as my public directory as all my files are inside that folder.

This will be the last step we need to perform.

and there it is, Hosting URL of your project and here is mine. https://nexter-39fd2.web.app/

Snapshot of my project hosted on Firebase.

I hope you were able to follow along and now your personal project is up and running.

P.S. — Do check out my GitHub profile if you are interested in the source code of this project. :) Link is in my profile.

--

--

Prabhjot Singh
Code is Life

Software Developer | Reader | Anime Artist | A very simple Writer