Setting Up the Site

by Steve Ledwith

Focus on Providing Great Content

Over the course of the past few weeks, Imran and I have been talking about our podcast and a simple way to share the episodes. This got me looking for ways to host a site which would be easy to customize, easy to setup, and easy to maintain.

We both want to focus our efforts on providing a great podcast, not on how to share the materials on a website. Thanks to some friends in the right places, I was introduced to Hugo.

The beauty of Hugo is it allows the content creator to focus on the content! It’s a static site generator, which makes heavy use of markdown.

Set Your Expectations

I was expecting to find a tool which would allow me to clone a repo, configure some AWS, and fill in some content.

Not so fast my friends.

While Hugo is simple, it requires some work to get things going. Thankfully, there are a lot of great tutorials out there to get you going (see below). However, you’re going to need a keen eye for detail, patience, and some technical know-how.

I’ve been involved in techologogy for a long time (read: more than 30 years) and setting up this website required a considerable amount of reading, and trial and error.

First Things First

As previously mentioned, the Internet is full of great resources to get started on Hugo. This article is not intended to be a guide on how to complete the project. Instead, I’m sharing some of the tools I used to be successful.

First up, the list of guides, tutorials, and reference sites:

Second, a list of things you’re going to need:

  • An account with AWS
  • Something to work from. I’m using a Macbook Air
  • Homebrew to help install all the tools
  • You’ll want an editor for all the .md files you’re going to deal with. I like Sublime Text 3. It’s free to use, but you can (and should) purchase a license.
  • Some familiarity with Git and tools to use it locally.
  • A bit (or a lot) of Patience

Finally, you’ll need a project! Hopefully, that’s why you’re investigating Hugo in the frist place. I’ve found it’s a lot easier to pick up something new when you have a goal in mind.

On to the Fun Part!

I followed the Quick Start guide to get things going. I used all of the additional steps along the way too. This gave me the solid foundation to get my site up and running locally on the first day.

Next up, I had to register a domain name, which meant Imran and I had to finally pick a name for this collaboration. Hopefully this one will stick - we had a good time doing name generation.

For fun, here are some of the other names we thought about:

  • On Before Start
  • Madness in the Methods
  • Methods for the Madness
  • High Speed Low Code
  • Low Code Buzz
  • Model Behavior

We may end up using some of those as topics for content, but we’ll have to see. Regardless, it was a good time going through the naming process. We both thought this had a solid ring to it.

Technical Details

In my current professional role, I’m responsible for a large development team. I’m fortunate to have co-wokers who do most of the systems work, including all of the AWS configuration. The last time I was in anything aside from Workspace there were far fewer options in the AWS Console! There are a multitude of choices, services, features, etc., in the AWS Console, I was a bit overwhelmed.

This is where the Quick Start guide, and the other resources were a life saver. I was able to find the settings for S3, including creating a bucket specific IAM role, without too much trouble.

Amazon AWS is pretty insitent that you do not want to make things pubic from S3.

As far as I can tell, if you really want your Hugo site to work, your S3 bucket will need to be public. Make sure you pay close attention to what you’re doing in this part of the setup. You don’t want to give the wrong people access to your site through carelessness.

CloudFront and Default Pages

In the tutorials, you’re going to setup your default documents. This worked great for me, until I hit the subdirectories. Then I was getting errors about missing keys.

My error looked something like: 

    <Code>NoSuchKey</Code>
    <Message>The specified key does not exist.</Message>

This one was a doozy! Thankfully, I have a friend (talking about you Tom) who had an idea what this might be. After some testing, we determined it was a problem with CloudFront not knowing what to do with the content in subdirectories.

If you’re having the same problem, you’ll want to read this article: Default File in Directories using Lambda

The AWS Console looks a little different than what’s in the picture, but you should be able to figure it out with this information.

Push Button. Make Site. Almost.

Figuring out the nuiance of Hugo, and learing how things are supposed to work is still ongoing. However, I was able to get the site published, here, on day two. I was pleased by the progress, and I’m happy with how things look.

I could probably have done similar things for this site using Wordpress, or Squarespace, but there wouldn’t have been anything to learn. I enjoyed the challenge of the new technology, and figuring out how to make all of the pieces fit together.