A step-by-step tutorial on how to build a bootstrap based theme from stratch

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.


Thank You! The copy and paste to get expected results approach is how I like to learn.

How would we communicate any issues or suggestions?

1 Like

I hope that it’s useful! It’s hard to figure out the right level of explaining things, so I just go for “what was it that I’m looking for, try and write that”. I’ve been doing web development for years so I gloss over the html/css basics and focus on hugo. Feel free to leave comments here or reach out directly if there’s something that I got wrong or could clarify better.

1 Like

Thank you, this looks great.

Do you have a demo site for the finished product?

I’ve also just covered how to configure the netlify cms and use circleci to automate the builds

My site itself is a good demo of what the tutorial looks like!