Home
Spaces

Deploy Hugo site at Firebase

How-to deploy Hugo generated static site at Google Firebase service

Assumptions

The following steps need to be cleared prior to follow the how-to:

  1. Understand what Hugo SDK is and how to use it

  2. Make ready your site public files by issuing hugo command

  3. A Firebase account with a project assigned to host your site

Google Firebase

Google Firebase is a comprehensive mobile and web development platform provided by Google. Firebase provides a range of features that cover various aspects of app development, including authentication, real-time database, cloud storage, hosting, cloud functions, and more.

It is cheaper an most suitable option than GCP for personal projects.

LogoDocumentación  |  FirebaseFirebase
LogoFirebase CLI reference  |  Firebase DocumentationFirebase
LogoHost on FirebaseGoHugoIO

Setup Firebase Project & Tools

Once logged into Firebase and launched the (first) project, please follow the next steps:

  1. Install the CLI tool to talk with Firebase npm install -g firebase-tools

  2. Then we need to login firebase login

  3. And perform the initialization in the Hugo root working directory; firebase init

  4. Firebase features needed to deploy our site From here:

    • Choose Hosting in the feature question

    • Choose the project you just set up

    • Accept the default for your database rules file

    • Accept the default for the publish directory, which is public

    • Choose “No” in the question if you are deploying a single-page app

  5. Now we're done to deploy our site in our Firebase project, by issuing: firebase deploy --only hosting

If everything is fine the output looks like

fcolomer@puzzle:~/repos/preventa.tech$ firebase deploy --only hosting

=== Deploying to 'pvtech-site'...

i  deploying hosting
i  hosting[pvtech-site]: beginning deploy...
i  hosting[pvtech-site]: found 41 files in public
✔  hosting[pvtech-site]: file upload complete
i  hosting[pvtech-site]: finalizing version...
✔  hosting[pvtech-site]: version finalized
i  hosting[pvtech-site]: releasing new version...
✔  hosting[pvtech-site]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/pvtech-site/overview
Hosting URL: https://pvtech-site.web.app

Last but not least important step: https://firebase.google.com/docs/hosting/custom-domain

Last updated