Edit on GitHub
Report issue
Page history

Submitted by @{[ TutorialCtrl.tutorial.github_username ]} {[ TutorialCtrl.tutorial.date_published | date:'mediumDate' ]}

title: Automated Static Website Publishing with Cloud Container Builder description: Learn how to automate publishing your static website to Google Cloud Storage with Cloud Container Builder. author: ahmetb tags: Cloud Container Builder, Hosting, Cloud Storage date_published: 2017-03-13

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


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

Before you begin

  1. Make sure you have a custom domain name (e.g. example.com).
  2. Make sure the source code for your static website is hosted on a GitHub or BitBucket repository.
  3. 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.)
  4. Make sure you have a Project on Google Cloud Platform Console to host your website.

Set up a storage bucket

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

Create a bucket named as your domain name

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

Change object default permissions of the bucket

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

Add allUsers as HeReader

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

Edit Website Configuration

Specify the main page as "index.html" and click “Save”:

Specify main page

Now, configure your domain name’s DNS records to create a CNAME record that points to Google Cloud Storage. This makes clients requesting your website point to Cloud Storage APIs.

Set up automated builds

You will use Google Cloud Container Builder 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 Google Cloud Platform Console and click “Add trigger”:

Add build trigger on Container Registry section

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.

Select GitHub as the source

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

Select the Git repository

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

Create build trigger

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:

  - name: gcr.io/cloud-builders/gsutil
    args: ["-m", "rsync", "-r", "-c", "-d", "./vision/explore-api", "gs://hello.alp.im"]

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.

After saving the file, commit and push the changes:

git add cloudbuild.yaml
git commit -m 'Add build configuration'
git push

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 Google Cloud Platform Console Build Triggers section, click “Run Trigger” and choose the the branch (i.e. master) to build.

Trigger the first build manually

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

Build history shows the executing or completed builds

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:

See if your website works

Clean up

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

  • Storage: delete bucket named as your website
  • Container Registry → Build Triggers: delete build trigger
  • Development → Repositories: delete mirrored repository
See more by @{[ TutorialCtrl.tutorial.github_username ]} and more tagged {[ tag ]}{[ $last ? '' : ', ' ]}

Submit a Tutorial

Share step-by-step guides


Request a Tutorial

Ask for community help


GCP Tutorials

Tutorials published by GCP


Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies. Java is a registered trademark of Oracle and/or its affiliates.