Relationship between and index.html

I’m currently trying to get my head around Hugo. I’m getting there bit by bit.

One thing I’m struggling with is the relationship between in the content directory and index.html template in layouts. A site seems to work with or without the file.

One tutorial stated that you had to have an file in the content directory, but that doesn’t seem to be the case, I think. I’m probably wrong. As far as I can see any changes to be made on the home page are done within the index.html file; code pointing to partials etc.

Please can someone tell me what you do in the file to make changes on the home page? I’ve messed around and know how to make changes using the index.html file. I’m sure I read a comment saying that any changes you want to make to the home page you make in the file, but I just can’t figure out how that works.

The answer’s probably staring me in the face, but I’m just not seeing it.

Thanks from a confused beginner. can have front matter and content that can be called in your index.html template.

Also since Hugo 0.32+
If you have an img alongside under /content/ you can render it with .Resources

See the Github repos of the themes that are showcased in They have example sites and that should clear up the confusion.

Same happened to me. It’s easier to understand if you consider index.html as homepage.html Layout.

You’re right: You don’t have to. The advantage of is that you can add Front Matter variables to the template and general content as well. It took me a while to get my head around but now it’s the most flexible tool for me. And: With layout: "templatename" you can determine which template will be used on an individual basis. Amazing.

Perhaps it helps if you take a look to the of my test project. It’s in german but you can clearly see how it’s used:

title           = "Startseite"
description     = "Die Beschreibung der Startseite"
sonstiges       = "Hier steht der sonstige Text"
series          = ["Normale Seite"]
map_anzeigen    = "ja"
# Parameter "all" oder "regulaer"
seiten_anzeigen = ""

author          = "Leo Merkel"

name = "things"
alt  = "Eine Menge Dinge auf Jute"

Der Zeilenabstand wird in der `src/css/tachyons-dev/_styles.css` mit
body {
  line-height: 1.5; /* 1 */

In dem Partial `layouts/partials/head_style.html` wird die Responsivität der Bilder sichergestellt.

Alle Codes, die sich innerhalb `pre` befinden, werden mit der Farbe `black-30` gerendert, es sei denn, sie stehen in einem Bereich mit der Klasse `.bg-navy`.

Everything after the second block of +++ is content and is called in the template (e. g. index.html) with {{ .Content }}. Remember: You can also add content in your index.html! You can call partials, put HTML Code in, have all the Hugo flexibility with variables and functions. This is extremely flexible.

I hope this helps. If you have the time, see Mike’s videos on Hugo site. They’re really helpful for beginning and answer a lot of questions.

Leo thank you so much for your thoughtful and detailed reply.

I’d already got a bit of content in and as per your reply I just added {{ .Content }} to index.html and bam there it was in the browser :slightly_smiling_face:

It’s starting to make a little more sense now.

I’ve looked at Mike’s videos and do find them useful as a starting point. It’s when you start to go beyond that that things become a bit more hazy. I find I understand some things in isolation, but struggle a bit to fit them into the big picture.

I am getting there though. Thanks again.

1 Like