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.
- Open a terminal and type
npm install -g firebase-tools
- 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.
- Create a project folder for your web page name it
- Create an
index.htmland copy and paste the html code we have at the beginning of this tutorial to this file.
- Open a terminal or cmd in the directory where your
index.thmlis. To confirm if you're in the proper location, type:
lsif you're using mac or linux, and
dirif 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:
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
In this step you will be asked to:
- Select which firebase project do you want to upload your web page to.
- 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
- Configure as a single-page app? - Choose No. This is for single page apps.
- 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.
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.