Deploy a website using Firebase Hosting
Tags: devops, html, css, javascript
Published: 2020-07-12 15:14:50

There's a lot of options cheap or even free in the market to deploy our projects. One of these and my favorite is the Firebase Hosting, a service of Google.

> This is my first post written in English. I'm from Brazil and I decided to try to write a series of articles in a new language with more reach than Portuguese using a translator eventually because I'm not fluent yet. So, I ask you for feedback and corrections if you find any errors. Thanks!

**Firebase** is a set of services of Google that provides you a **BaaS** (Back-end as a service), which means you don't have to worry about the boring part of deploy a back-end to your project. One of these services is the **Firebase Hosting** that you can deploy your website or web app made in HTML, Javascript, and CSS.

I'll show you how to deploy a simple website in the Firebase Hosting at zero cost.

### Create a project

We need to click in "Go to console" in the top right corner.

![Firebase Page](https://dev-to-uploads.s3.amazonaws.com/i/aw8zq7wsfwpihd39t7fp.png)

So the Firebase console. Now, we gonna create a project by clicking in "Adicionar projeto" (I didn't find how to change the language on the firebase console)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uxurrvafmodgmjt5g41n.png)

Now, we chosen the name of the project and keep on! In the mine, I've chosen the name "Firebase Lab"

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qrhhju2brk7j4spktv71.png)

Here you can disable google analytics for now:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/63y6ymb1el0qpuw6wf1t.png)

The project finally created:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ae8zfp9j8rtmzlha3x5f.png)

### Deploy website

We gonna create a folder and a simple html:

```
$ mkdir firebase-lab-website
```

Look at our simple html in the folder:

*firebase-lab-website/index.html*
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Firebase Lab</title>
  </head>
  <body>
    <h1>Firebase Lab</h1>
  </body>
</html>
```

Now, we need to install the CLI of the firebase with the command below:

```
$ npm install -g firebase-tools
```

Now, we need login:

```
$ firebase login
```

After that, execute this command in the website directory and choose the right project:

```
$ firebase init
```

* First, you select the option "Hosting: Configure and deploy Firebase Hosting sites" with the space bar and press Enter.

* Second, choose the option "Use an existing project" by press Enter.

* Third, choose the project that you created.

* Fourth, enter the folder of your index.html. The default is "public", but in my case, is "./".

* Last, we need to say if your website is a single-page app.

All ready! Now, the last command in the directory is to deploy:

```
$ firebase deploy
```

Our website is online!!

You can see details of the deploy in the option "Hosting" at the left menu:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cef3whi8qptddaa60tmm.png)

Give me feedback! :) Thanks!