Creating my Hugo blog

Posted June 16, 2022 by Jacob Sauni ‐ 2 min read

In my last post, I wrote about how I setup the AWS resources required to host this blog. This post will speed through how I created my Hugo static site and deployed to AWS. My blog used a custom theme so the steps will differ from the standard approach.

Creating

Usually you’d use the hugo new site (docs) command to create a new Hugo blog. But the Doks theme I decided to run with had different instructions to get it set up.

First, clone the theme’s github repository and cd into that directory

git clone https://github.com/h-enk/doks.git jsauni.com && cd $_

Next, install third party modules. The init basically removed old git + initialise new git.

npm install
npm run init

At this point you can spin up a local version of the blog by running npm run server or hugo server.

Building and Deploying

To build the Hugo static site is easy, run the hugo command. This generates the blog files in the public directory.

Now with the blog files built, I just need to deploy them to S3. As per the documentation, all I needed to do is add the below code to my config.toml file. You’ll have to get the <CloudFrontDistributionID> from AWS console.

[deployment]

[[deployment.targets]]
name = "mydeployment"
URL = "s3://jsauni.com?region=ap-southeast-2"
cloudFrontDistributionID = "<CloudFrontDistributionID>"

With the deployment config in place, I should be good to deploy. I authenticated against AWS and ran the code below. I also stumbled upon the argument --dryRun. This is cool because I’m able to check what files have changed and will be deployed to S3. Dry run deploy looked good, so I removed the argument and deployed the files to S3.

hugo deploy --dryRun
hugo deploy

But the site didn’t look right? It looked as though it was missing the css or theme altogether? Back to Google. I ended up finding this discussion which mentioned having not set baseUrl in the config.toml file. I didn’t remember doing this and gave it a go. Built the the blog, redeployed and the live site looked as it should, sweet.

Improvement

Setting up the hugo blog and deployment process was pretty smooth. One of the things I’d like to do is automate the deployment. I’ve mentioned before wanting to play with Github Actions so likely I would experiment with that.