Firebase Hosting is no doubt one of the most popular static content hosting site you can find today. One of the main reason is because it has a FREE plan and it's easy to use.

Here we have a basic static web page that we will upload to Firebase Hosting.

<!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>Hello Firebase by Random Code Tips</title>
</head>

<body>
  <h1 align="center">Hello Firebase!</h1>
  <h2 align="center">by <a href="http://localhost:8888/wordpress">Random Code Tips</a></h2>
</body>

</html>

Nothing special here, just a static web page with some message.

Before you can upload anything to Firebase Hosting, you must create a project. Go ahead and go to https://console.firebase.google.com/ and create your Firebase account.

Create a Firebase Account

After creating your account you should be able to see the dashboard:

Create a Firebase project

Now, click that "Add project" button. Fill out the project details and click "Create project"

Here you will see the basic details of your project.

Once your new project has been created, you will be directed to the dashboard where you will see a lot of links, but what we want is to go to the "Hosting" tab so click that and you will see this:

Click "Get started"

A dialog with 2 steps will pop-up and with instructions on how you can start using Firebase Hosing.

Install Firebase CLI

So in step 1, the installation. First you have to install the Firebase CLI.

We will assume that you already have Node.js and NPM installed on your machine.

  1. Open a terminal and type npm install -g firebase-tools
  2. To confirm if firebase tools has been installed, type: firebase --version. You should see the version.

Create the web page

Now that you have Firebase CLI we can now proceed to uploading our web page.

  1. Create a project folder for  your web page name it hello-firebase
  2. Create an index.html and copy and paste the html code we have at the beginning of this tutorial to this file.
  3. Open a terminal or cmd in the directory where your index.thml is. To confirm if you're in the proper location, type:ls if you're using mac or linux, and dir if you're using windows.

Login to Fibrebase

Login to firebase using the Firebase CLI

In the terminal type firebase login follow the steps and login with the google account you used in creating your firebase project.

Initialize Firebase Hosting

In the same terminal and directory type:

firebase init

You will see this cool Firebase text art along with some options. These options are the firebase products available for you to use. Go ahead and navigate to "Hosting" hit spacebar to select then press Enter

In this step you will be asked to:

  1. Select which firebase project do you want to upload your web page to.
  2. What do you want to use as your public directory? - Just enter . and press enter. The cli is basically asking where your `index.html` is, so in our case it's in the root of the project so that's why we enter .
  3. Configure as a single-page app? - Choose No. This is for single page apps.
  4. Overwrite index.html? - Obviously No.

Now that your firebase hosting has been initialized you should see the following files in your project folder.

  • .firebaserc - Config file create by firebase.
  • 404.html - Auto generated by firebase.
  • firebase.json - Hosting configuration also created by firebase.

Upload to Firebase Hosting

Now that everything's ready we can now upload our website to Firebase Hosting.

firebase deploy --only hosting -P hello-firebase-rctips

Let's break this down. This is the firebase deploy command. The --only hosting means you only want to deploy a website to firebase hosting. The -P hello-firebase-rctips means you want to upload the web page to the project hello-firebase-rctips. This is the project id of your firebase project. You can see this on firebase dashboard under Settings > General.

Hi Enter and your web page will start upload to Firebase Hosting.

Congrats! You just uploaded your first web page to Firebase Hosting.

You can check our example live here.