Hugo Basics

Understanding Structure and Syntax

Posted by Garrett Mac on 01/01/1990
In Frameworks
Tags hugo

I decided to move away from using a Jekyll Blog and use Hugo to manage my site and blog posts because I found liquid/ Jekyll too hard to understand what variable are available on my scope along with some other issues so here I like to provide you with what I’ve learned using Hugo’s syntax.

Reading docs can be a pretty dry read and I find it always better to see it in practice so this can be used as a reference sheet to help you out with your Hugo development.

Working with Variables

In your config.toml you’ll see variable declared using brackets “[]” these you can get at in your view by using the “.” syntax.

For Example lets say I have the following in my config.toml

    foo= "bar"

You can get at that in your view by using the following syntax:

syntax used>>    {{ }}

output in view>>   bar

Declaring variables in the view

This the the javascript equivalent of declaring variable in Hugo In Javascript

var paginator = foo

in hugo view

{{ $paginator := foo}}

Getting at variables in the data/ folder

Using the {{ .Site.Data }} syntax gets all the .toml files inside the data/ folder

So lets say I have the following in my data folder


Inside my work.toml file

title = "Work"
    name = ""
    folder = 'proj-1'
    file= 'work/proj-1.html'

    name = ""
    folder = 'proj-3'
    file= 'work/proj-3.html'

And using {{ .Site.Data }} will display the following in the view (I beautified the results so its easier to read)

          projects: [map[ folder:proj-1 file:work/proj-1.html]
                     map[ folder:proj-3 file:work/proj-3.html]

where using >>

{{ }} outputs >>

but to be safe use
could crash   >> {{ }}
instead use (the safe way to display it) >>  {{ with }}{{ . }}{{ end }}


to loop through each item in blog.toml (with only one item of “title”) range loop >>

{{ range }}<br />{{ . }}{{ end }}

outputs >>


to loop though each projects name in work.toml range loop >> ```bash {{ range }}
- {{ .name }}{{ end }}



You can also display key and values (name $key and $value what ever you want. The “$” isn’t required its just used as a way let you know its a variable you declared)

range loop (with declared $key and $value vars):

{{ range $key,$value := }}
{{$key}} - {{$value}}


name -
name -

Hope This helps get you started!

comments powered by Disqus