How to setup static website like this one on Google Cloud Storage

This is an outline of steps I’ve performed to setup this website. I don’t give a lot of details here for each step, but try to refer with links to more detailed explanations. If you’re looking for more complete tutorial, try one of the following (from which I compiled my setup):

• https://cloud.google.com/storage/docs/hosting-static-website
• http://evanbrown.io/post/hugo-on-the-go/
• https://geekflare.com/cloud-storage-static-website/ and https://geekflare.com/gcs-site-over-https/
• https://www.tobias-schwarz.com/posts/8/

One important thing that’s missing from the above guides is that you shouldn’t create CNAME record for your root domain pointing to GCS (instead use “www” subdomain and then redirect from root domain to “www”). While CNAME for root domain works in practice, it violates an RFC and breaks email on your domain.

Basic setup

1. Purchase domain from namecheap.com
2. Sign up for Google Cloud (comes with $300 worth of usage credits for free)
3. Verify domain with Google (https://www.google.com/webmasters/verification/)
4. Create “www.yoursite.com” bucket in GCS, setup access and web pages (https://geekflare.com/cloud-storage-static-website/)
5. Install Hugo and create simple website, then generate static content (http://evanbrown.io/post/hugo-on-the-go/)
6. Sync static content to the bucket with gsutil rsync (https://cloud.google.com/storage/docs/hosting-static-website#sharing_your_files)
7. Create CNAME for “www” pointing to GCS and check that website works (https://cloud.google.com/storage/docs/hosting-static-website#cname)
8. Setup redirect from main domain to www

SSL with Cloudflare

1. Setup Cloudflare for the website (https://geekflare.com/gcs-site-over-https/)
2. Change nameservers in Namecheap to Cloudflare’s
3. Setup redirect from main domain to www in Cloudflare (https://support.cloudflare.com/hc/en-us/articles/200172286-Configuring-URL-forwarding-or-redirects-with-Cloudflare-Page-Rules)

I’ve seen some lags in content update with Cloudflare caching, but this behaviour is inconsistent and I haven’t found a way to disable caching altogether. If this would become an issue, I’d probably remove Cloudflare from my setup.

Publishing from Git with Travis

1. Create repository on GitHub
2. Add your Hugo content, add generated files to .gitignore
3. Create .travis.yaml performing hugo build and syncing files to the cloud (https://docs.travis-ci.com/user/deployment/gcs/)
4. Sign up for Travis CI and enable build for your repository
5. Setup access keys in Travis (https://cloud.google.com/storage/docs/migrating#keys)
6. Push changes to website and see it deployed

The pitfall that I’ve spent some time on is using http://travis-ci.com instead of http://travis-ci.org for automated publishing. The former is paid version with trial limitation, while the latter is free for public repositories.