Introduction

Want to launch your website in under 10 minutes, with zero server management, free HTTPS, and global speed?

Firebase Hosting is the answer.

Whether you're building a personal portfolio, a React/Vue SPA, or a simple HTML landing page — Firebase Hosting lets you deploy static websites with a single command. No backend. No DevOps. Just pure front-end magic.

In this guide, I’ll walk you through deploying your website on Firebase Hosting — from setup to live URL — with real commands and screenshots.

Let’s get your site online. 🚀

Why Choose Firebase Hosting?

Feature	Firebase Hosting
Setup Time	~5 minutes
Cost	Free tier (1GB storage, 10GB/month transfer)
SSL	Automatic & free
Global CDN	200+ edge locations
Custom Domain	Yes
Rollback	One click
CI/CD	Easy GitHub integration

Perfect for static sites, SPAs, PWAs, and JAMstack apps.

Prerequisites

Before we start, make sure you have:

• A Google account
• Node.js installed
• A static website ready (e.g., HTML/CSS/JS or a built React app in /dist)
• Terminal (Mac/Linux) or Command Prompt/PowerShell (Windows)

Step 1: Install Firebase CLI

Open your terminal and run:

npm install -g firebase-tools

This installs the Firebase command-line tool globally.

Verify installation:

firebase --version

Step 2: Log In to Firebase

firebase login

This opens your browser. Sign in with your Google account and allow access.

You’ll see: "Success! Logged in as your-email@gmail.com"

Step 3: Initialize Your Project

Navigate to your website’s root folder (where index.html or dist/ lives):

cd path/to/your-website

Run:

firebase init

Follow the prompts:

? Which Firebase CLI features do you want to set up? → Hosting
? Select a default Firebase project → [Create a new project or select existing]
? What do you want to use as your public directory? → dist (or build, public, etc.)
? Configure as a single-page app (rewrite all urls to /index.html)? → Yes
? Set up automatic builds and deploys with GitHub? → No (or Yes for CI/CD)

This creates a firebase.json file:

{
  "hosting": {
    "public": "dist",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [{
      "source": "**",
      "destination": "/index.html"
    }]
  }
}

SPA Rewrites ensure /about, /contact don’t 404 — they load index.html and let your app handle routing.

Step 4: Deploy Your Site

Run:

firebase deploy --only hosting

Output:

Hosting: Deploy complete!

Hosting URL: https://your-project-id.web.app

Your site is now LIVE globally!

Resources

• Firebase Hosting Docs
• Firebase CLI Reference

Conclusion

Firebase Hosting makes web deployment simple, fast, and free.

No servers. No config. Just:

firebase deploy

And your site is live at https://your-site.web.app

Try it now — your first deployment takes less than 10 minutes.

Pro Tip: Use firebase serve to test locally before deploying.