GCP Cloud Build

requirements

*Optional

Starting the process

Go to the project you want cloud build to deploy to and add cloudbuild.yml. Please read the GCP docs if you need help with the config. cloudbuild.yml is the file which will control your build process within GCP.

note: if you are using a theme you will want to add a step to download the template. I used a git submodule to reference my theme.

  - id: 'build get submodules'
    name: 'gcr.io/cloud-builders/git'
    args: [ 'submodule', 'update', '--init', '--recursive' ]

You way want to fork a theme before using it as a submodule.

GCP Project

You need to have a project you want to use, with cloud build and container registry enabled.

GitOps

This is out of scope for this post, but if you are looking for this you want to follow the GCP tutorial

Firebase builder

Steps

  1. Clone the google community builders to your development environment.
git clone https://github.com/GoogleCloudPlatform/cloud-builders-community.git
cd cloud-builders-community/firebase
  1. Build the docker image and push the completed image to GCP Container Repository
docker build -t gcp.io/[project-id]/firebase .

Complete list of steps:

git clone https://github.com/GoogleCloudPlatform/cloud-builders-community.git
cd cloud-builders-community/firebase
docker build -t gcp.io/[project-id]/firebase .

Hugo Builder

There are multiple ways you can build your Hugo site using Google Cloud Build. For projects with multiple builds, I would recommend using the Hugo Community Builder. For smaller projects downloading and executing Hugo every build is probably ok.

GCP - Hugo community builder

If you do not have the community builders cloned follow this, otherwise you can jump to step 2.

Steps

  1. Clone the google community builders to your development environment.
git clone https://github.com/GoogleCloudPlatform/cloud-builders-community.git
  1. You will need to navigate to the Firebase folder
cd cloud-builders-community/hugo
  1. Build the docker image and push the completed image to GCP Container Repository
docker build -t gcp.io/[project-id]/hugo .

Complete list of steps:

git clone https://github.com/GoogleCloudPlatform/cloud-builders-community.git
cd cloud-builders-community/hugo
docker build -t gcp.io/[project-id]/hugo .

You will then need to add a build step in your cloudbuild.yml

  - id: 'build frontend'
    name: 'gcp.io/[project-id]/hugo'
    args: [ 'hugo' ]

Download and Execute Hugo

An alternative to building a container image is to download a specific version of Hugo and execute the version of Hugo every time you build. ( I would not use this for an environment which changes often as there is additional of overhead during the build process )

For this scenario, you will need to set a Substitution variables in the trigger. This will pass the variable as an environment variable to cloud build.

  - id: 'get hugo release'
	name: 'gcr.io/cloud-builders/curl'
    entrypoint: '/bin/sh'
    args:
    - '-c'
    - |
      curl -sL https://github.com/gohugoio/hugo/releases/download/v${_HUGO_VERSION}/hugo_${_HUGO_VERSION}_Linux-64bit.tar.gz | tar -zxv      

for Hugo to execute you can use the git image to execute Hugo using sh.

  - id: 'execute hugo build'
    name: 'gcr.io/cloud-builders/git'
    entrypoint: '/bin/sh'
    args:
      - '-c'
      - |
        ./hugo        

Adding A trigger

The process to trigger a build is different depending on where your source is. I am going to use Google Source Repository as my code repository. GCP documentation for triggers

To create a trigger you will want to follow the GCP create and manage trigger docs

The TLDR: for triggers:

  1. Navigate to triggers page: https://console.cloud.google.com/cloud-build/triggers
  2. Create Trigger
  3. Add appropriate name, select region and other trigger parameters. You may need to add a _HUGO_VERSION variable to the trigger
  4. Make sure you have selected / chosen the correct branch.
  5. Save the trigger when you are done

Note: in the trigger setting make sure you have Firebase Admin and Service Accounts Enabled

Deploy Hugo site

Here you will need to choose where you want to deploy your site to. There are many good options, I chose to Firebase, as such I have the instructions firebase, I have added links to the documents for both GitHub and Netlify.

  • Firebase Hosting
    • firebase deploy --project=[project-id] --only=hosting
    • If you want to deploy to a site:
      • firebase deploy --project=[project-id] --only=hosting:[site]
  • GitHub pages
  • Netlify

Firebase

I will now add the step to deploy my project to Firebase hosting. I am using the Firebase community builder to deploy my site.

  - id: 'deploy to firebase'
    name: gcr.io/[project-id]/firebase
    args: [ 'deploy', '--project=[project-id]', '--only=hosting' ]

If you have multiple sites in Firebase, you will want to specify the site using the following

  - id: 'deploy to firebase'
    name: gcr.io/[project-id]/firebase
    args: [ 'deploy', '--project=[project-id]', '--only=hosting:my-site' ]

Manual Submitting Builds

GCP Docs To execute a build against your repo, you can manually submit the build using the following gcloud command

gcloud builds submit --project=[projectName] --account=[email] .

Conclusion

You should now have a starting point to manage, build and deploy your Hugo site using GCP.

I hope this helps in your endeavour to build and deploy your Static Site.