Setting up a Custom Domain on GCP
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.
- Hosting a static web app on Google Cloud using GCS
- Using Google Cloud Storage + Cloudflare to Host a Static Website for just PENNIES PER MONTH!
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 Google domain. 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:
1. 2├── images 3│ ├── background.jpg 4│ └── logo.png 5└── index.html
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.
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:
mysite.comshould be replaced with your domain name
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
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
- Set up a multi-regional bucket e.g. Europe
1gsutil mb -l eu -p $GOOGLE_CLOUD_PROJECT -b on gs://[DOMAIN]
- Config a main page and/or error page
1gsutil web set -m index.html -e 404.html gs://[DOMAIN]
- Make the storage bucket files publicly accessible
1gsutil iam ch allUsers:legacyObjectReader gs://[DOMAIN]
- Note: Predefined role Storage Object Viewer i.e. roles/storage.objectViewer also works
- 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).
To test access use your domain name i.e.
mysite.com to access the site
|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|