Create a static website from a Google Storage Bucket
Back in the day all the websites I created were static websites. I’m talking about like 1995-ish. Back then I was super excited when I figured out how to get an html form to use Perl and the cgi-bin to send an email…
Recently my mother was talking about showing her paintings online at the same time as I was hugely distracted by a new layout system called CSS Grid. So of course I decided to write a simple photo gallery for her using CSS Grid.
Once I had her site created and the content entered I starting thinking about how we were going to deploy it. I looked around at static website hosting solutions but I realized that my thinking about hosting had had become very uptight! Man.
I love the Google Cloud Platform so naturally I started wondering how I might host it on GCP. Specifically I started wondering if I couldn’t host it in a storage bucket. It doesn’t need a server, processing, etc. Turns out if you are willing to jump through some hoops you can indeed get a little static website running on a GCP storage bucket!
I am sure that there are multiple ways to get this to work, I am going to explain how I hooked it up.
These instructions include using CloudFlare. So you’ll need a cloudflare account, a google cloud account, and a domain name. Additionally you need to be able to prove the domain is yours.
I suggest changing your nameservers from your hosting provider, domain registrar, or wherever they may be pointing – so that they point at CloudFlare. Once you can manage your DNS on cloud flare add a CNAME record that points to:
That little information icon there next to CNAME explains how CloudFlare will use their “flattening” technique to apply the CNAME to the root. CNAME was not designed for this purpose so once again Cloudflare to the rescue.
The TXT record in the image? That is how we tell Google that this is indeed our domain. You have to verify your domain name ownership to get this all working. I found the simplest way to accomplish this is:
- open the search console
- request to add a site
- get the code supplied by google
- make a TXT record at cloudflare
- paste in the supplied code.
Put it in a Bucket!
Once all of the dns stuff is taken care of login to your google cloud console and create a new storage bucket. When you name it, name it exactly the same as the domain you want to use. So in my case I named my bucket joannes.gallery.
You’ll need to make sure that everyone can get to your bucket, err…. website. Grant permission on this bucket by choosing the permissions tab, Add Members:
Storage Object Viewer
You’ll see the options pop up when you click in the form fields.
All that’s left to do is upload your html/css/js to your bucket and you are good to go. Once you get it all working and tested head back over to Cloudflare and turn on https 🙂