Relationship between _index.md and index.html

support
1

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 _index.md in the content directory and index.html template in layouts. A site seems to work with or without the _index.md file.

One tutorial stated that you had to have an _index.md 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 _index.md 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 _index.md 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.

2

_index.md 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 _index.md under /content/ you can render it with .Resources

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

3

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 _index.md 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 _index.md 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"

[pageImage]
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 */
}
```
eingestellt.

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.

4

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

I’d already got a bit of content in _index.md 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