Hugo on AWS Amplify

Hugo is a static web page generator which offers fast rendering of pages and simple user management of the platform by using markdown to write everything. At the time of this writing, the Hugo github repository has 44.7 stars which shows how popular this framework is. There are many available themes to quickly bootstrap your website including Academic, which is powering this current website. Academic has many features which are very well suited for a more academic profile including a landing space for publications, talks, and more. The documentation is comprehensive and covers most use cases and instructions for hosting. However, the instructions for hosting are limited and do not cover every possible web hosting technology. Although the documentation for the hosting options are all valid, Amazon Web Services(AWS) offers a service called AWS Amplify which can simplify deployment of Hugo applications including CI/CD and serverless decouplement of front end and back end services. This post was written to help users be able to quickly deploy a Hugo application on to AWS Amplify.

Instructions

Basic Deployment

First, go to your AWS console and go to the AWS Amplify page. AWS Amplify is currently only available in select regions and will warn you to switch regions if it is not available. As AWS Amplify hosts your application on a content delivery network(CDN), it should not matter too much as any users going to the web page will get the closest server to them.

Next, create a new application by connecting to a code base. This project is hosted on github but any version control would be fine. It is highly recommended to use version control in order for changes to the code repository to automatically be pushed to AWS Amplify. It is also recommended to use branching structure in your code to isolate production and development environments to control costs and prevent work in process from being uploaded. It is possible to deploy it without a code repository but you lose automation for changes in your code.

AWS Amplify needs to know how you will build the application each time it updates. As Academic requires Hugo extended which is a submodule, you will need to modify the CI/CD build commands to be able to run Academic. In the example below, hugo extended was downloaded and moved in the /usr/bin to be able to run it globally. Change the version of the package below based on your own personal dependencies.

version: 0.1
frontend:
  phases:
    # IMPORTANT - Please verify your build commands
    build:
      commands:
        - git submodule update --init --recursive --depth 1
        - wget https://github.com/gohugoio/hugo/releases/download/v0.70.0/hugo_extended_0.70.0_Linux-64bit.tar.gz
        - tar -xf hugo_extended_0.70.0_Linux-64bit.tar.gz hugo
        - mv hugo /usr/bin/hugo
        - rm -rf hugo_extended_0.70.0_Linux-64bit.tar.gz
        - hugo
  artifacts:
    # IMPORTANT - Please verify your build output directory
    baseDirectory: public
    files:
      - '**/*'
  cache:
    paths: []

Afterwards, the application should build and your site should be hosted off one of AWS Amplify’s domain names.

Custom Domain Name

By default, AWS Amplify will give you a domain name. You can bring your own domain name and AWS Amplify will take care of connecting your application to the domain name for you and setting up the SSL certificates. You can use Route53 to buy a custom domain name to use but you can also transfer your domain name to be under Route53.

First, go to the AWS console and go to Route53. From there, click Registered domains and register a new domain name or transfer domain. This step will cost approximately $12 a year. Back in AWS Amplify, in Domain Management, you can add the domain that you just registered through Route53. It will take up to 30 minutes for the inital setup to complete to be issued certificates to enable https.