# Firebase Hosting Tutorial for AI-Generated Sites

> Publish an AI-generated static site with Firebase Hosting, from CLI setup and SPA rewrites to deployment, testing, custom domains, and updates.

![Firebase Hosting service page](/assets/blog/how-to-publish-an-ai-generated-site-on-google-firebase-hosti/01-service-page.png)

An AI website builder has given you a folder full of files. Now you need somewhere to put them. This Firebase Hosting tutorial covers the shortest practical route from that folder to a public website. It works for ordinary static sites and single-page applications, or SPAs. Firebase supplies secure HTTPS addresses and distributes files through a global CDN, making it a useful choice for vibe coding hosting.

## Before you start

This guide is for an already-built site containing HTML, CSS, JavaScript, images, and other browser-ready files. It does not cover server-side applications.

You need:

- A Google account
- Node.js and npm installed
- A finished site folder containing `index.html`
- Access to a terminal or command prompt

Firebase Hosting creates public URLs. An unlisted address should not be treated as password protection for a confidential client demo.

## 1. Install the Firebase CLI

The **Firebase CLI** connects your computer to Firebase. Open a terminal and run the command from the official [Firebase CLI installation guide](https://firebase.google.com/docs/cli#install_the_firebase_cli):

```bash
npm install -g firebase-tools
```

After installation:

- Run `firebase --version` to confirm that the command works.
- Reopen the terminal if your computer cannot find `firebase` immediately.

## 2. Sign in and create or choose a Firebase project

Sign in with the Google account that will own the site:

```bash
firebase login
```

A browser window opens so you can approve access. Then follow the official instructions to [create a Firebase project](https://firebase.google.com/docs/web/setup#create-project), or use a project you already own.

- Use a clear project ID because it becomes part of the default address.
- For client work, confirm that the project belongs to the right person or company before deploying.

## 3. Run firebase init hosting and choose the correct public or dist folder

Move into the root folder of your website, then run:

```bash
firebase init hosting
```

Follow the prompts from the [Firebase Hosting quickstart](https://firebase.google.com/docs/hosting/quickstart):

1. Choose **Use an existing project**, then select your Firebase project.
2. Enter the folder containing the deployable `index.html`. Plain static sites often use `public`; Vite and similar tools commonly produce `dist`. Some generators use `build`.
3. Answer the single-page application prompt. Choose **Yes** for a React, Vue, or similar SPA whose browser code handles routes such as `/pricing`. Firebase will send unknown paths to `index.html`. Choose **No** when each page has its own HTML file.
4. Do not overwrite an existing `index.html` when asked.

![Firebase Hosting quickstart](/assets/blog/how-to-publish-an-ai-generated-site-on-google-firebase-hosti/02-hosting-quickstart.png)

## 4. Run firebase deploy

Publish the configured folder with:

```bash
firebase deploy
```

Firebase uploads the files and prints the result.

- Confirm that the output names the intended project.
- Save the displayed `PROJECT_ID.web.app` address.

Firebase also provides a `PROJECT_ID.firebaseapp.com` address, so every deployment receives **two secure default URLs**.

## 5. Test the web.app URL

Open the `web.app` URL in a private browser window. Test it as a visitor would:

- Load the home page on desktop and mobile widths.
- Click navigation links and check images, fonts, and downloads.
- For an SPA, open a deep link directly and refresh it.

A refreshed SPA route that returns a 404 usually means the rewrite was not enabled. Run initialization again carefully or add the rewrite described in the official [Hosting configuration guide](https://firebase.google.com/docs/hosting/full-config#rewrites).

For a private client preview, a Revdoku bucket can add an email or password gate, open notifications, and per-visitor analytics around the shared demo.

## 6. Add a custom domain

The `web.app` address is ready to use, but a domain such as `demo.example.com` looks cleaner. In the Firebase console, open Hosting and choose **Add custom domain**.

1. Enter the domain or subdomain you want to connect.
2. Copy the requested DNS records into your domain provider exactly as shown.
3. Wait until Firebase reports the domain as connected and provisions HTTPS.

DNS changes can require up to **24 hours** to appear. Keep Firebase's verification records in place. The official [custom-domain guide](https://firebase.google.com/docs/hosting/custom-domain) explains the available setup options and common DNS problems.

![Firebase Hosting custom domain guide](/assets/blog/how-to-publish-an-ai-generated-site-on-google-firebase-hosti/03-custom-domain.png)

## Update the site

When your AI tool changes the website, rebuild it if the tool uses a build step. Then deploy the new output:

1. Generate or build the latest version.
2. Confirm that the configured `public`, `dist`, or `build` folder contains the new `index.html` and assets.
3. Run `firebase deploy` again from the project root.

The existing Firebase and custom-domain links remain the same. This makes it easy to publish an AI-generated website again without sending clients a replacement URL.

## Final Firebase Hosting checklist

| Item | What to check | Why it matters |
|---|---|---|
| Project | Correct Firebase project selected | Prevents publishing to the wrong account |
| Folder | Deploy folder contains `index.html` | Firebase must receive built browser files |
| SPA | Deep links survive a refresh | Confirms the rewrite works |
| Domain | DNS and HTTPS show as connected | Visitors receive the branded secure address |

Your site is live.

Start publishing for free

Connect this AI to Revdoku so it can store files, create, update, and publish websites for me. Read and follow https://revdoku.com/prompt.md. A Revdoku account is required. If I do not have one, send me https://app.revdoku.com/users/sign_up?utm_source=revdoku.com&utm_medium=ai-chat&utm_campaign=connect_ai_first and wait until I confirm signup is complete. For ChatGPT, Claude, or another cloud AI, connect https://app.revdoku.com/mcp and complete Revdoku OAuth. For a local agent, use Revdoku's browser device sign-in and complete the connection in Revdoku. Never ask me for a password or API key in chat, or for a verification code. When Revdoku tools are connected, verify the connection, tell me you’re ready, and ask what I want to publish.

Copy Prompt

or

Create Free Account

---

[View the canonical page](https://revdoku.com/blog/how-to-publish-an-ai-generated-site-on-google-firebase-hosti/) · [Browse llms.txt](https://revdoku.com/llms.txt)