Hugo Customisation

Once Hugo and the build pipeline are set up, next steps will be customising Hugo.

If you followed my Hugo Setup post you’ll now have a site that you can commit to for automatic build and deployment. So what’s the next step after this… well customisation of course.

I’ll start with the customisation options covered in the quickstart. You should have a config.toml file that looks like this:

1baseURL = "http://example.org/"
2languageCode = "en-us"
3title = "My New Hugo Site"
4theme = "ananke"

The first 3 lines are default config and the fourth line was added to select the ananke theme, we’ll take a look at the first three lines in detail.

baseURL

Default value:

1baseURL = "http://example.org/"

baseURL defines the root from which all links to the Hugo site will be built. By default, a post will include sharing links for 3 popular social media sites, this baseURL property is used for building those links, for instance…

Facebook link:

Twitter link:

LinkedIn link:

In each case the baseURL is used to create the link back for the post to the social media platform, and as this is set to http://example.org/ by default it will mean that any sharing of links to content will actually be links to an IANA holding page rather than links to content.

This value should be updated with the value of the GitHub pages site, so in my case this property will be changed to:

1baseURL = "http://andrewfitzy.github.io/"

After making this change, I can see that links back to my content will now be correct.

languageCode

Default value:

1languageCode = "en-us"

I couldn’t find any docs for this property, the format though is that of a locale i.e. <language>-<region>. As I’m basked in the UK, I will update my code to be:

1languageCode = "en-gb"

title

Default value:

1title = "My New Hugo Site"

This displays in the header and footer for the site and also on the front page:

My site doesn’t really have a name so I’ve updated this value to be the GitHub pages url:

1title = "andrewfitzy.github.io"

Other configuration

This section covers a couple of other properties I’ve decided to set for my Hugo site.

enableEmoji

Default value:

1enableEmoji = false

Setting enableEmoji to true means that emoji shortcuts like you’d use in slack or GitHub can be included in the markdown files. 😄

Params

Not specifically a single property but a list of parameters that can be used site wide. The three parameters I have set are specific to the ananke theme, these are covered in the ananke documentation:

1[params]
2  background_color_class = "bg-black"
3  featured_image = "/images/gohugo-default-sample-hero-image.jpg"
4  show_reading_time = true

background_color_class

In the anake theme, this is the colour of the background for the header, footer and main banner on the frnot page if no featured_image is set. By default the value is black but I’ve defined it so that I can test other colour schemes when I want to.

featured_image

A link to an image that can be used on the front page of the Hugo site, I’ve set the value used to be the sample image included with the ananke theme… this may change in future.

show_reading_time

Does what it says on the tin, adding this will include an approximate reading time at the top of the site, see above for an example of how it looks.

This section has worked through the updates I’ve made to the configuration of http://andrewfitzy.github.io to get the site looking how it currently looks.