This tutorial shows how to automate publishing a static HTML website using a
custom domain name to Google Cloud Storage using Google Cloud Build.

Objectives

Automatically publish changes to your static website from the source control
repository.

Before you begin

Make sure you have a custom domain name (e.g. example.com).

Make sure the source code for your static website is hosted on a GitHub or
BitBucket repository.

Make sure you verified ownership of your domain on Google Webmaster
Central. (Do not include http:// or https:// in the URL for the
purposes of this demo.)

Make sure you have a Project on the Google Cloud Platform (GCP) Console to
host your website.

Set up a storage bucket

By uploading your website contents as files to Cloud Storage, you can
host your static website on buckets. First, you need to create a
bucket. Head to the Storage section of the GCP Console and type
in your domain name (e.g. www.example.com) and create the bucket:

After the bucket is created, you need to make it readable by everyone. Go to the
Storage Browser on the GCP Console, click the menu icon
to the right of the bucket, and select “Edit Object Default Permissions”:

Then add the user allUsers with “Reader” role and click “Save”:

Now, you need to configure the storage bucket to serve a static website. Click
the “Edit Website Configuration” button on the list of buckets:

Set up automated builds

You will use Cloud Build and the Build Triggers
feature to upload your website automatically every time you push a new git
commit to the source repository.

Note: If you do not have a repository on GitHub, you can fork this sample
repository for the purposes of this tutorial.

Head over to the Container Registry → Build Triggers
section on the GCP Console and click “Add trigger”:

Then select GitHub as the source of your repository. In the next screen, you may
be asked to authorize access to your GitHub account and repositories. This is
needed for Google Cloud Source Repositories to mirror and create commit hooks on
your GitHub repositories.

Then, pick your repository from the list. If you forked the sample repository
above, pick it here:

In the next screen

give this Build Trigger a name (e.g. publish-website)

choose Build Configuration "cloudbuild.yaml"

choose Trigger Type ”Branch”

Set the file location to cloudbuild.yaml

Now, create a cloudbuild.yaml file with the following contents in your
repository. Note that you can add files to your repository on GitHub’s website, or
by cloning the repository on your development machine:

This YAML file declares a build step with the gsutil -m rsync command and
makes sure that the website is uploaded to the storage bucket. The -m flag
accelerates upload by processing multiple files in parallel and the -c flag
avoids re-uploading unchanged files.

If you are using the sample repository, you should upload the
./vision/explore-api/ directory. If you would like to upload your entire
repository to the storage bucket, make sure to change this value to . in the
YAML file.

The last command in the args is the name of your storage bucket prefixed with
gs://. Be sure to change this argument to the correct value.

Trigger the first build

Once you push the cloudbuild.yaml file to your repository and create the Build
Trigger, you can kick off the first build manually. Head over to the GCP Console
Build Triggers section, click “Run
Trigger”, and choose the branch (i.e. master) to build.

Now click the “Build history” on the left and watch the build job execute and
succeed:

Remember that after now, every commit pushed to any branch of your GitHub
repository will trigger a new build and publish contents to your website. If you
need to change which git branches or tags you use for publishing, you can update
the Build Trigger configuration.

Try it out

Point your browser to your website URL and see if it works:

Clean up

After you no longer need the artifacts of this tutorial, you can clean up the
following resources on Google Cloud Platform Console to prevent incurring
additional charges: