SpaceX

Ignition sequence start

GitHub Actions to deploy to Firebase Hosting

published:  September 27, 2020
last modified:  November 14, 2020

Image: SpaceX; Unsplash

Note: Unlike the last two posts, this one very definitely is for only my fellow web geeks—and, anyway, they’re the only folks likely to be using Firebase Hosting, I would think.

I mentioned in a footnote to my previous post that my “lurch” among hosts now has this site on Firebase. If you’ve read both the original “Goodbye and hello” and its semi-retconned second part, you may remember my describing why I chose not to use Firebase. If so, you then may also wonder what changed my mind.

Actually, there were multiple reasons:

  • Last month, Firebase belatedly adopted Brotli compression, its previous lack of which had been a deal-breaker for me.
  • I had already been an admirer of the performance of the Fastly content delivery network (CDN) that Firebase uses, and found it was consistently better than the CDN setups provided with the free tiers for the other three hosts I’d been using and testing (Netlify, Render, and Vercel).
  • In the last few days, I tinkered around and was able to come up with a GitHub Action that made it possible to deploy (in Firebase terminology) to Firebase Hosting every time I pushed a change to the site repo’s default branch—i.e., making it as easy as when using the repo with those other three hosts. Yes, you can just do a local site build and then invoke firebase deploy, but that’s an extra step; I’ve kinda gotten accustomed to the ease of the push-to-repo method and didn’t want to give it up.

The purpose of this post is to share with you the applicable GitHub Actions for using Firebase Hosting with my two favorite and recommended static site generators (SSGs): Hugo and Eleventy.

The GitHub Action for Hugo purposely does not use the widely used and excellent GitHub Actions for Hugo by Shohei Ueda (peaceiris) to install Hugo during the build process, because—as was the case with Andrew Connell, whose example I followed and to whom I am grateful for the information he imparted in “Automated Hugo Releases With GitHub Actions”—I preferred having more control over that exact part.

Enough talk; on with the GitHub Actions. Of course, each is based on two assumptions: (a.) you’ve initialized your repo for Firebase, thus creating the .firebaserc and firebase.json files mentioned at the end; and (b.) you’ve stored your Firebase token—called below by ${{ secrets.FIREBASE_TOKEN }}—in your repo’s Secrets. If you don’t have a Firebase token, you get that with firebase login:ci from the CLI, as explained in the documentation. You’ll note that I have npm run build in the Build site with Hugo step; but that’s peculiar to my NodeJS-using Hugo repo (chiefly because of PostCSS and Tailwind CSS), so you may want to use a variation of that, instead, if you’ve kept your Hugo repo Node-free. The Hugo version shown is the latest as of this post’s original publication; set it as you wish.[1] When I use Hugo, I use the extended version because, sometimes, I support SCSS through Hugo Pipes; I switch the themes back and forth among SCSS, PostCSS without Tailwind, and PostCSS with Tailwind as situations warrant.[2]

For Hugo

name: CI-Hugo-site-to-Firebase

on:
  push:
    branches:
      - main

env:
  HUGO_VERSION: 0.75.1 # steps below will pick extended version

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout default branch
        uses: actions/checkout@v2
      - name: Download Hugo v${{ env.HUGO_VERSION }} Linux x64
        run: "wget https://github.com/gohugoio/hugo/releases/download/v${{ env.HUGO_VERSION }}/hugo_extended_${{ env.HUGO_VERSION }}_Linux-64bit.deb -O hugo_extended_${{ env.HUGO_VERSION }}_Linux-64bit.deb"
      - name: Install Hugo
        run: sudo dpkg -i hugo*.deb
      - name: Install dependencies
        run: npm install
      - name: Build site with Hugo
        run: npm run build
      - name: Install Firebase Tools
        run: npm install firebase-tools
      - name: Deploy to Firebase
        run: npx firebase deploy
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
          # Other args should come from .firebaserc and firebase.json

For Eleventy

Note: Other than obviously not downloading and installing Hugo, this one for Eleventy also was different because, in the Deploy to Firebase section, I had to add npx firebase use default to make this work with the project, for some reason I don’t understand.

name: CI-Eleventy-site-to-Firebase

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout default branch
        uses: actions/checkout@v2
      - name: Install dependencies (including Eleventy)
        run: npm install
      - name: Build site with Eleventy
        run: npm run build
      - name: Install Firebase Tools
        run: npm install firebase-tools
      - name: Deploy to Firebase
        run: npx firebase use default && npx firebase deploy
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
          # Other args should come from .firebaserc and firebase.json

Note: Having learned all I wanted to learn from the experience, I decided a few days later to leave Firebase Hosting.


  1. Just be sure the version conforms to how it shows up in the Hugo release filename, since this reference helps build that name for the download process in the GitHub Action; always check the Hugo releases page to be sure about the accurate filename. ↩︎

  2. I now have the Hugo version of this site’s repo set up so that there are three themes for Hugo’s use—one with purely SCSS, one with CSS-on-PostCSS (but still no Tailwind), and one with Tailwind. So, now, depending on which I want to use, I can simply switch themes in the site’s config.yaml file. ↩︎

Other posts

Next: Forward PaaS

Previous: A normal person’s guide to static website hosting