A to Z of Google Cloud Platform a personal selection — H — Hosting static sites

Many many websites have no need of a web server and thus the associated compute services as there are essentially no moving parts on the server side. So an ideal use case to use Google Cloud Storage ( GCS) for hosting .

The benefits of a static site hosted on GCS imho are:

• Performance
• Pretty much no operational overhead
• scalability built into the hosting platform

To host a static site on Google Cloud Storage (GCS) distils down to 5 steps:

1. Create your content using the editor of your choice
2. Create a Cloud storage bucket
3. Set up a CNAME record to point to the newly created bucket
4. Upload your content to this bucket
5. make the bucket publicly browsable

For a full walk through have a look at the docs . For a look at how the economics stack up this post about the journey to hosting BaindAid 30 on GCS is worth a read.

Easy huh but what I really wanted to talk about is how to continually update your site hosted on GCS i.e treat the creation of your static site in the same way the rest of your code is built and deployed .

I then realised that I’d break every single one of my self imposed rules if I tried to cram it all into one single post so I am going to have to do this as a two parter and come back to part 2 later in the series. Okay onwards…

Using a static generator is the way to be able to do continuous updates.

When I think of static site generators I think of a system that automatically creates a complete static website by rendering markdown files to html. The system usually has a local server so you can see in real time the changes you make . There are lots of static site generators and when I did a search for static site generators on github it found 1744 repositories.

The most popular generators I’ve come across tend to be one of jekyll , Hugo or Ghost

which all work in the way I described earlier to generate pages. The reasons why you choose one over the other well depends on what “unique” feature is important to you . There are plenty of posts dotted around the internet though to help you decide.

I’m going to use Hugo to help me generate a static site . I’ve already used Jekyll and ghost in the past but I like the fact Hugo was written in GO so less dependencies needed (jekyll needs ruby and ghost node.js ) . With Hugo I can just download the binary with no need for anything else so imho it seems that is the cleanest approach ( This is just my personal preference though make up your own mind which generator you want to use)

Okay now I have my bucket set up I now need to install Hugo on my local machine, create a folder where I will store the files for my site ,Use Hugo to generate the structure of my site , create some content then upload the files to GCS.

This last section literally takes a few minutes depending on how much content you have. so expanding on those 5 steps we now have 8 steps

1. Create a Cloud storage bucket
2. Set up a CNAME record to point to the newly created bucket
3. Install hugo
4. Generate local file structure
5. Create content using the editor of your choice
6. use local Hugo server to preview content
7. Upload your content to your bucket
8. make the bucket publicly browsable

Then you literally rinse and repeat steps 5 to 7 whenever you do updates and running the local Hugo server means you can view real time updates locally

and the image below shows the content pushed to my bucket .

For a nice easy to follow end to end walk through of using HUGO with GCS fleshing out the 8 steps read this nice post by moxie.io

That’s great I hear you say but why a two parter?

Firstly I felt that it was a natural break to stop here as it shows how quickly you can get started hosting your own static site and as such is a stand alone entry in the series . The next part in this two parter is all about building on this foundation .

Secondly collaboration . The above is good enough for a single creator but when you have multiple content creators it starts to get unworkable.

Thirdly I also admit it gave me the idea for J !

In the next part of this ( J so not too long a wait! ) I’ll walk through using Jenkins to show how you can set up a publishing pipeline that can be used by multiple contributors. I’ll explain how you can hook up the local folder where your site content is generated to push to a cloud repository hosted in GCP .