How I Host Static Sites With Automatic Deploy on Green

This site, jeffcarp.com, is written in markdown and uses the Hugo static site generator. This post walks you through how I set automatic building, testing, and deployment to Firebase hosting.

Project Setup

I assume we’re starting from a working Hugo project. For more on how to set that up, see the Hugo docs.

Testing Setup

I want the site to be Deploy-on-Green (i.e. only if it passes the tests). The CI setup I use is GCP Cloud Build. I develop and debug these tests locally using the local-cloud-build command documented here. The steps I want are:

1. Verify Hugo build succeeds

There’s already a Hugo community build step available, so I use that.

2. Verify all pages are AMP-valid

This blog uses AMP HTML. I use the amphtml-validator Node package to verify all pages are valid. Here’s what the relevant parts of my package.json look like for that:

{
  "scripts": {
    "test": "amphtml-validator `find public -type f -name '*.html'"
  },
  "devDependencies": {
    "amphtml-validator": "^1.0.23"
  }
}

3. Deploy to Firebase hosting

There’s a Firebase community build step available as well, so I use that.

CI Setup

Now to put everything together. Here’s the cloudbuild.yaml file I have for the project. The hugo_build and npm_install steps run in parallel to each other. If everything succeeds, the last step deploys to Firebase.

steps:
- name: 'gcr.io/$PROJECT_ID/hugo'
  args: []
  waitFor: ['-']
  id: hugo_build
- name: node:10.10.0
  entrypoint: 'npm'
  args: ['install']
  id: npm_install
  waitFor: ['-']
- name: node:10.10.0
  entrypoint: 'npm'
  args: ['test']
  waitFor: ['hugo_build', 'npm_install']
- name: 'gcr.io/$PROJECT_ID/firebase'
  args: ['deploy']
  secretEnv: ['FIREBASE_TOKEN']
secrets:
- kmsKeyName: '{kmsKeyName}'
  secretEnv:
    FIREBASE_TOKEN: '{FIREBASE_TOKEN}'

The secret Firebase key is set up as described here.

Then it’s a matter of adding the build trigger and pointing at your cloudbuild.yaml, and you’re done.

Now whenever I push to the master branch with any changes in my site’s directory, it triggers a new build.

Contents (top)