Overview

There are a ton of resources for this already, but wanted to add mine to the pile and work on my markdown along the way. So here is how I have set up this blog using Hugo, with my AWS backend consisting of S3 and CloudFront. My next step might be to automate the deployment in some way, because right now it is a bit of a pain.

Hugo Setup

  1. Install Hugo (requires homebrew on macOS)

brew install hugo

  1. Install git. Since I am on a macOS, all I had to do was run git --version in the terminal and it prompts to install it. For more information on installing git, see here

  2. Create your site and cd to the directory that was created for it

hugo new site izzycafe

cd izzycafe

  1. Find a theme you like here, and install it using git

git init

git clone https://github.com/xianmin/hugo-theme-jane.git --depth=1 themes/jane

  1. At this point you can start up your site locally, you will want to read the documentation for the theme you chose to see how to customize it, basic customization is typically done through the config.toml file. To start your site, run the following, and then you should be able to browse to it on port 1313

hugo server

  1. Once you are happy with your site, you can run the following command to build the static files, they will be placed in the ‘public’ folder. This is what we are going to upload to S3

hugo -v

Note about “baseURL” in you .toml file: This managed to cause me a bit of grief with how the website navigates through pages, my styling wasn’t loading, and clicking on anything other than index didnt seem to work. The trick is to configure your baseURL setting like this:

baseURL = "//izzy.cafe"

You don’t want to specify the protocol here, and you just want it to be your root domain, this will fix issues with page references and styling not showing up.

S3 Website Config

  1. Create a new bucket with your site name as the name, in our case it is izzy.cafe, turn on Static website hosting and choose “Bucket hosting”
  2. In the Static Site settings, select the index document as index.html
  3. Upload your files from the public directory you created with hugo to this bucket
  4. Create another bucket with a preceding www (so www.izzy.cafe) and enable website redirection Static Site Redirection

CloudFront and Route53 Config

  1. Browse to the CloudFront console and create a distribution. I didn’t make too many updates to the defaults here, for ‘Viewer protocol policy’ I choose redirect, since I had a cert already for this site, so I also set that in the SSL settings.
  2. It will take about 5 minutes to fully deploy, once it is you should be able to browse to the Distribution domain name it generates for your site.
  3. If you are setting this up with a Hosted Zone in Route 53, you will need to edit the distribution and add an “Alternate Domain Name” as the URL you are using.
  4. Navigate to your Hosted Zone in Route53, create a record:
    • Record type: A
    • Route traffic to: Alias to CloudFront Distribution
    • Select your distribution

You should be able to navigate to your site now!