How to Host Website on Firebase

Firebase Hosting is a fast, secure, and scalable platform for deploying static websites and single-page applications (SPAs). Developed by Google, Firebase Hosting leverages a global content delivery network (CDN) to serve your content with minimal latency, regardless of where your visitors are located. Whether you’re a developer building a portfolio, a startup launching a landing page, or an enterprise deploying a React or Vue.js application, Firebase Hosting offers a streamlined, zero-configuration solution that integrates seamlessly with modern web development workflows.

Unlike traditional hosting providers that require manual server setup, domain configuration, SSL certificate management, and deployment scripts, Firebase Hosting automates nearly all of these tasks. With just a few commands in your terminal, you can deploy a production-ready website with HTTPS enabled, custom domain support, and instant cache invalidation. Its tight integration with other Firebase services—like Authentication, Firestore, and Cloud Functions—makes it an ideal choice for full-stack developers seeking an end-to-end solution without the overhead of managing infrastructure.

In this comprehensive guide, we’ll walk you through every step required to host your website on Firebase, from initial setup to advanced configurations. You’ll learn best practices for performance optimization, security hardening, and continuous deployment. We’ll also explore real-world examples and answer common questions to ensure you can confidently deploy and maintain your site on Firebase Hosting.

Step-by-Step Guide

Prerequisites

Before you begin hosting your website on Firebase, ensure you have the following installed and configured:

• Node.js and npm: Firebase CLI requires Node.js version 14 or higher. Download and install Node.js from nodejs.org if you haven’t already.
• A Google Account: You’ll need a Google account to access Firebase services. If you don’t have one, create it at accounts.google.com.
• A static website: Your site can be built with HTML, CSS, and JavaScript, or generated by frameworks like React, Vue, Angular, Svelte, or static site generators like Jekyll, Hugo, or Eleventy.

Step 1: Create a Firebase Project

Start by navigating to the Firebase Console. Sign in with your Google account.

Click on Add project. Enter a name for your project—e.g., “my-portfolio-site”—and click Continue. You may be prompted to enable Google Analytics; for basic hosting, you can safely skip this step by unchecking the box and clicking Continue.

Review your project settings and click Create project. Firebase will now initialize your project. This may take a few moments. Once complete, you’ll be redirected to your project dashboard.

Step 2: Install the Firebase CLI

The Firebase Command Line Interface (CLI) is a powerful tool that allows you to manage and deploy your Firebase projects directly from your terminal.

Open your terminal (Command Prompt on Windows, Terminal on macOS or Linux) and run the following command:

npm install -g firebase-tools

This installs the Firebase CLI globally on your system. To verify the installation, run:

firebase --version

You should see a version number (e.g., 14.12.1). If you get an error, ensure Node.js and npm are correctly installed and that your PATH is configured.

Step 3: Authenticate with Firebase

Next, authenticate your CLI with your Google account. Run:

firebase login

This command opens a browser window prompting you to sign in to your Google account. After successful authentication, your terminal will display a confirmation message: “Login successful.”

For team environments or automated deployments, you can also use service account keys via firebase login:ci to generate a one-time refresh token.

Step 4: Initialize Your Firebase Project

Navigate to the root directory of your website project in the terminal. For example:

cd /path/to/your/website

Run the initialization command:

firebase init

You’ll be prompted with a series of questions. Use the arrow keys to navigate and press Enter to select.

1. Select Hosting using the spacebar (you can select multiple features, but for now, just choose Hosting).
2. Choose the Firebase project you created earlier from the list. If it’s not listed, select Use an existing project and type the project ID manually.
3. When asked for the public directory, enter dist (if using a build tool like React or Vue) or public (if your site is plain HTML/CSS/JS). This is the folder that will be uploaded to Firebase Hosting.
4. Answer No to “Configure as a single-page app?” if your site is multi-page. Answer Yes if you’re deploying a React, Vue, or Angular app that uses client-side routing.
5. Answer No to “Overwrite index.html?” unless you’re okay with Firebase replacing your existing file with a default one.

After answering these questions, Firebase creates a firebase.json file in your project root and a .firebaserc file that stores your project configuration.

Step 5: Build Your Website (If Required)

If you’re using a framework like React, Vue, or Angular, you must first build your project to generate static files.

For React (using Create React App):

npm run build

For Vue CLI:

npm run build

For Angular:

ng build --prod

For plain HTML/CSS/JS projects, ensure your files are organized in the directory you specified during initialization (e.g., public/).

The build process generates a folder (usually dist/ or build/) containing optimized, minified static assets ready for deployment.

Step 6: Deploy Your Website

Once your files are ready, deploy them to Firebase Hosting with a single command:

firebase deploy

Firebase will:

• Upload all files from your public directory
• Enable HTTPS automatically
• Assign a default subdomain: your-project-id.web.app
• Provide a preview URL upon successful deployment

You’ll see output similar to:

✔  Deploy complete!
Project Console: https://console.firebase.google.com/project/my-portfolio-site/overview
Hosting URL: https://my-portfolio-site.web.app

Visit the provided URL in your browser to view your live website. It’s now accessible to anyone on the internet.

Step 7: Deploy to a Custom Domain (Optional)

Firebase Hosting supports custom domains, allowing you to use your own domain name (e.g., www.yourwebsite.com) instead of the default Firebase subdomain.

To add a custom domain:

1. In the Firebase Console, go to your project and select Hosting from the left sidebar.
2. Click Add custom domain.
3. Enter your domain name (e.g., www.yourwebsite.com) and click Continue.
4. Firebase will generate DNS records you need to add to your domain registrar (e.g., GoDaddy, Namecheap, Cloudflare).
5. Log in to your domain registrar’s dashboard and navigate to DNS settings.
6. Add the provided A records and CNAME records exactly as shown in Firebase.
7. Return to Firebase and click Verify. This may take up to 24 hours, but usually completes within minutes.

Once verified, your site will be accessible via your custom domain, and Firebase will automatically provision and renew an SSL certificate for you.

Step 8: Set Up Continuous Deployment (Optional)

To automate deployments when you push code to GitHub, GitLab, or Bitbucket, use Firebase Hosting with GitHub Actions.

Create a workflow file at .github/workflows/deploy.yml in your repository:

name: Deploy to Firebase Hosting
on:
push:
branches: [ main ]
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '20'
- name: Install dependencies
run: npm ci
- name: Build
run: npm run build
- name: Deploy to Firebase
uses: FirebaseExtended/action-hosting-deploy@v0
with:
repoToken: '${{ secrets.GITHUB_TOKEN }}'
firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT }}'
projectId: your-project-id
channelId: live

Generate a Firebase service account key:

• In the Firebase Console, go to Project Settings → Service Accounts.
• Click Generate new private key and save the JSON file.
• In your GitHub repository, go to Settings → Secrets and variables → Actions.
• Add a new secret named FIREBASE_SERVICE_ACCOUNT and paste the entire contents of the JSON file.

Now, every time you push to the main branch, your site will auto-deploy to Firebase Hosting.

Best Practices

Optimize Your Build Output

Performance begins before deployment. Ensure your build process minifies CSS, JavaScript, and HTML. Use tools like:

• Webpack Bundle Analyzer to identify large dependencies.
• Image optimization tools like Sharp, Squoosh, or Cloudinary to compress images without quality loss.
• Code splitting in React or Vue to load only necessary components on initial render.

Always test your build locally using a static server:

npx serve -s dist

Configure Cache Headers Correctly

Firebase Hosting uses HTTP caching headers to improve load times. By default, static assets are cached for 2 hours. For long-lived assets like JavaScript and CSS files, extend this to 1 year by modifying your firebase.json:

{
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"/node_modules/"
],
"headers": [
{
"source": "**/*.@(js|css)",
"headers": [
{
"key": "Cache-Control",
"value": "public, max-age=31536000"
}
]
},
{
"source": "**/*.@(png|jpg|jpeg|gif|svg)",
"headers": [
{
"key": "Cache-Control",
"value": "public, max-age=31536000"
}
]
},
{
"source": "index.html",
"headers": [
{
"key": "Cache-Control",
"value": "no-cache"
}
]
}
]
}
}

This ensures static assets are cached aggressively while index.html is always fetched fresh to support client-side routing.

Use .firebaserc for Multi-Environment Management

If you maintain separate environments (development, staging, production), use Firebase aliases:

firebase use --add

This allows you to switch between environments easily:

firebase use staging
firebase deploy
firebase use production
firebase deploy

Secure Your Site with HTTPS and HSTS

Firebase Hosting enforces HTTPS by default. To further enhance security, enable HTTP Strict Transport Security (HSTS) in your firebase.json:

{
"hosting": {
"headers": [
{
"source": "**",
"headers": [
{
"key": "Strict-Transport-Security",
"value": "max-age=63072000; includeSubDomains; preload"
}
]
}
]
}
}

Ensure your custom domain is fully verified before enabling HSTS, as it cannot be reversed easily.

Monitor Performance with Firebase Analytics

Although optional, integrating Firebase Analytics provides insights into user behavior, page views, and engagement. Add the Firebase SDK to your site and initialize it in your main JavaScript file:

import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "your-project-id.firebaseapp.com",
projectId: "your-project-id",
appId: "1:your-app-id:web:your-web-id"
};
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

Enable analytics in the Firebase Console under Analytics to view real-time data.

Exclude Sensitive Files

Never deploy configuration files, environment variables, or source code. Use the ignore array in firebase.json to exclude them:

"ignore": [
"firebase.json",
"**/.*",
"/node_modules/",
".env",
"src/",
"README.md"
]

Tools and Resources

Essential Tools

• Firebase CLI: The primary interface for managing deployments, logs, and configurations. Documentation
• Netlify CLI (Alternative): If you need more advanced functions or serverless features, compare with Netlify’s platform.
• GitHub Actions: Automate deployments from version control. Learn more
• Webpack or Vite: Build tools to bundle and optimize frontend assets.
• Google PageSpeed Insights: Test your site’s performance after deployment. pagespeed.web.dev
• Chrome DevTools: Use the Network and Lighthouse tabs to audit performance, accessibility, and SEO.

Templates and Starter Kits

Accelerate development with pre-configured templates:

• React + Firebase Hosting: Firebase React Quickstart
• Vue 3 + Vite + Firebase: Vue Vite Template
• Next.js on Firebase: Use Next.js with Firebase Hosting for SSR fallbacks.
• Static Site Generators: Deploy Hugo, Jekyll, or Eleventy sites with Firebase by building locally and uploading the output folder.

Monitoring and Debugging

Use these tools to troubleshoot issues:

• firebase serve: Test your site locally before deploying.
• firebase hosting:channel:deploy: Deploy to a preview channel for testing without affecting production.
• firebase logs: View deployment logs and errors.
• Firebase Console → Hosting → Logs: Monitor real-time deployment status and errors.

Community and Support

Engage with the Firebase community for help:

• Stack Overflow: Search or ask questions tagged with firebase-hosting
• GitHub Issues: Report bugs or request features for Firebase CLI or SDKs.
• Reddit r/Firebase: Community discussions and tips.
• Firebase YouTube Channel: Official tutorials and updates.

Real Examples

Example 1: Personal Portfolio Site

A freelance designer built a portfolio using plain HTML, CSS, and JavaScript. The site included a home page, services section, portfolio gallery, and contact form.

Steps taken:

• Files organized in a public/ folder with subdirectories for css/, js/, and images/.
• Used firebase init and selected public as the public directory.
• Deployed using firebase deploy.
• Purchased a custom domain from Namecheap and configured DNS records in Firebase.
• Added cache headers for CSS/JS and set index.html to no-cache.

Result: The site loads in under 1.2 seconds globally, with a Lighthouse score of 98/100. The custom domain is fully HTTPS-secured with automatic certificate renewal.

Example 2: React SPA for a SaaS Startup

A startup built a landing page using React, Vite, and Tailwind CSS. They needed fast global delivery and seamless integration with Firebase Authentication for beta signups.

Steps taken:

• Used Vite to build the project: npm run build generated a dist/ folder.
• Configured Firebase Hosting to treat the site as a single-page app by selecting “Yes” during initialization.
• Set up GitHub Actions to auto-deploy on every push to main.
• Integrated Firebase Authentication and Firestore to capture user emails during beta signup.
• Enabled HSTS and configured CDN caching for assets.

Result: The site is live at app.startup.io with 99.9% uptime. Beta signups are captured in Firestore, and deployments occur within 30 seconds of a Git push.

Example 3: Static Blog with Eleventy

A technical writer used Eleventy to generate a blog from Markdown files. The site had 120+ pages and needed to be hosted with minimal cost and maximum speed.

Steps taken:

• Installed Eleventy: npm install -D @11ty/eleventy
• Configured Eleventy to output to _site/
• Used firebase init and set public directory to _site
• Added redirects in firebase.json to handle legacy URLs
• Deployed with firebase deploy

Result: The blog loads in under 800ms globally. All pages are cached at the edge, and the site handles 10,000+ monthly visitors with zero server costs.

FAQs

Is Firebase Hosting free?

Yes, Firebase Hosting offers a free tier that includes 10 GB of storage, 360 MB/day of bandwidth, and one custom domain. For most personal and small business websites, the free tier is more than sufficient. Paid plans start at $25/month for higher bandwidth and additional features like enhanced caching and priority support.

Can I host dynamic websites on Firebase?

Firebase Hosting serves static content only. However, you can combine it with Firebase Cloud Functions to handle backend logic (e.g., form submissions, API endpoints). For full dynamic server-side rendering, consider Firebase’s integration with Next.js or deploy to Google App Engine.

Does Firebase Hosting support SSL certificates?

Yes. Firebase Hosting automatically provisions and renews free SSL certificates via Let’s Encrypt for both default and custom domains. No manual setup is required.

How fast is Firebase Hosting?

Firebase Hosting uses Google’s global CDN with over 30 edge locations. This ensures content is served from the nearest location to your visitor, resulting in sub-100ms load times for users in major regions. Performance is consistently rated among the fastest for static hosting platforms.

Can I use Firebase Hosting with WordPress?

No. WordPress requires a server running PHP and MySQL, which Firebase Hosting does not support. However, you can migrate your content to a static site generator like WP2Static and host the output on Firebase.

What happens if I exceed my bandwidth limit?

If you exceed the free tier’s 360 MB/day limit, Firebase will notify you and may temporarily throttle your site. You’ll be prompted to upgrade to a paid plan. There are no sudden shutdowns, and you can monitor usage in the Firebase Console.

Can I host multiple websites on one Firebase project?

Yes. You can configure multiple hosting sites within a single Firebase project by defining multiple hosting targets in your firebase.json file. Each site can have its own public directory and custom domain.

How do I rollback a deployment?

In the Firebase Console, go to Hosting → Revisions. You’ll see a list of all deployments. Click the three dots next to a previous revision and select Roll back. This instantly reverts your site to that version.

Does Firebase Hosting support redirects and rewrites?

Yes. You can define redirects and rewrites in firebase.json. For example, to redirect /old-page to /new-page:

{
"hosting": {
"redirects": [
{
"source": "/old-page",
"destination": "/new-page",
"type": 301
}
]
}
}

To rewrite all routes to index.html for client-side routing:

{
"hosting": {
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}

Conclusion

Hosting your website on Firebase is one of the most efficient, reliable, and developer-friendly approaches available today. With its seamless integration into modern web toolchains, automatic SSL, global CDN, and effortless deployment process, Firebase Hosting eliminates the complexity traditionally associated with web hosting. Whether you’re launching a simple landing page or a high-performance single-page application, Firebase provides the infrastructure to scale with your needs—without requiring server management or DevOps expertise.

By following the steps outlined in this guide—from initializing your project and configuring cache headers to setting up continuous deployment and securing your domain—you’ve equipped yourself with the knowledge to deploy professional-grade websites with confidence. The best practices and real-world examples provided ensure your site not only loads quickly but also performs optimally across devices and regions.

As web technologies continue to evolve, Firebase remains at the forefront of static hosting innovation. Its ongoing updates, tight coupling with Google’s ecosystem, and commitment to performance make it a strategic choice for developers who value speed, simplicity, and scalability. Start small, iterate quickly, and leverage Firebase Hosting to turn your ideas into live, accessible web experiences—faster than ever before.