Setting up a Custom Domain on GCP

Share on:


If you want to host a static site e.g. blog or website, there are plenty of great options available. One option is to host your content in a storage bucket. Another option is to use Firebase hosting. Recently I watched a couple of YouTube videos that walk through the process of setting up a site.

Using a Custom Domain with Google Cloud and Cloudflare

Inspired by the above videos, I decided to give it a try and migrate my very old Wordpress blog to Google Cloud.

Google recommends securing content with SSL, which means you will need a certificate. To secure a site with SSL, the widely used method is to use something like letsencrypt. In this instance however, I used Cloudflare to do all the heavy lifting.

If you do not have a domain you can purchase one via Squarespace. The rest of this post covers the steps needed to get a site up and running.

Grab a HTML template

There are plenty of (free) html example landing pages available. Do not pick anything too complicated as you will hopefully be replacing it with your own content.

Not sure how to get started with an example landing page? Read one of my previous posts

For reference the directory structure I used was:

2├── images
3│   ├── background.jpg
4│   └── logo.png
5└── index.html

Google Domain

In this post, I will be using a Google Domain to set up a place to host my blog. A domain gives you a named placeholder on the internet for your content. You have probably seen multiple adverts mentioning how easy it is to get a domain.

Setting up a Domain requires a few steps:

  • Select a domain name
  • Make a choice about the duration of the domain contract
  • Purchase a domain

In the following example, I will assume you have purchased You should replace this with whatever your domain name is actually called.

Cloudflare setup

I will point out that the use of Cloudflare is entirely optional. In my case, it saves me having to do some admin stuff e.g certs + DNS updates. If you used Firebase hosting, this would have done admin stuff for you as well.

Setting up with Cloudflare requires a few steps:

  • Set up a Cloudflare account (Free tier is sufficient)
  • Add your domain name to Cloudflare
  • Add a CNAME record for Google Cloud Storage. Note: should be replaced with your domain name
Type Name Content TTL Proxy Status
CNAME Auto Proxied

In the above record, we indicate that the domain will be served via the storage.googleapis. What this means is we are able to talk to Google Cloud Storage.

  • Make a note of the Cloudflare nameservers information - you need this later to configure the Google Domain

Google Domain

Cloudflare is now setup and configured to use Google Cloud Storage, so we need to change the Google Domain configuration. At this point, we want to tell Google Cloud to defer to the Cloudflare nameservers.

  • Replace the default Google Domain nameservers with the Cloudflare information

To do this go back to the Google Domains admin

  • Select the domain to be updated
  • Select the DNS setting for that site
  • Update the Custom name server settings
  • Activate the updated DNS settings

Google Cloud Storage

At this point you can start to connect the dots. On my GCP project, I created a new project to host my storage bucket. Note creating a new project is not necessary, you can just as well use an existing project. In my case, I used a new project as I will also be running a job to perform updates to my blog, so isolation seems like a good idea.

Time to configure the Cloud Storage:

  • Ensure the name of the bucket matches your domain name
  • Set up a new multi-regional storage bucket
  • Config a main page
  • Make storage bucket files publicly accessible
  • Upload the test html landing page to the bucket
  1. Set up a multi-regional bucket e.g. Europe
1gsutil mb -l eu -p $GOOGLE_CLOUD_PROJECT -b on gs://[DOMAIN]
  1. Config a main page and/or error page
1gsutil web set -m index.html -e 404.html gs://[DOMAIN]
  1. Make the storage bucket files publicly accessible
1gsutil iam ch allUsers:legacyObjectReader gs://[DOMAIN]
  1. Upload the test html - NOTE: rsync is a great way to sync between source/dest
1gsutil -m rsync -d -r [SOURCE] gs://[DOMAIN]

In the above -d is optional. In my case, as the content of the bucket should match the source, using the -d option provides an easy way to synchronize both source and destination. If you have a single source of truth (ie. a git repo, then this option is the one you want to use).

Test access

To test access use your domain name i.e. to access the site


Issue Fix
Stale Content Use Cloudflare developer options to debug or disable the cache
Hugo rendering Hugo uses fingerprinting in some templates. If you use multi-regional object storage be aware that this can cause issues where the integrity check doesnt cached content after an update. For my sites which use GCS + Cloudflare, I disable this option so content can be deployed without the integrity check