December 12, 2019

How I setup my blog with Hugo

What a better way to kick-start this blog than to share some tips on how I got it up and running.

My set of requirements for the blog is, for it to be:

  • low maintenance,
  • database free,
  • source controlled,
  • static (markdown powered) and
  • requiring minimal server-side setup.

Hugo

Hugo is first up on the list. It is Golang written, fast, open-source static file generator. It ticks the static and markdown requirement boxes on my checklist. It also plays along well with the rest on that list. The steps to install, run and generate static files are listed in the quick start section here. This blog runs on the kiss theme found here: https://themes.gohugo.io/kiss/

As I am writing this post, I can preview the progress so far as the Hugo server is running with drafts enabled by navigating to http://localhost:1313/ and running:

hugo server -D

alt text

Git and Hooks

I created a private repo for the blog and pushed the source code along with the generated sample public directory. On every commit, I like to be able to generate an updated static public content and push the public directory to Amazon's s3. I'm also invlaidating the cache content in the hook to be able to view the fresh content almost instantly.

My post-commit hook looks like this

#!/bin/sh
# Runs hugo's static content generator
hugo -D

# Pushes files to your s3 bucket
aws s3 sync public/ s3://{YOUR BUCKET}/

# Invalidate cache
aws cloudfront create-invalidation --distribution-id {YOUR_DISTRIBUTION_ID} --paths /

Please ensure the script has execute permissions: chmod u+x .git/hooks/post-commit

AWS S3, Cloudfront, and Route53

I created an AWS s3 bucket to store the static files generated from Hugo. I also created cloud distribution at AWS CloudFront to acquire a TLS certificate and pointed my domain to the new endpoint from Route53.

alt text

See Website Hosting Cloudfront Walkthrough for more details on how to use your s3 bucket as a static website host.

© Habtom Giorgis 2019