Automate Your Hugo Website Deploys
Tags: hugo, firebase, github, ci
Published: 2020-01-27 18:07:47

---
title: "Automate Your Hugo Website Deploys"
published: true
tags: [ "Hugo", "Firebase", "GitHub", "CI" ]
description: "A quick walkthrough on setting up a GitHub Action to build and deploy your Hugo generated, static HTML website"
---

My website, [EvanHalley.dev](https://evanhalley.dev), exists as a bunch of Markdown files on GitHub*.  I use [Hugo](https://gohugo.io) to turn the markdown into HTML, which then gets deployed to Firebase.  The process is super straightforward.

1. Write new content, like this post, and commit it to GitHub.
2. Build the HTML files and associated assets using `hugo` on the command line.

```
hugo --minify --gc --cleanDestinationDir
```

3. Using the Firebase CLI, deploy everything to Firebase.

```
firebase deploy --only hosting
```

This is not *that* much work, but then I heard of [GitHub actions](https://github.com/features/actions).

> GitHub Actions makes it easy to automate all your software workflows, now with world-class CI/CD. Build, test, and deploy your code right from GitHub. Make code reviews, branch management, and issue triaging work the way you want.

GitHub Actions make it really easy to trigger an event based on some repository action.  Naturally, I thought it would be nice if I could deploy my website to Firebase whenever I pushed new commits it's GitHub repository.  It was pretty easy, leveraging two GitHub Actions, [GitHub Actions for Firebase](https://github.com/marketplace/actions/github-action-for-firebase) and [Hugo Setup](https://github.com/marketplace/actions/hugo-setup).

My build and deploy action is intuitive.

The trigger is a `push` to `master`.

```yml
name: Build & deploy

on:
  push:
    branches: 
    - master
```

First step, checkout the `master` branch.

```yml
jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@master
```

Next, download Hugo using the Hugo Setup GitHub Action.

```yml
- name: Setup Hugo
  uses: peaceiris/actions-hugo@v2.2.0
  with:
    hugo-version: '0.63.1'
```

Then, build the HTML and associated assets.

```yml
- name: Build with Hugo
  run: hugo --gc --minify --cleanDestinationDir
```

Finally, deploy the generated HTML to Firebase, using the GitHub Actions for Firebase.

```yml
- name: Deploy to Firebase
  uses: w9jds/firebase-action@master
  with:
    args: deploy --only hosting
  env:
    FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
```

The cool thing about this is that GitHub actions exist as source code in the repository they service, so you can edit them in your development environment. Once you push them to GitHub, they are live and actionable.

![GitHub Action in action](https://dev-to-uploads.s3.amazonaws.com/i/xfbuydq5k6rmt9yp01ng.jpg)

If you are in the niche of writers who host their Hugo site on Firebase, I hope you find this useful.  Please find the full build script on [Git Hub](https://gist.github.com/evanhalley/4bd17ebc9fa8df26ede5efca2d420381)

*An aside: I've been writing on the web in various forms since the early 2000s.  Most of my work is still up at https://emuneee.wordpress.com and https://emuneee.com.  I got tired of having to keep my Wordpress installation updated.  I also wanted to free myself from needing to do server maintenance as well (ie. updating Linux or MySQL).  Right before thinking of transitioning to a static HTML website, I began doing my notetaking in Markdown.*  

*With all of this in mind, moving to a static HTML website was perfect.  I found [Hugo](https://gohugo.io), which enabled me to turn my markdown into HTML to host on the web.  I found Firebase Hosting for hosting my HTML content.  Using Firebase allows me to host my site for free and benefit from Google's global content delivery network.*