> Canonical URL: https://codingcat.dev/post/firebase-multisite-hosting # Firebase Multisite Hosting โœ๏ธ Blog PostMay 20, 2022[![](/logos/firebase/firebase-symbol.png)![](/logos/firebase/firebase-symbol.png)Firebase](/topic/firebase)[![](/logos/tags/angular-symbol-light.svg)![](/logos/tags/angular-symbol-dark.svg)Angular](/topic/angular)[![](/logos/tags/google-cloud-symbol-light.svg)![](/logos/tags/google-cloud-symbol-dark.svg)Google Cloud](/topic/google-cloud)[#DevOps](/topic/devops)[![](/logos/tags/github-symbol-light.svg)![](/logos/tags/github-symbol-dark.svg)GitHub](/topic/github)[![](/logos/tags/docker-symbol-light.svg)![](/logos/tags/docker-symbol-dark.svg)Docker](/topic/docker)[![](/logos/tags/nextjs-symbol-light.svg)![](/logos/tags/nextjs-symbol-dark.svg)Next.js](/topic/nextjs)[![](/logos/tags/react-symbol-light.svg)![](/logos/tags/react-symbol-dark.svg)React](/topic/react) # Firebase Multisite Hosting ![](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/acce9e900e103ce76fae5592744d9b12e584806b-1280x720.jpg?w=1920&h=1080&q=82&fit=max&auto=format)[@CodingCatDev62.5K / 100K Subscribers Goal](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Subscribe on YouTubeโ†’](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Watch on YouTube App โ†—](https://www.youtube.com/watch?v=bLrZxoC0VlQ&list=UUnKZ8gEb78zXKMi1ns-IQ2g)[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson) This tutorial will focus on a very easy solution to having multiple web projects hosted under the same domain. > Firebase limits a single domain for all of your projects. Once you have associated this domain you not be able to use it again for any other project. For example we would like to use lessons.ajonp.com but since we are using ajonp-ajonp-com for ajonp.com domain we are unable to use this. > We also wanted to mention that the video may not match exactly what is in the lesson7 repo, we are sorry about that, initially we were going to use two projects with a single domain. Please pull the repo directly and these steps should help you get to a finished setup quickly. ## Steps - Switching Firebase Plans - Create 4 Firebase Hosting Sites - Example Multiple Hugo Themes deploying to Firebase Multisite - Example Angular Project with Multiple projects deploying to Firebase Multisite - Google Cloud Builder - Trigger # Firebase Pricing Plans ## New Project If you have just created a new project you will need to upgrade in order to use Multisite hosting. ![](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/b7025c975bd9e7cdfbee229a9a5f4569a023ca22-951x197.png?w=951&q=82&fit=max&auto=format) > Firebase Pricing is ever changing, so make sure to check on this. Hosting Free limit on the Blaze plan ![](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/cabf10ac2119a3ae4e84d4c995dcc08850c64b85-1088x146.png?w=1088&q=82&fit=max&auto=format) # Create 4 Firebase Hosting Sites You can name these whatever fits your project, if you using ajonp* you will probably have issues as we am already using those. Example for your site: - mysite - mysite-admin - mysite-amp - mysite-app ![](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/366d44638a2b1a956bd18c7bb86c3cfb7d2ef5c9-1000x548.png?w=1000&q=82&fit=max&auto=format)![](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/6115128e8cff51cce814bbc80f5e55c8e88f9ee0-657x561.png?w=657&q=82&fit=max&auto=format) # Example Multiple Hugo Themes deploying to Firebase Multisite > You don't need to install anything if you just deploy to Google Cloud. In this lesson reference Cloud Build Also see https://ajonp.com/lessons/google-cloud-repositories-ci-cd for more details on CI/CD. Once you clone [https://github.com/AJONPLLC/lesson-7-firebase-multisite-hosting](https://github.com/AJONPLLC/lesson-7-firebase-multisite-hosting.git) you can run it locally, but you must build out all of the sites before doing this. ## Remove git reference Please remove the reference to AJONPLLC, then you can add any git repo you would like. Copied! ๐Ÿพ ``` git remote rm origin ``` ## Add new reference Create a new github site (or Gitlab or Google Cloud or...) Then add the new repo back to your site using this command, replace **ajonp/a-sample-repo.git** with yours. Copied! ๐Ÿพ ``` git remote add origin https://github.com/ajonp/a-sample-repo.git git push -u origin master ``` ## Steps for building hugo sites - Git Submodule commands, make sure you have [Git CLI](https://git-scm.com/downloads). Copied! ๐Ÿพ ``` git submodule init git submodule update --recursive --remote ``` This will update to the latest remote builds for ajonp.com, including both the content and themes that we host publicly - Hugo commands, make sure you have the [Hugo CLI](https://gohugo.io/getting-started/installing/) installed. Copied! ๐Ÿพ ``` hugo -d dist/ajonp -v -t ajonp-hugo-ionic --config config.toml,production-config.toml hugo -d dist/ajonp-amp -v -t ajonp-hugo-amp --config config.toml,production-config.toml ``` # Example Angular Project with Multiple projects deploying to Firebase Multisite ## Steps for building Angular sites NPM commands, make sure you have [Node Js](https://nodejs.org/en/download/) installed. Copied! ๐Ÿพ ``` npm install ``` Angular commands, make sure you have the [Angular CLI](https://cli.angular.io/) installed. Copied! ๐Ÿพ ``` ng build --prod --project ajonp-admin ng build --prod --project ajonp-app ``` Serve locally using firebase, make sure you have [Firebase CLI](https://firebase.google.com/docs/cli/) Copied! ๐Ÿพ ``` firebase serve ``` # Google Cloud Builder - Trigger Please add a trigger to your repository reference [Firebase CI/CD lesson](/post/google-cloud-repositories-ci-cd) for more details. ## Cloud Build Now after having tried all of the manual build steps out, you really don't need any of them. You can run all of this in the cloud by setting up the commit trigger from above. cloudbuild.yaml Copied! ๐Ÿพ ``` steps: # Pull in the required submodules for our themes and content - name: gcr.io/cloud-builders/git args: ['submodule', 'init'] - name: gcr.io/cloud-builders/git args: ['submodule', 'update', '--recursive', '--remote'] # Install all of our dependencies - name: 'gcr.io/cloud-builders/npm' args: ['install'] # Build the hugo image - name: 'gcr.io/cloud-builders/docker' args: ['build', '-t', 'gcr.io/$PROJECT_ID/hugo', './dockerfiles/hugo'] # Build ajonp-hugo-ionic -> dist/ajonp - name: 'gcr.io/$PROJECT_ID/hugo' args: [ 'hugo', '-d', 'dist/ajonp', '-v', '-t', 'ajonp-hugo-ionic', '--config', 'config.toml,production-config.toml' ] # Build ajonp-hugo-amp -> dist/ajonp-amp - name: 'gcr.io/$PROJECT_ID/hugo' args: [ 'hugo', '-d', 'dist/ajonp-amp', '-v', '-t', 'ajonp-hugo-amp', '--config', 'config.toml,production-config.toml' ] # Build the hugo image - name: 'gcr.io/cloud-builders/docker' args: ['build', '-t', 'gcr.io/$PROJECT_ID/ng:latest', './dockerfiles/ng'] # Build ajonp-admin -> dist/ajonp-admin - name: 'gcr.io/$PROJECT_ID/ng:latest' args: ['build', '--prod', '--project', 'ajonp-admin'] # Build ajonp-admin -> dist/ajonp-app - name: 'gcr.io/$PROJECT_ID/ng:latest' args: ['build', '--prod', '--project', 'ajonp-app'] # Build the firebase image - name: 'gcr.io/cloud-builders/docker' args: ['build', '-t', 'gcr.io/$PROJECT_ID/firebase', './dockerfiles/firebase'] # Deploy to firebase - name: 'gcr.io/$PROJECT_ID/firebase' args: ['deploy', '--token', '${_FIREBASE_TOKEN}'] # Optionally you can keep the build images # images: ['gcr.io/$PROJECT_ID/hugo', 'gcr.io/$PROJECT_ID/firebase'] ``` ## Cloud Build locally If you would like to debug locally please make sure you read [Building and debugging locally](https://cloud.google.com/cloud-build/docs/build-debug-locally). This will require that you have [Docker](https://docs.docker.com/install/#server) installed locally. ### Install necessary components Install docker-credential-gcr Configure Docker Check to see if version is working In the root directory of your project, you can then run this command (**don't forget** the "." as this tells Cloudbuild to use the current directory) You will notice that this output matches what happens in the cloud when Google Cloud Build executes Copied! ๐Ÿพ ``` Starting Step #0 Step #0: Pulling image: gcr.io/cloud-builders/git Step #0: Unable to find image 'gcr.io/cloud-builders/docker:latest' locally Step #0: latest: Pulling from cloud-builders/docker Step #0: 75f546e73d8b: Pulling fs layer Step #0: 0f3bb76fc390: Pulling fs layer Step #0: 3c2cba919283: Pulling fs layer Step #0: 252104ea43c6: Pulling fs layer Step #0: 252104ea43c6: Waiting Step #0: 3c2cba919283: Verifying Checksum Step #0: 3c2cba919283: Download complete Step #0: 0f3bb76fc390: Verifying Checksum Step #0: 0f3bb76fc390: Download complete Step #0: 75f546e73d8b: Verifying Checksum Step #0: 75f546e73d8b: Download complete Step #0: 75f546e73d8b: Pull complete Step #0: 0f3bb76fc390: Pull complete Step #0: 3c2cba919283: Pull complete ``` Google Cloud Builder Output ![](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/3021d2fce0273633d3b364014041933ad599b297-920x454.png?w=920&q=82&fit=max&auto=format) ## Resources, Links & Official Documentation - **Watch on YouTube: ** [Firebase Multisite Hosting Full Video](https://www.youtube.com/watch?v=bLrZxoC0VlQ) (plus [Subscribe to CodingCat.dev](https://www.youtube.com/@CodingCatDev?sub_confirmation=1)) - **Checkout Github Repo for full solution: ** [https://github.com/AJONPLLC/lesson-7-firebase-multisite-hosting](https://github.com/AJONPLLC/lesson-7-firebase-multisite-hosting) - **๐ŸŽฅ YouTube: ** [https://link.ajonp.com/youtube](https://link.ajonp.com/youtube) - **๐ŸŒŽ Site: ** [https://link.ajonp.com/๐Ÿ˜บ](https://link.ajonp.com/๐Ÿ˜บ) - **๐Ÿ“ฆ GitHub: ** [https://link.ajonp.com/github](https://link.ajonp.com/github) - **๐ŸŽ“Lessons: ** [https://link.ajonp.com/lessons](https://link.ajonp.com/lessons) - **๐Ÿ—žAJโ€™s Week in Web: ** [https://link.ajonp.com/week-in-web](https://link.ajonp.com/week-in-web) - **๐Ÿ’ฌ Slack: ** [https://link.ajonp.com/slack](https://link.ajonp.com/slack) - **๐Ÿฆ Twitter: ** [https://link.ajonp.com/twitter](https://link.ajonp.com/twitter) - **๐Ÿ’ฌ Slack: ** [https://bit.ly/ajonp-slack-invite](https://bit.ly/ajonp-slack-invite) - **๐Ÿฆ Twitter: ** [https://bit.ly/ajonp-twitter](https://bit.ly/ajonp-twitter) - [**Firebase Documentation:**](https://firebase.google.com/docs) Firestore, Data Connect, Authentication, App Check, and Cloud Functions - [**Angular Developer Guide:**](https://angular.dev/overview) Signals, standalone components, and enterprise Angular workflows - [**Google Cloud Architecture & Docs:**](https://cloud.google.com/docs) Cloud Run, Kubernetes Engine, BigQuery, and Vertex AI guides ## Related CodingCat.dev Tutorials & Podcast Episodes - [**Deploy Angular & Next.js apps with App Hosting, now GA! in Firebase: Web Architecture & Implementation Guide**](/post/firebase-2025-04-apphosting-general-availability): Hands-on web engineering breakdown of "Deploy Angular & Next.js apps with App Hosting, now GA!" (2025-04-09). Learn how to integrate Firebase, Google Cloud, Web... - [**What web frameworks does Firebase App Hosting support?: Web Architecture & Implementation Guide**](/post/firebase-2025-06-app-hosting-frameworks): Hands-on web engineering breakdown of "What web frameworks does Firebase App Hosting support?" (2025-06-05). Learn how to integrate Firebase, Google Cloud, Web ... - [**Angular and React Bindings for Data Connect in Firebase: Web Architecture & Implementation Guide**](/post/firebase-2025-04-dataconnect-web-bindings): Hands-on web engineering breakdown of "Angular and React Bindings for Data Connect" (2025-04-29). Learn how to integrate Firebase, Google Cloud, Web Dev, SQL in... ## Frequently Asked Questions (FAQ) ### What are the main takeaways from Firebase Multisite Hosting? Creation of multiple sites within Hugo (main and amp), as well as multiple sites written in Angular (admin and app). Firebase Multisite hosting, using Hugo and Angular: ๐ŸŽ“ Lesson: https://ajonp.com/lessons/7-firebase-multisite-hosting/ - Switching Firebase Plans - Create 4 Firebase Hosting Sites - Example Multiple Hugo Themes deploying to Firebase Multisite - Example Angular Project with Multiple projects deploying to Firebase Multisite - Google Cloud Builder - Tr, today's lesson will cover firebase multi-site hosting with angular and Hugo you may notice that the bottom of your firebase hosting site you have this multiple sites upgrade I'll cover in the lesson why going to the blaze plan is the best option for you you have to do this in order to do the multi site host and firebase don't worry though I still don't encourage charges while using this type of se... Throughout this post, Alex Patterson breaks down real-world implementation details for Firebase, Angular, Google Cloud so developers can apply these patterns directly in production. ### How do you implement Firebase best practices in production? When adopting Firebase and Angular in a production stack, start by validating your configuration against the [**Firebase Documentation**](https://firebase.google.com/docs) (Firestore, Data Connect, Authentication, App Check, and Cloud Functions). Focus on incremental adoption, automated testing, and observability so your team can measure performance and developer velocity improvements at each stage. ### Where can I watch the full Firebase Multisite Hosting walkthrough and find related code resources? You can watch the complete video session for [**Firebase Multisite Hosting**](https://www.youtube.com/watch?v=bLrZxoC0VlQ) on the [**CodingCat.dev YouTube channel**](https://www.youtube.com/@CodingCatDev?sub_confirmation=1). For a deeper dive into Firebase, check out our related guide: [**Deploy Angular & Next.js apps with App Hosting, now GA! in Firebase: Web Architecture & Implementation Guide**](/post/firebase-2025-04-apphosting-general-availability). ## โœ๏ธ Video Summary Firebase Multisite hosting, using Hugo and Angular: ๐ŸŽ“ Lesson: https://ajonp.com/lessons/7-firebase-multisite-hosting/ - Switching Firebase Plans - Create 4 Firebase Hosting Sites - Example Multiple Hugo Themes deploying to Firebase Multisite - Example Angular Project with Multiple projects deploying to Firebase Multisite - Google Cloud Builder - Tr โ€” today's lesson will cover firebase multi-site hosting with angular and Hugo you may notice that the bottom of your firebase hosting site you have this multiple sites upgrade I'll cover in the lesson why going to the blaze plan is the best option for you you have to do this in order to do the multi site host and firebase don't worry though I still don't encourage charges while using this type of se... โœ๏ธ Visual Architecture Diagram ## how this post connects together. Follow AJ through the pipeline topology from input contract to production output. Letโ€™s build it!โœ๏ธ Architecture Diagram: Firebase Multisite HostingDATAFLOW PIPELINEARCHITECTURE DIAGRAM[Diagram Walkthrough]Content-driven pipeline diagram for Firebase Multisite Hosting: Firebase Multisite Hosti -> System Implementation -> Edge Delivery & Telemetry.AAA Contrast Verified ## related deep dives. [All Blog Posts→](/blog)[![Dockerless Serverless GPUs: How I Built a Fast, Cheap AI SaaS with RunPod Flash](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/78383c8986667bc1eaa504786488d88f212929a8-1280x720.jpg?w=1280&q=82&fit=max&auto=format)](/post/dockerless-serverless-gpus-fast-cheap-ai-saas-with-runpod-flash)October 6, 2026[#Serverless](/topic/serverless)[![](/logos/tags/cloudflare-symbol-light.svg)![](/logos/tags/cloudflare-symbol-dark.svg)Cloudflare](/topic/cloudflare)[![](/logos/tags/python-symbol-light.svg)![](/logos/tags/python-symbol-dark.svg)Python](/topic/python)[+5](/post/dockerless-serverless-gpus-fast-cheap-ai-saas-with-runpod-flash) ### [Dockerless Serverless GPUs: How I Built a Fast, Cheap AI SaaS with RunPod Flash](/post/dockerless-serverless-gpus-fast-cheap-ai-saas-with-runpod-flash) Hosted image APIs cost 3 to 4 cents per generation. Using RunPod Flash for dockerless serverless GPUs, FlashFun.dev drops that to a fraction of a cent, turning $1 into 500 to 3,000 images. Here is the full architecture, the benchmarks, and the code. [![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![The Odin Project 2: Git & GitHub Engineering Workflows](https://cdn.sanity.io/images/hfh83o0w/production/ed2ced73d28d9e429e04e23b418bb53abf123d90-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/odin-git-and-github-workflows)November 4, 2026[![](/logos/tags/git-symbol-light.svg)![](/logos/tags/git-symbol-dark.svg)Git](/topic/git)[![](/logos/tags/github-symbol-light.svg)![](/logos/tags/github-symbol-dark.svg)GitHub](/topic/github)[#DevOps](/topic/devops)[+1](/course/odin-git-and-github-workflows) ### [The Odin Project 2: Git & GitHub Engineering Workflows](/course/odin-git-and-github-workflows) Understand how Git actually stores snapshots, master branching and interactive rebase, write atomic commits, and automate PR checks with GitHub Actions. [![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)