Building a Portfolio/Resume Site with Gatsby, Part 4 - Automating deploys to Firebase with GitHub Actions

This post is the fourth in a series and was originally published on Dev.to.

Quick recap. My personal website sucks. I’m updating it using Gatsby and the Novela theme by narative, because it’s popular, and I’m basic.

• GitHub Repo for this website
• My personal website

FYI, I’m using a Mac, so there may be some Mac-specific commands.

Copy 
1✔  Success! Use this token to login on a CI server:
2
3[onebigassstringthatisyourtoken]
4
5Example: firebase deploy --token "$FIREBASE_TOKEN"

• Copy your token and/or don’t close your terminal so you can copy it later
• Login to GitHub and go to your site’s repo and click on the Settings navigation tab
  
• Click Secrets in the left navigation menu
  
• Click the New Secret button
  
• For Name, enter ‘FIREBASE_TOKEN’
• For Value, enter the Firebase token you copied earlier from Terminal
• Click the Add Secret button
  

You should see the new secret in your GitHub repo. Here’s mine.

Add GitHub Actions to automate deployment

• In your site’s repo in GitHub, click on Actions navigation tab
  
• Click the Setup this Workflow button under the Simple Workflow section
  
• Change your Actions YAML name and click the Start Commit button (I named mine build-deploy.yml)
  
• Add a commit subject and message and click the Commit New File button
• In Terminal, cd to site’s root directory
• git checkout main
• git pull (your build-deploy.yml file should pull down to your local machine)
• Open ’./.github/workflows/build-deploy.yml’
• Go the the GitHub Action for Gatsby CLA and click the Use Latest Version button
  
• Copy the text and paste it at the top of your build-deploy.yml file
  
• Go the the GitHub Action for Firebase and click the Use Latest Version button
  
• Copy the text and paste it at the top of your build-deploy.yml file below the Gatsby action you pasted earlier
  
• In your build-deploy.yml file, add your build and deploy and save. Here’s mine.

Copy 
1# This is a basic workflow to help you get started with Actions
2
3name: Build and Deploy
4# Controls when the action will run. Triggers the workflow on push or pull request
5# events but only for the main branch
6on:
7  # Gavin, 20200802: Removing on-push, because I only want PRs to trigger this job
8  push:
9    branches: [ main ]
10
11# A workflow run is made up of one or more jobs that can run sequentially or in parallel
12jobs:
13  # This workflow contains a two jobs, "build" and "deploy"
14  build:
15    name: Build and Deploy
16    runs-on: ubuntu-latest
17    steps:
18    - name: Checkout Repo
19      uses: actions/checkout@master
20    - name: Clean Gatsby Site
21      uses: jzweifel/gatsby-cli-github-action@master
22      with:
23        gatsby-arg: clean
24    - name: Build Gatsby Site
25      uses: jzweifel/gatsby-cli-github-action@master
26      with:
27        gatsby-arg: build
28    # Gavin, 202008014: Moved this up from its own Deploy job into this job ()
29    - name: Deploy to Firebase
30      uses: w9jds/firebase-action@master
31      with:
32        args: deploy --only hosting
33      env:
34        FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

Loosen your .gitignore restrictions and push your changes

• Open ’./.gitignore’
• In your .gitignore file, unignore node_modules and public (for building and deploying) and save. Here’s mine.

Copy 
1# Logs
2logs
3*.log
4npm-debug.log*
5yarn-debug.log*
6yarn-error.log*
7
8# Runtime data
9pids
10*.pid
11*.seed
12*.pid.lock
13
14# Directory for instrumented libs generated by jscoverage/JSCover
15lib-cov
16
17# Coverage directory used by tools like istanbul
18coverage
19
20# nyc test coverage
21.nyc_output
22
23# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24.grunt
25
26# Bower dependency directory (https://bower.io/)
27bower_components
28
29# node-waf configuration
30.lock-wscript
31
32# Compiled binary addons (http://nodejs.org/api/addons.html)
33build/Release
34
35# Dependency directories
36jspm_packages/
37# Gavin, 20200719: Including the Novela theme directory under node_modules
38# Gavin, 20200802: Including all under directory under node_modules
39#node_modules/*
40#!node_modules/@narative/
41#node_modules/@narative/*
42#!node_modules/@narative/gatsby-theme-novela/
43
44# Typescript v1 declaration files
45typings/
46
47# Optional npm cache directory
48.npm
49
50# Optional eslint cache
51.eslintcache
52
53# Optional REPL history
54.node_repl_history
55
56# Output of 'npm pack'
57*.tgz
58
59# dotenv environment variables file
60.env
61
62# gatsby files
63.cache/
64
65# Gavin, 20200802: Including public
66#public
67
68# Mac files
69.DS_Store
70
71# Yarn
72yarn-error.log
73.pnp/
74.pnp.js
75# Yarn Integrity file
76.yarn-integrity
77
78.netlify/

• In Terminal, gatsby clean
• git add --all
• git commit -a -m "Added GitHub actions to automate build and deploy. Also added the 'node_modules' folder and the 'public' folder"
• git push -u origin main

So… Great. How can you tell if this works? When you pushed you your main repo to origin (GitHub), the action should have automatically run. Your Action will run when you push to your main branch, merge a PR into your main branch, or manually re-run your Action. I’ll describe how to re-run an Action manually because everything for it will apply to the other automated runs.

• In your GitHub repo, click on Actions.
  
• You can see your Actions on the left and your Action running on the right, if it’s running (You can also see my failures on the right in the screenshot). Click on the Action you just created.
  
• Click on the most recent run of your Action. It might be a failure. It doesn’t matter, just click it.
  
• Click Re-run jobs > Re-run all jobs.
  
• Your Action will queue, then run. Its status will change to In Progress and the spinners will start spinning.
  
• If you click on the Action in the left nav panel, you can see it run (or troubleshoot failures).
  

Boom! Now your Gatsby site is automatically building and deploying when you merge a pull request to your main branch. Professional level CI on a personal site, easy, and free. Is it overkill? Maybe. Am I going to continue overkilling my personal site and doing write-ups like this? Probably.