Disclaimer

Creating a static site with Hugo and AWS Amplify

web aws

Static Site Generators

I was considering creating a basic site, and the first things that came to mind were Content Management Systems (CMS) like Wordpress or Ghost.

One common requirement for the former and latter is having a relational database.

This seemed a bit too much for my goals, so I looked at static site generators

As I didn’t want to write too much JavaScript, and was familiar with Go templates, I decided to test Hugo.

Hugo

It has a lot of great features like automatically creating a table of contents based on your markdown code, however these features are beyond the scope of this post.

One implicit benefit is that you will be using git as a source of your content (except images), meaning you have a built-in “backup” mechanism, and reverting to a previous version would be straightforward.

Configure Hugo

The Hugo installation page provides detailed instructions regarding its setup based on your OS.

For my purpose, I’ve decided to create a container image, and published the code and instructions.

Create a new site

The Quick Start guide is a good place to start, and I recommend going through the documentation, as you’ll find many useful things.

One thing I took into consideration was whether to use one of the existing themes or create my own.

For the sake of brevity, I’ve created an example repository

Create an AWS Amplify application

Overview

As with any service, it’s a good idea to read the FAQ and pricing model

Connecting an application

From the AWS Amplify console you can create a new application by specifying the source repository.

Connecting the repo will also enable continuous deployment, meaning the commits pushed to the git repository will trigger a new AWS Amplify build and generate a new version of your site.

AWS Amplify - Add Repository Branch

On the “Configure build settings” page I specified the build commands

version: 1
frontend:
  phases:
    build:
      commands:
        - hugo
  artifacts:
    baseDirectory: public
    files:
      - '**/*'
  cache:
    paths: []

I didn’t have to specify a build image, but I prefered have control over the Hugo image used in the build, so I provided my own image - code and docker

docker.io/serbangilvitu/hugo-builder:latest

AWS Amplify - Add Repository Branch

Checked the settings, and clicked “Save and Deploy”

AWS Amplify - Pipeline

Up and Running

The new site is now up and running - though it probably will not attract too many visitors :)

Hugo - Live Site

Possible next steps

Custom Domain

Setting up custom domains when using Route 53 is effortless, however some manual steps are required for third party DNS providers and not all providers are eligible.

Storing Images

It’s generally a good idea to keep your images out of your git repository.

There are sites like imgur which can be used for free uploads, but I didn’t do much research on those.

I opted for a Content Delivery Network (CDN) - Cloudflare, which retrieves the files from an AWS S3 bucket - here’s a guide for the configuration.

CDNPlannet is a good place to learn more about CDNs.

Conclusion

Hugo is a great option for building static websites, and AWS Amplify is removing the operational burden of creating and maintaining the required infrastructure.

This setup requires a bit more time than Software as a Service solutions where you can start writing your posts immediately, but I thought it is worth it considering the flexibility I gained.

With this setup it is also possible to move to other platforms like Azure Static Web Apps or running your container with Hugo (though the latter will require more effort to properly set up and maintain).