Hugo 101: variables

I am new to Hugo and frontend in general. I am struggling to understand how Hugo variables work. I went through the Giraffe Academy tutorial. I tried to read the documentation, but it is really confusing for the beginner. How I should approach learning about the basics? Do I need to know Go programming language in order to use Hugo on a basic level? I am trying to build a blog and I am considering switching back to Jekyll. Would appreciate any pointers or direction.

You may want to try zwbetz’s excellent tutorial.

Make a Hugo blog from scratch tips & tricks

Copied from the tutorial intro: In my opinion, Hugo’s current quick start is ample. It does just what the name says, gets you started you quickly . Still, there have many requests on the forums for a tutorial that dives deeper than the quick start, and gets into some templating basics. The thing you’re reading is my go at that. Starting from scratch, we’ll build a Hugo blog. The finished product will be a stripped-down version of the vanilla bootstrap theme. For the folks out there thinkin…

And Mike Dane’s Youtube series for a quick start.

And recommended reading:

1 Like

Thanks for the resources. I already went through Mike Danes tutorials. I know html/css/terminal. My biggest question is about understanding the Hugo varaibles and how to use Go templating language. Do i need to learn foundations of go languge to understand what is happening on the basic level? How to approach learning how to use some of the most common variables and scopes like: Page, Site, with, {{.}}, isset, render etc.

No, you don’t need to. To begin with, you just need to know the “kind” of the variable. It’s usually one of the below (coming from the perspective of a non-Go coder):

  1. scalar (regular variable)
  2. Slice (array) [ From what I read online, Go slices are different from Go arrays, but that detail didn’t matter when learning Go templating. ]
    • You can loop this using {{ range $elem := $array }} or {{ range $idx, $elem := $array }}. See iteration for more.
  3. Map
    • You can loop this using {{ range $key, $elem := $map }}. See iteration for more.
  4. Structure
    • You cannot loop through these. You just need to know what element a structure holds (this is where you need to look at the Go source code, but you don’t necessarily need to know Go).

As I was learning Go templating, I developed this debugprint.html partial that allowed me to introspect the kinds and types of the front-matter parameters and more: https://ox-hugo.scripter.co/test/posts/keyword-collection/#page-params-debug.

3 Likes

I know when I was learning all this I spent quite a bit of time googling stuff reading and re reading the docs, and asking questions here. Practice in the ide building your site and see what error codes come up. Trace them back and start reading again.

1 Like

When reading about Hugo almost every single blog post says that golang templating is really confusing for the beginner. I am still trying to understand where I should start learning about it.

Secondly, also template engine related: I have yet to find an IDE or code editor which isn’t super confused about the syntax of go-templates. If you’re developing a theme or deal with layout files, you’ll get tons of useless error and warning messages.

Where I should start learning about how to pass context properly?

It’s easy to forget to pass in the current context into a partial or use the wrong context.

Where I should start learning about correctly inheriting templates?

There are intrinsic rules for when you can inherit templates, and when you must include them explicitly.

Excerpts from Mathias Adler blogpost

I learned most of what I know about templating from

  1. this doc https://gohugo.io/templates/introduction/
  2. reading the code of themes i liked https://themes.gohugo.io/
2 Likes

I’ve actually spent some time learning go-lang. I didn’t think it was that hard really. Different yes in a lot of ways but not harder. I kind of wonder if you are sweating the details a bit too much. Here is what I will do for you. I made a simple site, very simple,and I will link my code here so you can see what that looks like. This is what it actually looks like. I used netlify to publish this site. I didn’t think it was that hard I found it easier than others I have tried. In my code you can see examples of stuff you are looking for I think. Not everything will be there, but it is enough to make simple little blog web-site. That should give you a good place to start anyways. I hope it helps. You’ll still have to do searching to get all the answers your looking of course. My code is not perfect but it does work, for the most part, and that should at least point you in a good direction. Good luck.

1 Like

Awesome! Thanks so much, this is helpful. Now, I understand “GetPage” and “where” functions. Is there any resource or anything else that helped you understand Hugo syntax faster?

I think there is quite a gap for accessing Hugo. If you are starting out you can go with Giraffe Academy tutorial. But after that, it is really hard to get going. Everybody says that Hugo is easy and straightforward – probably after a learning curve, it is. I think a lot of people who pick up Hugo have a decent knowledge of other frontend environments. However, for people that are frontend beginners, Hugo is pretty inaccessible.

I’m all ears for useful feedback, but in my opinion this is not useful. AKA there is no obvious action that can be taken from this criticism to make things better.

With that said, once you get to a point where you are comfortable with the syntax, feel free to open a docs PR for areas you feel could use improvement. Or create a tutorial that eases folks into what you’re labeling as “inaccessible areas”. You get the idea :slight_smile:. Wishing you good luck.

1 Like

The short answer is no. Girrafe academy was a great place to start, but after that you have start on that learning curve. I personally had to watch those videos several times and then go to the docs and hash out what he was talking about. The reason I posted the code was so that you could see it and then compare that to your own code. I went through several of the themes doing that, but those usually have a ton of things I just didn’t need, but I did figure out how the base of HTML page worked and how to reference one page to another. Some things I still don’t quite get but as you can see I got close enough to do what I wanted to. Just start typing and learning. When you get stuck you have a reference that might help. Good luck

1 Like

Perhaps this article is helpful, I found other articles on his blog that helped me too.