Publish Free Static Websites With Firebase, Hugo and Google Cloud Builder -- Part 2
Tags: webdev, serverless, beginners
Published: 2019-05-02 21:32:39

---
title: Publish Free Static Websites With Firebase, Hugo and Google Cloud Builder -- Part 2
published: true
description: Host a static website on Firebase Hosting, with continuous integration using Google Cloud Builder, designed with the Hugo static site platform
tags: webdev, serverless, beginners
---


[In Part 1](https://tonym.us/publish-free-static-websites-with-firebase-hugo-and-google-cloud-builder-part-1.html), 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](https://cloud.google.com/cloud-build/) to build and publish upon push.

## Open Your Cloud Shell
[In Part 1](https://tonym.us/publish-free-static-websites-with-firebase-hugo-and-google-cloud-builder-part-1.html), 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](https://cloud.google.com/shell/docs/quickstart)


## Create a Firebase Site & Configure Your Project
First, authenticate your cli
```
# --no-localhost let's us authenticate our cloud shell by code
$ firebase login --no-localhost
```

Create a site using the [firebase console](https://console.firebase.google.com)

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](https://cloud.google.com/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](https://github.com/GoogleCloudPlatform/cloud-builders-community)

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