Host website for Free on Firebase

Firebase Hosting gives you a fast, secure, and reliable way to host your app’s static assets (HTML, CSS, JavaScript, media files, etc.) as well as to serve dynamic content and host microservices.

And, the best part: It is FREE! (most part of it is).

As an added plus:

• Hosting serves your content over SSL (by default).
• You can use your own custom domain or use
• Free subdomains on web.app and firebaseapp.com.

How to host your website on Firebase?

So, how can you host your HTML, CSS & JavaScript website on it?

Host website on Firebase for Free

First, setup up a Firebase project.

• Go to https://console.firebase.google.com/
• Click on ‘Add Project’.
• Give your Project a name!

Remember: The unique Project ID or identifier that you’ll specify here would become the default URL for the free domain (web.app and firebaseapp.com).

You can change it by clicking on the little pencil icon and specifying one of choice. It has to be available. Once you’re satisfied, hit Save!

The new project should take some time to create.

Till then let's look at our website files.

Website file structure

I have my index.html, styles.css and index.js in a folder called public.

The files are linked and on localhost display a simple:

Portfolio website on LocalHost

We’ll host this on the project created.

Using the side navigation of your created Firebase project, go down to Hosting under Build.

Navigate to Hosting

Now, follow the steps as mentioned.

You’ll have to first, Install the Firebase CLI

Open the terminal and run: npm install -g firebase-tools

Next, you’ll need to sign in to your Google account.

Type in: firebase login (and, it’ll display a url that you need to click on and authenticate with).

Now, initiate your project

Run this command: firebase init

When you’ll run this command, the terminal would ask you:

• Are you ready to proceed? Type ‘Y’.
• Next, you’ll have to select a feature. Use arrows to navigate to hosting and hit space then enter.

• Now, you’ll have to select the project that you had created again using arrows. Once done, hit enter.
• It’ll ask you: What do you want to use as your public directory? Type in ‘public’ and enter.
• Configure as a single-page app? Depending on how your website is, hit yes or no. I’ll type ‘y’ because my website is a single page.
• Set up automatic builds and deploys with GitHub? Do ’N’, since we won’t set up the build using GitHub.
• File public/index.html already exists. Overwrite? Do ’N’ as we have code written in our index.html.

And, that is it! You’ll get a message saying: Firebase initialization complete!

The last step is to type in: `firebase deploy`

This command will deploy your website to the default URL and it’ll be hosted.

The Hosting URL would also be printed out to console and you can visit it to see the deployment.

These are all the steps required to host your HTML, CSS, JavaScript website for Free on Firebase Hosting complete with SSL and a free domain.

Thank you so much for reading! 👋

I also have a video tutorial on it. Check it out here:

Video tutorial on Firebase Hosting