Hugo Hierarchy Infographic Needed!

support
1

I think a simple visual chart that lets visual people see how the hierarchy of Hugo templates, blocks, sections, etc, works would be an incredible benefit to the entire Hugo community.

I love Hugo with all my heart. It is the best static site method I know. However… there is so much confusion regarding the hierarchy of templates, sections, partials, etc for Hugo noobs and non-devs. I’m a non-dev myself though I’ve managed to wrangle several Hugo sites together and I proudly publish them online. But I’m still confused by the hierarchy! Sections, Types, Blocks, etc are all new to me to it’s very hard to comprehend the big picture with the current docs.

Statics site are booming and more and more everyday bloggers are seeing the light, and Hugo’s leading the way — thank you every who’s involved in making it a free, supported engine. I think a simple visual chart that lets visual people see the hierarchy and templates and overrides would be an incredible benefit to the entire Hugo community. There are plenty of topics here on the Hugo forums that spell it out in various interations of text, but a clear and simple infographic would save hundreds of future discussions and endless hours of trouble-shooting.

So does anyone know a good graphics person?

2

You don’t need a good graphics person. Start simple with dot/graphviz. (You can do it online at http://www.webgraphviz.com/). Make a black-and-white picture and publish it. Once it is out there, someone will feel the need to improve on it, but the hardest part is always that first implementation.

3

I should mention that the advantage of dot/graphviz is that you can post the source to Github or even this thread, making it easy for anyone to correct any mistakes.

digraph G {
  "." -> "Site"
  "Site" -> "Parms"
  "Site" -> "Author"
  "." -> "File"
}

1 Like
4

Is this what you’re looking for?

1 Like