DEV Community

Cover image for Deploying a Static Bootstrap Website to Google Firebase
Marouen Helali
Marouen Helali

Posted on • Originally published at Medium

Deploying a Static Bootstrap Website to Google Firebase

What You’ll Need to Get Started

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. For my project, I will use an easy template 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

2. Creating a Firebase App

Navigate to the Firebase console 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
Alt Text
Alt Text
Alt Text
Alt Text
Alt Text
Alt Text
Alt Text
Alt Text

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

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

4. Using the Firebase CLI

If you do not have firebase installed, use this link 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
Enter fullscreen mode Exit fullscreen mode

Alt Text

firebase init

Enter fullscreen mode Exit fullscreen mode

Alt Text

Alt Text

firebase deploy
Enter fullscreen mode Exit fullscreen mode

Alt Text

Visit the hosting URL shown at the bottom of your terminal and you should see your deployed static website. Here is mine. You can also find some more information about your hosting in the Firebase console. You made it! 🎉

Alt Text

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

Check out the Github repo 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

Top comments (0)