Publish Free Static Websites With Firebase, Hugo and Google Cloud Builder -- Part 2

In Part 1, we completed our development environment, including setting up Hugo and our repo.

Here we'll publish our site to Firebase Hosting, and create the CI tools on Google Cloud Build to build and publish upon push.

Open Your Cloud Shell

In Part 1, we enhanced our cloud shell with hugo and set up our repo. In Part two, we'll use it to create the builder and configure hosting.

See the Quickstart for complete instructions

Create a Firebase Site & Configure Your Project

First, authenticate your cli

:::bash
# --no-localhost let's us authenticate our cloud shell by code
$ firebase login --no-localhost

Create a site using the firebase console

Run firebase init within your hugo project, selecting hosting and your site name

firebase init

Your First Deploy

# build the site
$ hugo
# deploy
$ firebase deploy
➜  quickstart git:(master) ✗ firebase deploy

=== Deploying to 'xxxx'...

i  deploying hosting
i  hosting[xxxx]: beginning deploy...
i  hosting[xxxx]: found 15 files in public

Create A Cloud Build Workflow

Google Cloud Build takes a unique design approach, and avoids the traditional shell-script interface for defining the build steps.

Let's break down an example cloudbuild.yaml:

steps:
- name: gcr.io/$PROJECT_ID/hugo
- name: gcr.io/$PROJECT_ID/firebase
  args: ['deploy']

In this case, each step is defined as a unique docker image (which, with few exceptions, you host within your GCP project), along with arguments to those steps.

As such, any step referenced must first be built and pushed to the project's Docker registry. To make this easy, user-contributed steps are found in the Cloud-Builders-Community Repo

Even something as basic as mkdir must be defined as a docker image

Each step shares a /workspace directory, allowing each step to pass results to the following step.

Build Hugo & Firebase Build Steps

$ git clone git@github.com:GoogleCloudPlatform/cloud-builders-community.git; cd cloud-builders-community
$ pushd hugo     && gcloud builds submit . && popd
$ pushd firebase && gcloud builds submit . && popd

Configure Cloud Build for Hugo, and Submit a Build

Within the hugo-sample-project directory, add cloudbuild.yaml

steps:
- name: gcr.io/$PROJECT_ID/hugo
- name: gcr.io/$PROJECT_ID/firebase
  args: ['deploy']

And submit a build

$ gcloud builds submit .

Gcloud will push your hugo source files and cloudbuild.yaml to trigger your build on GCP

Testing and Wrap Up

At this point visit your firebase site URL (it will display in the cloudbuild log) -- you should see your site deployed.

With all of this work we've constructed :

• a scalable static website -- the could be a React SPA or a personal blog
• a cloud-hosted development environment, globally accessible and always online
• an automated CI platform allowing multiple developers to test and deploy changes