Deploying a Static Bootstrap Website to Google Firebase
Tags: html, webdev, google, firebase
Published: 2020-02-14 20:25:56

##What You’ll Need to Get Started
- An activated [Google Cloud Platform](https://console.cloud.google.com/) account
- [Google Cloud SDK](https://cloud.google.com/sdk/install)

If you have previously worked on some HTML + CSS web pages, or anticipate to, you can only showcase your work to the world by uploading your project files to a hosting source where your websites become accessible through the internet. This has been a painful task in the last couple of decades. However, it has gotten much easier today. With all the cloud technologies getting more and more popular—and the pricing for the services getting cheaper and cheaper—you can basically host your website for free today with the help of some tools like Google Firebase Hosting.

You are free to choose any static website to upload to Firebase Hosting. If you already have a project ready to be uploaded to the cloud, feel free to skip the first step below.

#### **1. Creating a Bootstrap Website from a Template**
For this tutorial, we will be using a Bootstrap template. To get started, let’s get a Bootstrap project from your favorite source of Bootstrap templates. I like to use [Start Bootstrap] (https://startbootstrap.com/templates/). For my project, I will use an [easy template](https://startbootstrap.com/templates/scrolling-nav) for simplicity. Once you have chosen yours, download it to a known folder then edit your **index.html** to personalize your page. Finally, open your **index.html** page in the browser to see your changes. Below is the template I downloaded before and after adding some changes.

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

#### **2. Creating a Firebase App**
Navigate to the [Firebase console](https://console.firebase.google.com/) and create a new project. Below is a series of screenshots representing every step of the process. You are free to enable/disable Google Analytics, but it is not a necessity.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tifs18sd7gln90v9k59t.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8cgxwds24we6ngx6z0t1.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hxv5no3cetikrihmjtfs.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nf6xfk5jpltbxu5x8gnd.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jt6u7ysf6nik48jlhnpf.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6901qaosre2che789y8h.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xs6wgvhufmgxk8xnji19.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ollp9bm4x555qup34y2m.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ux3y6k996w68bx2awl05.png)

#### **3. Preparing Project for Deployment**
Before we can use the CLI to deploy our static website, we need to have a default public directory with our static files in it. So, in your project directory, move all your website files to a new folder named *public*. Follow the screenshot below for help.

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

The last change we will need to make to our project before deploying it is to include the Firebase SDK. Upon creating your Firebase app, you will be shown a code snippet (see screenshot below). This is responsible for allowing your static website to interact with Firebase. Copy the code block and add it to the bottom of your **index.html**.

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

####  **4. Using the Firebase CLI**
If you do not have firebase installed, use this [link](https://firebase.google.com/docs/cli) or this **npm** command:
npm install -g firebase-tools

Now, using the terminal, make sure you are in your project’s directory and execute these three commands in order. Follow screenshots for detailed steps.

```
firebase login
```

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

```
firebase init

```

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

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

```
firebase deploy
```

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

Visit the hosting URL shown at the bottom of your terminal and you should see your deployed static website. Here is [mine](https://bootstrap-firebase-96068.firebaseapp.com/). You can also find some more information about your hosting in the [Firebase console](https://console.firebase.google.com/). You made it! 🎉

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

As an optional cleanup task, add **.firebase**, **.firebaserc**, and **firebase.json** to your **.gitignore**.

Check out the [Github repo](https://github.com/Marwan01/bootstrap-firebase) for the source code that was used for this article.

Original Source: https://medium.com/better-programming/deploying-a-static-bootstrap-website-to-google-firebase-a2eb043ff015