Hey all, I recently redid mysite and documented all of the steps I took to build a theme using hugo. I basically kept notes as I tried to figure out all of the hugo concepts and then turned it into a blog form, and with all of the commands a code to go from hugo new site and hugo new theme to make things work.
I cover
- layouts, partials and blocks
- different hugo variables that change with a basic debug footer.html file
- hugo menu system
- writing different list.html and single.html for different context, posts and photogalleries
- image resizing and formatting
- date formatting
- $Scratch to help with display logic (displaying year headers on the posts list page for example)
- related content
- setting up tagging
- tagging with its own list page, sorting by post popularity
- changing display logic by passing in params in the frontmatter
- using sass in the theme to customize bootstrap
This was the process of all of the steps that I took to build my site, so you can copy and paste along to get the same results. I was looking for a tutorial like this to get my oriented – basically to follow along to get a feel for the way things worked, since the hugo docs are more reference material that is great when you know what to look for but hard to know what I care about. The difference between a single template and a list template didn’t really make sense to me until I actually tried to build something, for example. Since I couldn’t find anything that really walked me through it I figured I’d just write one and see if that helped anyone else.