It has been a while since you first got this idea of building your blog…
You wish you could post some articles about your best tricks, workarounds or code snippets but the reality is that you are lost in the modern age of blogging platforms! Yeah… "should I use Medium or a self-hosted Wordpress site?"
I won’t discuss these solutions. My choice here is to use Hugo, a popular Static Site Generator (SSG), written in Go.
This post will show you how to host this kind of site on the Google Cloud Platform, for minimal cost and with a real certificate exposed 😎
First, the blog itself
You first need to get some basics of Hugo. Hugo is - fundamentaly - not a server running your code and dynamically generating some HTML to visitors.
Hugo is a binary generating a once-for-all HTML code, based on the articles you wrote with some Markdown or Asciidoc markup language.
So, all you need is this binary and let some magic happen:
# install hugo binary brew install hugo # bootstrap your blog project hugo new site my-blog # install a theme cd my-blog git init . && git submodule add https://github.com/luizdepra/hugo-coder.git themes/hugo-coder
Basically, this will generate the skeleton of you new blog, then add a predefined theme on top of it 🍒
There are lot of themes, ready to use, listed right here.
Now it’s time to add some content to this blog:
# create a new post hugo new posts/hello-world.adoc # serve the blog and also show drafts hugo server --disableFastRender -D & # Hello World! open http://localhost:1313 🎉
You might want to customize some basic parameters like the domain name, menu items, footer, etc. So, feel free to do so by editing the
Another important thing to me was to be able to highlight syntax in code blocks. A simple gQuery led me to this nice post by René Gielen. To make it work, I also had to install a few complementary gems:
gem install --no-document asciidoctor asciidoctor-revealjs rouge asciidoctor-confluence asciidoctor-diagram coderay pygments.rb
I had to add this CSS chunk in order to get rid of odd table borders…
Alright, you should have it running and prettily arranged now!
Build and deploy
So, as of now, you have some content built on-the-fly by the local server. It’s time to generate your static website.
One easy command to remember:
This will generate your website, according to the content you have written with some markup langugage, also to the templates from your theme, the CSS, etc.
Everything is published under the
That’s fine but you may want to publish it…
Let’s do it manually for now. In a future article, I’ll talk about how I’m actually automating these tasks with my containerized CI pipeline and some basic IAM service account usage.
So, let’s start with the creation of a Google Cloud Storage bucket. In GCP, navigate to "Storage > Browser" and create a new bucket.
There are a few things to know when creating a bucket to host a website
the bucket must have the same domain name than your website
you will be prompted to verify the ownership of the domain name
Google Search Console helps you to verify the ownership of the domain, by adding a TXT record to your DNS zone
you must place it in a single region
it must be configured to be public (read access only)
it must be configured to be a website and have associated index and error pages (see below)
Alright, from now you can push your generated website to your GCS bucket.
You will need the
gsutil command, part of the Google Cloud SDK.
# brew cask install google-cloud-sdk # gcloud auth login gsutil -m rsync -d -r ./public/ gs://baptistout.net
Get a managed certificate
Here comes the last important step: exposing a valid certificate and routing the request to your GCS bucket.
For this, you need an instance of GCP Loadbalancer. So, navigate to "Network services > Load balancing" in GCP. Here, the wizard will assist you through the options.
Select your bucket as the backend of your LB:
Then, in the frontend config, you can request for a free certificate, managed by Google.
Finally, some DNS configuration… First, proceed to the creation of some CNAME or A record, according to the IP yo have configured just above.
Then, you may have to update your CAA apex record in order to authorize the Google PKI to deliver certificates for your (sub)domain(s):
✨ Here we are! you have a nice website live and secured! ✨