website.github.io is great, but your own domain name is even better!

For years, I’ve been deploying hugo sites for free with GitHub pages (still do!). However, I was looking for something a bit more professional for sharing a portfolio site. While GitHub pages does offer the ability to configurate a custom domain, I decided to take the opportunity to expand on my cloud skills and use an AWS service.

During the research stage, I encounted several potential AWS services that can be used for publishing a website, including:

  • Lightsail
  • Elastic Beanstalk
  • EC2
  • S3
  • Amplify

While I had experience with most of the services – thanks to AWS CCP – Amplify was new to me. Delving into the docs, it fit the bill perfectly, functioning as a Continuous Deployment platform with built-in support for static site generators, like Hugo. With simple integration with a source code repo (e.g. GitHub), getting up and running ended up taking less than 15 minutes.

Interested in doing the same? Read on!

Handy Resources

Connecting to Repository

Navigating to the AWS Amplify Console, a “Get Started” button takes the user to an intuitive form, asking the user to choose a Repo provider. My repo, which we’ll call portfolio, was hosted on GitHub. Selecting GitHub, authorizing AWS, and then selecting the main branch allowed the Amplify console access to the code source, as well as detect when changes are pushed to specified branch.

Build Settings

Build settings were automatically generated by Amplify, and they may work by default, however I noticed with different themes Hugo would not be detected.

Below is a snippet of my build settings:

version: 1
frontend:
  phases:
    # IMPORTANT - Please verify your build commands
    build:
      commands:
        - hugo --minify
  artifacts:
    # IMPORTANT - Please verify your build output directory
    baseDirectory: public
    files:
      - '**/*'
  cache:
    paths: []

After confirming and reviewing, we’re ready for deploying! And just like that, we’ve successfully managed to publish our Hugo site on AWS Amplify and can access it at xxxxxxxxxxxxxxx.amplifyapp.com.

Wait a minute.. I thought the goal here was to use a pretty domain? Guess we have more work to do.

Connecting Custom Domain (with TLS)

Depending on who your domain provider is, this could be a simple one-click setup (like with Amazon Route53), or it could be a bit more involved if using provider like Google Domains or GoDaddy. That said, it normally just involves updating some DNS records and waiting for the records to propogate throughout the system.

What’s Next?

While the site is up-and-running with our very own custom domain and TLS, there was still the manual initial configuration that had to be done. As someone delving more into the DevOps/Cloud world, it would be interesting to shift the process to something more automated and reproducible. I’ll potentially look into abstracting it away with the help of an Infrastructure as Code (IaC) tool like Terraform or CloudFormation. But we’ll save that for another time…