This article talks about how to use the AWS Amplify console to tie your website to a GitHub repository and deploy on changes to a specific branch.
I’ve been using GitHub for TAATE since I started because I was worried a hard drive crash would cause me to lose everything for the website.
Small Snag on Building
The AWS Amplify console has an older version of Hugo as the default. I think it’s .55.x, which is out of date.
When I initially tried to build the site, I received a weird error about $value not being defined. I couldn’t find anything about it on Google, which made me think there was something else really wrong.
The Test Labs article mentions a couple of changes you can make to update the build environment, but it didn’t mention this specific error.
As you can see in the image, I setup an override for the Hugo package. This matches the locally installed version of Hugo I have on my laptop.
Once I made this change the build was successful. I haven’t tinkered with the other settings in the provisioning environment.
DNS Updates and Custom Domain
I ran into some issues here! I already had thearchitectandtheexecutive.com setup with an S3 distribution. I do use Route 53 for DNS, which should make the process easier.
Unfortunately, the auto-provisioning process for Amplify will not overwrite what you already have in place.
On my initial attempt, I still had an A record, and a CNAME for thearchitectandtheexecutive.com in my zone file. This resulted in an error from the Amplify console, but it was pretty generic.
The page simply tells you there was an error, and you have to try to figure it out. I couldn’t find any details about the specifics of the error.
Eventually, I figured out I was getting an CNAMEAlreadyExistsException. The provisioning page provides some information, but it was only after completely refreshing the page I saw the limited details.
The CNAMEAlreadyExistsException directs you to a troubleshooting page, which does talk about the need to remove any existing A and CNAME records. I also removed my AAAA record, which may have been conflicting.
After making the changes to my zone file, I waited a couple of hours, and used the retry functionality. Unfortunately, this didn’t work either. I must have retried a dozen times before finally deleting the custom domain and starting over.
When I started over with a clean zone file, and the same domain information, it worked the first time, and it was quick!
Deployments Made Easier
Now that I have Amplify connected to my repository, any changes I check-in to the right branch will be automatically deployed to the site.
To test this out, I made a couple of small changes to my config.toml and checked it in. Within minutes, the site had been updated, and I could see the changes in the browser.
One of the main benefits of this setup change, is that I no longer have to worry about invalidations. Previously, when I made changes, or added a new podcast page, for example, I would have to invalidate the S3 cache to ensure everyone could see the content.
Now, Amplify is handling the changes behind the scenes, and all I have to do is remember to check-in.
If you’re using Hugo with an S3 deployment, I hope you’ll take a chance on making the same changes.
Disclaimer: Some of the links provided are affiliate links meaning, at no additional charge to you, The Architect and the Executive may earn a commission if you make a purchase.