Blog   About  Archives

Setting up CI with Hugo, Firebase and Gitlab CI

With this post we will explore how to automate deployment for your static site. These days static sites have become really popular and it’s a quick and easy way to host blogs, etc.

In fact, my own site is hosted using a combination of Hugo + Firebase. I’ve added in the automation using Gitlab CI. After using the instructions listed here to host my site using Firebase, I wanted to simplify the process of having to add everything to my git repo each time and then deploying on firebase. A quick side note, I also got a custom domain from Google Domains.

So, I started off by generating a Firebase deploy token using

firebase login:ci

in the root of my project directory. Then I proceeded to add this token to my Project CI/CD settings within Gitlab

Setting Firebase Token

Once the token was all set up, I entered the following details into my firebase.json file

{
  "hosting": {
    "public": "public"
  }
}

Finally, it was the time to create the .gitlab-ci.yml file in the root of my repo. I found this docker image to leverage as the image component of my .yml file. This particular image has node, firbase cli and hugo binary packeged in it. After getting the details for the image, this is how my .gitlab-ci.yml looked

variables:
    GIT_SUBMODULE_STRATEGY: recursive
    GIT_SSL_NO_VERIFY: "true"

stages:
    - deploy

deploy:
    stage: deploy
    image: nohitme/hugo-firebase
    script:
        # build site
        - cd ${CI_PROJECT_DIR}
        - hugo --theme=one
        # upload
        - firebase deploy --project hugo-one-site --token ${FIREBASE_TOKEN}
    only:
        - master

Once this was done, all I needed to do then was to create some content and push to my git repo. Sadly, firebase doesn’t offer a clean way right now to delete older deployments. There are some experimental gists out there, but I’ll stick to the manual clean up for now.

Written on Feb 18, 2019.