Deploying Static Websites on Firebase

Tutorial 2 of 5

Introduction

In this tutorial, we'll learn how to deploy a static website on Firebase Hosting. Firebase Hosting is a developer-focused hosting solution for web app content. It is primarily used for hosting static websites, which are sites with fixed content, but can also serve dynamic content through Cloud Functions.

By the end of this tutorial, you will be able to:

Setup and initialize a Firebase project
Deploy a static website to Firebase Hosting

Prerequisites:

Basic knowledge of HTML, CSS, and JavaScript
Firebase CLI installed. If not, you can install it via npm by running npm install -g firebase-tools
Node.js and npm installed on your system. If not, download and install Node.js from its official website.

Step-by-Step Guide

1. Setting up Firebase Project

First, we need to create a Firebase project. Go to the Firebase console, click on Add Project, enter a name for your project, and follow the prompts to create the project.

2. Initializing Firebase in the Project

After creating the Firebase project, navigate to your project's directory from the terminal and login to Firebase using the command firebase login.

Next, initialize Firebase in your project using firebase init. Select Hosting using the space bar and press enter. Choose the Firebase project you created and for the public directory, type public. Respond yes to configure as a single-page app.

A firebase.json file will be created in the root of your project. This file describes the deployment configuration.

3. Preparing the Static Website

Place your website's static files (HTML, CSS, JS, images) into the public directory. Make sure you have an index.html file in the root of the public directory as it serves as the default webpage.

4. Deploying the Website

To deploy the website, simply use the command firebase deploy. Once the deployment is successful, Firebase will provide a URL to the deployed website.

Code Examples

Example: Deploying a Simple Static Website

Let's say we have a simple static website with an index.html file.

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>My Static Site on Firebase Hosting</title>
</head>
<body>
    <h1>Welcome to my static site!</h1>
    <p>This site is hosted on Firebase.</p>
</body>
</html>

Deploy this website using the following command:

firebase deploy

After successful deployment, you'll see a message like this:

=== Deploying to 'my-static-site'...
...
✔  Deploy complete!

And a URL to your deployed site, like https://my-static-site.web.app.

Summary

In this tutorial, we learned how to deploy a static website on Firebase Hosting. We covered setting up a Firebase project, initializing Firebase in the project, preparing the static website, and deploying the website.

Next, you might want to learn about adding dynamic content through Firebase's Cloud Functions, or using Firebase's other features like authentication and database.

Practice Exercises

Exercise 1: Create a simple static website with an index.html, style.css, and main.js file. Deploy this website to Firebase.

Exercise 2: Add a form to your static website and handle form submission using JavaScript. Deploy your updated website to Firebase.

Exercise 3: Create a static website that pulls data from a public API and displays it. Deploy this website to Firebase.

Remember, practice is key to mastering any skill. Happy coding!