Hosting a Hugo site with firebase

Hosting a Hugo site with firebase

This are all the steps needed to deploy your static Hugo page on Firebase for free (until you exceed the traffic of the free tier a.k.a Spark plan).

Firebase

Setup

  1. Go to https://console.firebase.google.com and create a new project (unless you already have a project and this is just an additional component to it).
  2. Install firebase-tools (node.js) using: npm install -g firebase-tools
  3. Login to firebase (setup on your local machine) using firebase login which opens a browser and you can select your account. Use firebase logout in case you are already logged in but to the wrong account.
  4. In the root of your hugo site initialize the Firebase project with firebase init
  5. Choose Hosting in the feature question
  6. Choose the project you did just setup
  7. Accept the default for database rules file
  8. Accept the default for the publish directory which is public
  9. Choose No in the question if it is a single-page app

Deploy

Simply execute hugo && firebase deploy and your site will be up in no time.

Alternatively Create a deploy.sh file with the following content and make it executable chmod +x deploy.sh:

#!/bin/sh
rm -rf public
hugo
firebase deploy

CI Setup

  1. Generate a deploy token using firebase login:ci
  2. Setup your CI
  3. Add the token to a private variable like $FIREBASE_DEPLOY_TOKEN

This is a private secret and it should not appear in a public repository. Make sure you understand you chosen CI and that it’s not visible to others.

  1. Add a step in your build to do firebase deploy --token $FIREBASE_DEPLOY_TOKEN

Map a custom domain to a Firebase project

//TODO

Gitlab.com

Configure CI runner

  1. Get a deploy token for your Firebase project executing firebase login:ciwhich will bring up a browser with the authentication dialog and afterwards gives you a token to be used in CI
  2. In your GitLab project, go to Pipelines > Environments and then add a new environment called Production

//TODO

Michel Racic avatar
About Michel Racic
I’m a coding and technology freak. I finished once my bachelor of engineering in computer science or on german “Dipl. Ing.” and currently I’m mostly coding in Java as main language besides some stuff in C, C++, C#, HTML, JS, … - In my day job I work as a Software Engineer in Test and deal with all kind of Software from Native over Web into Mainframe where I use existing tools or write my own testing apps or libraries and the Frameworks around that they can be used in the most efficient way.
comments powered by Disqus