Deploy Static Website on Firebase Hosting for Free

Firebase hosting is a service offered by Google which hosts static and dynamic websites in a secure way. It is the finest free service for developers. You can show a site design, pre-production version of a site to the client by deploying it on Firebase hosting.

A user can use the free plan of Firebase for hosting a website. The free plan includes support for custom domain and SSL, 1GB storage. The 1GB storage is sufficient for smaller websites. To get a list of all features included in free and premium plans, check out their pricing page.

Though Firebase hosting provides support to run Node.js/JavaScript code, in this article we focus only on deploying the static website. For deploying a dynamic website on Firebase I will write another article in the future.

Getting Started

In order to get started, you must have Node.js installed on your system. You can get the Node.js package for installation on their official website.

Once you have Node.js installed on your system, head over to Firebase console and create a project by clicking on ‘Add project’ box. Fill up all information as prompted.

Upon creating the Firebase project, you will then redirect to the project dashboard. Click on ‘Hosting’ from the left sidebar and then on ‘Get started’. It will open a page where you will find instructions for deployment. We will go through this in the next part of the tutorial.

Hosting

Deploy Static Website on Firebase Hosting

After creating a project on Firebase, with the help of a few commands, we can deploy a static website on Firebase hosting. It requires you first install Firebase CLI and then configure it locally.

Install Firebase CLI

For deployment first thing you need to do is the installation of Firebase CLI. You have installed Node.js so use npm to install CLI. Open the terminal and install Firebase CLI using npm as follows:

npm install -g firebase-tools

Notice we are installing the Firebase tools globally using -g. Doing so, you can run Firebase commands from any directory on your machine. Now from the terminal run the next command:

firebase login

It may redirect you to the Google account login page. Just follow the steps as suggested. It’s just an authorization process with Firebase so the project will deploy on your account only.

Initialize and Deploying

After authorizing your Google account with Firebase CLI, you need to initialize Firebase in the project root directory. For this, run the below command in your project root directory.

firebase init

Upon running the above command, CLI asks for a different option to choose. You should select the ‘Hosting’ option by navigating an arrow and then pressing the space key. Hit Enter after selecting the ‘Hosting’ option.

Initialize Firebase

Next, select the project you have created in the Firebase console. Hit the Enter key. The next question would be What do you want to use as your public directory? (public). No need to do anything here. Just hit the Enter key.

For the next question Configure as a single-page app (rewrite all URLs to /index.html)? (y/N), press N and hit Enter as we are not a deploying single-page application.

After this command, you will see a couple of files created in your root directory along with the public folder. This public directory will serve as a root for deployment. In this public directory you need to keep your project files.

Now, let’s create static HTML pages. As this tutorial is just for demo purposes I am creating basic HTML pages.

public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>This is Index Page</h1>
    <a href="index.html">Home</a> | <a href="about.html">About</a>
</body>
</html>

public/about.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>This is About Page</h1>
    <a href="index.html">Home</a> | <a href="about.html">About</a>
</body>
</html>

public/style.css

h1 {
    color: blueviolet;
}

These are our static pages which we are going to deploy on Firebase hosting.

If you want to test the project locally before deployment run the serve command as follows:

firebase serve

It will start your local server at http://localhost:5000. Test your project and if everything is good then deploy it using the command:

firebase deploy

Upon completion of deployment, you should see the Hosting URL in the console.

Firebase Deployment

Run the Hosting URL in the browser and you should see your website is deployed successfully. Keep note you can deploy your project as many times. After your changes just run the deploy command and your site will deploy with the new version.

Rollback your Version

Firebase maintains a history of all your deployment versions. You can even roll back to the older version. Go to the Firebase Hosting page where you will find a rollback option(Assuming you have deployed more than one version).

Rollback

By doing a rollback to the versions, you can switch between each version of your website directly. It’s simple and helpful during the design and development stage.

I hope you got to know the basics about the deployment process of Firebase hosting. Please share your thoughts and suggestions in the comment section below.

Related Articles

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.

1 thought on “Deploy Static Website on Firebase Hosting for Free

Leave a Reply

Your email address will not be published. Required fields are marked *