How to Deploy a Website using Firebase Hosting

Firebase Hosting provides fast and secure hosting for your web app. In this guide, we will walk through deploying a static site step by step using Firebase CLI...

1. Create a Firebase Project

⚡First, open your browser and head over to the Firebase Console. Sign in using your Google account and click on the "Add project" or "Create a project" button. Enter your desired project name, follow the simple on-screen instructions, and click "Continue."

⚡Next, "Enable" or "Disable" Gemini in your Firebase. (Recommended: Disable).

⚡Next, Click Continue with the default sitting that is : Enable Google Analytics for the project.

⚡Next, "Select the account and choose the "Default Account for Firebase". and click on the "Continue"

...............................................................

⚡ Next, we click "Continue" again after waiting for some time.

Finally, we have "successfully" created the Firebase project!

2. Install Firebase Tools CLI

Now, leave the browser for a moment and open your project's main folder inside your local terminal or VS Code terminal. Make sure you have Node.js installed on your operating system, then execute the following command to install the global Firebase command-line tools:

npm warn depcated node-domexception@1.0.0: Use your platform's native DOMException instead
npm warn depcated json-ptr@3.1.1: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
npm warn depcated uuid@9.0.1: uuid@10 and below is no longer supported.  For ESM codebases, update to uuid@latest.  For CommonJS codebases, use uuid@11 (but be aware this version will likely be depcated in 2028).
npm warn depcated glob@10.5.0: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me

added 3 packages, removed 1 package, and changed 665 packages in 36s

3. Initialize Your Project

Now that the CLI tools are installed, navigate to your project directory in your terminal and log in to your Google Account by running the following command:

i  Firebase CLI v13.0.0 is ready to begin
    ? Allow Firebase to collect CLI usage and error reporting information? Yes
    Visit this URL on this device to log in:
    https://google.com?...
    Waiting for authentication...

    Already logged in as sartajali47407@gmail.com

Already logged in as name1234@gmail.com (Browser Already Login In the create project time)

After successfully logging in through your browser, return to your terminal and initialize your project configuration by running this setup command:

Next step

     
     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  /media/linux-com/E194-51BC/html/blog_site/blog_web

Before we get started, keep in mind:

  * You are currently outside your home directory

? Which Firebase features do you want to set up for this directory? pss Space to select features, then Enter to confirm your choices.
 ◯ Genkit: Setup a new Genkit project with Firebase
 ◯ Functions: Configure a Cloud Functions directory and its files
 ◯ App Hosting: Set up deployments for full-stack web apps (supports server-side rendering)
❯◯ Hosting: Set up deployments for static web apps
 ◯ Storage: Configure a security rules file for Cloud Storage
 ◯ Emulators: Set up local emulators for Firebase products
 ◯ Remote Config: Configure a template file for Remote Config

↑↓ navigate • space select • a all • i invert • ⏎ submit

◯ select the "Hosting: Set up deployments for static web apps" with the help of up, down arrow-button.

◯ For the final selection one time click "space-button"

◯ After the final selected "Hosting: Set up deployments for static web apps" click one time "Enter"

.................................................................

Next step

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 

? Please select an option:
❯ Use an existing project
  Create a new project
  Add Firebase to an existing Google Cloud Platform project
  Don't set up a default project

↑↓ navigate • ⏎ select

◯ Here, we select the fisrt option "❯ Use an existing project" click "Enter"

Next step

Please select an option: Use an existing project
? Select a default Firebase project for this directory:
❯ project01 (yourproject)
  project01 (yourproject)
  project01 (yourproject)
  project01 (yourproject)

↑↓ navigate • ⏎ select

◯ Here, choose your porject the created in the brower "❯ yourproject" click "Enter"

◯ Waiting the some time process in the runnung in the terminal.

◯ After the complete the process, created the some important files tha main folder (Related the firebae).

_____________________________

"====Now close the Terminal===="

_____________________________

"====Again Open the same folder in the New Terminal===="

Next step

=== * You are currently outside your home directory

? Which Firebase features do you want to set up for this directory? pss Space to select features, then Enter to confirm your choices.
 ◯ Genkit: Setup a new Genkit project with Firebase
 ◯ Functions: Configure a Cloud Functions directory and its files
 ◯ App Hosting: Set up deployments for full-stack web apps (supports server-side rendering)
❯◉ Hosting: Set up deployments for static web apps
 ◯ Storage: Configure a security rules file for Cloud Storage
 ◯ Emulators: Set up local emulators for Firebase products
 ◯ Remote Config: Configure a template file for Remote Config

↑↓ navigate • space select • a all • i invert • ⏎ submit

◯ Here, again choose the "❯◉ Hosting: Set up deployments for static web apps":

Click Again "Enter"

Next step

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 

i  Using project devbysartaj (devbysartaj) .

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? (public)

✔ What do you want to use as your public directory? .

◯ Here, we simply type "." (dot) according to me, click "Enter"

Next, OUTPUT :

? Configure as a single-page app (rewrite all urls to /index.html)? (Y/n)

◯ Here, we type "y", click "Enter"

Next, OUTPUT :

? Set up automatic builds and deploys with GitHub? (Y/n)

◯ Here, we type "n", click "Enter"

Next, OUTPUT :

Would you like to install agent skills for Firebase? (Y/n)

◯ Here, we type "n", click "Enter"

_______________________________

Next, OUTPUT :

✔ Configure as a single-page app (rewrite all urls to /index.html)? Yes ✔ Set up automatic builds and deploys with GitHub? No ✔ Wrote index.html === Agent Skills Setup If you are using an AI coding agent, Firebase Agent Skills make it an expert at Firebase. ✔ Would you like to install agent skills for Firebase? No ✔ Wrote configuration info to firebase.json ✔ Wrote project information to .firebaserc ✔ Wrote .gitignore ✔ Firebase initialization complete!

4. Deploy Your Website

Once your project setup is initialized and your website files (like index.html, CSS, and JS) are placed properly inside your public directory, run the final deployment command to push your website live:

=== Deploying to 'my-firebase-app'...

i  deploying hosting
i  hosting[my-firebase-app]: beginning upload...
✔  hosting[my-firebase-app]: file upload complete
✔  Deploy complete!

Project Console: https://google.com
Hosting URL: https://web.app

Congratulations! The Firebase CLI will now generate and display a unique live hosting URL. You can click on that URL to see your production website running fast, securely, and backed up with a free SSL certificate.

.

Hosting URL : "https://yourproject.web.app"copy-paste the URL in brower.

4. Deploy Your Website Again (in future)

Any type changes in your website main folder in the codes (HTML, CSS,etc....) then, we simple run the below cammnad in the terminal.

=== Deploying to 'my-firebase-app'...

i  deploying hosting
i  hosting[my-firebase-app]: beginning upload...
✔  hosting[my-firebase-app]: file upload complete
✔  Deploy complete!

Project Console: https://google.com
Hosting URL: https://web.app

Again Congratulations! Your website is updated Now.

.

Hosting URL : "https://yourproject.web.app"copy-paste the URL in brower.

Search your Website on the any browser, if can't seen any update/ changes on the site then, hard refresh / hard reload the browser. Try it below instruction...

1. ----> ctrl+F5

2. ----> ctrl+shift+R

Thank you!