Now that I’m more familiar with Hugo and how to create Hugo sites, it’s time to fundamentally change the way this site references themes from git modules to Hugo modules.

I’ve used Ananke and Terminal themes, both being included as git modules, this seems to be the way that most sites detail including Hugo themes. I can understand why as it means a theme can be incorporated quickly, the site build from source rather than the source of the theme needing to be included in the repo of the site, and there is no need for the installation of go. After using them for a little while though, there are a couple of annoyances that I have with themes from Git modules.

Firstly, seeeing them in source control UIs is driving me potty. It’s a small thing but I find it annoying that these repos show up…

Secondly, every time I clone my repo I forget the --recursive command. This is something I should remember but every time it escapes me, this is probably because it’s the only repo I use that needs recursive cloning.

Thirdly, they are less powerful than Hugo modules in Hugo sites, as I grow the site I will inevitably start to use modules so I may as well make the switch for themes now while I have the chance.

Adding the new theme as a module.

First thing I need to do is turn my site into a Hugo module itslef. I covered this in my last post, but from the root of the Hugo site I run:

hugo mod init andrewfitzy.github.io

Then I add the new theme to my config.toml file

[module]
  [[module.imports]]
    path = "github.com/chipzoller/hugo-clarity"

If running a server locally, as if by magic the site will reload and the new theme choice will be reflected instantly.

Git and Hugo module themes co-existing

At this point, I have the hugo-clarity theme added as a Hugo module and the terminal theme added as a Git module. The two can co-exist, from what I’ve seen the Hugo module takes precendence though. To go back to the git module theme, the Hugo module needs to be disabled in the config.toml:

[module]
  [[module.imports]]
    path = "github.com/chipzoller/hugo-clarity"
    disable = true

Mine is not disabled as this is the theme I now want to move to.

Removing the old themes

At the time of writing, my theme was terminal and I’d used ananke in the past, both of which I now want to remove. Searching how to remove modules turned up a useful Stack Overflow post that informed me it could be done in one command. So, I followed these steps to remove old themes.

Firstly remove theme config from the config.toml file. The lines that will be deleted are as follows:

theme = "terminal"

[params]
  contentTypeName = "posts"
  themeColor = "orange"
  showMenuItems = 2
  showLanguageSelector = false
  fullWidthTheme = false
  centerTheme = false
  autoCover = true
  showLastUpdated = false

These don’t have to be removed, I did remove them so that I know my site is back to a clean state, it might be that I add them back in again if I add terminal as a Hugo module in futuure.

Next remove the git modules from the project:

git rm themes/ananke
rm 'themes/ananke'

git rm themes/terminal
rm 'themes/terminal'

These commands remove all the theme files from themes/ and also update the .gitmodule file.

Cloning the site

Remember one of my gripes was forgetting the --recursive command each time I clone my site. Now that I’m using Hugo modules this isn’t a problem, after performing a clone I can run the server and access the site straight away without issue.

I hope this has been useful for anybody reading it, first time I tried modules they were a bit intimidating but now they make a lot of sense.