Updating the Hugo Tranquilpeak Theme from 0.4 to 0.5

how to update tranquilpeak-theme for 0.4 to 0.5

* This page contains promotional content

I updated the Hugo Tranquilpeak theme on a site I run elsewhere from 0.4.x to 0.5.x
From 0.5BETA onwards a number of fixes were required, so here are my notes

The current Tranquilpeak

The theme is managed as a submodule, and I was using 0.4.x

$ pwd
~/hugo/tranquilpeak
$ git submodule status
 e1d2c5d5cb1efb687ed698782f99df576e7db084 themes/tranquilpeak (0.4.8-BETA)

Updating to 0.5-BETA


$ git submodule update --remote
remote: Enumerating objects: 496, done.
remote: Counting objects: 100% (493/493), done.
remote: Compressing objects: 100% (164/164), done.
remote: Total 496 (delta 308), reused 472 (delta 296), pack-reused 3
Receiving objects: 100% (496/496), 214.68 KiB | 7.95 MiB/s, done.
Resolving deltas: 100% (308/308), completed with 90 local objects.
From https://github.com/kakawait/hugo-tranquilpeak-theme
   e1d2c5d..37550aa  master     -> origin/master
 + 4243bcf...8223447 develop    -> origin/develop  (forced update)
 * [new branch]      fix-fancybox-3-data-model -> origin/fix-fancybox-3-data-model
   a065336..902f360  gh-pages   -> origin/gh-pages
 * [new tag]         0.5.0-BETA -> 0.5.0-BETA
Submodule path 'themes/tranquilpeak': checked out '37550aa165eec033e34f2e0f89cb0720d72a4c34'

Changes and key points

  • To show posts on the front page, mainSection has to be specified explicitly
    (I was showing the list of posts on the front page, so nothing appeared unless mainSection was filled in)
  • highlight, jQery, prism and font-awesome have each been upgraded, so entries that load the CDN URLs via [[params.customJS]] are needed
  • The notation changed because font-awesome went from 4 to 5 (v5 notation)
  • A timezone parameter was added in hugo0.87, so I added timezone = "Asia/Tokyo"
    (it is not mandatory, and you need to have updated hugo to 0.87 or later)

Fixing config.toml

The quickest way is to copy the config.toml inside themes/tranquilpeak/exampleSite and change only the parts you need

$ mv config.toml config.toml.bak
$ cp themes/tranquilpeak/exampleSite/config.toml .

In my case there were a lot of changes, so I made the fixes while comparing the old config.toml with the config.toml in exampleSite

For details on what changed and what needs fixing, I recommend looking at the Change Log

See also