> For the complete documentation index, see [llms.txt](https://andygrond.gitbook.io/hugonette/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://andygrond.gitbook.io/hugonette/hugo/hugo-page-layouts.md).

# Hugo page layouts

in both The way Hugo completes a page can be sometimes frustrating and counterintuitive. But there is some logic behind. And it's not so much complicated :heart\_eyes:. So if you doesn't want to end up with a question: *Where's my page? –* let me explain shortly.

### Content

Every html page must be defined in the `content` folder. How to define content to be published like you want? Here are the rules:

<table><thead><tr><th width="203">page Kind</th><th width="243">content</th><th>publish</th></tr></thead><tbody><tr><td>Home page</td><td>/_index.md</td><td>/index.html</td></tr><tr><td>Regular page</td><td>/my-page.md</td><td>/my-page/index.html</td></tr><tr><td>Section home page</td><td>/my-type/_index.md</td><td>/my-type/index.html</td></tr><tr><td>Section page</td><td>/my-type/my-page.md</td><td>/my-type/my-page/index.html</td></tr></tbody></table>

Any other files (images, css, js) can be placed in the `static` folder. All you put here will be published in the  `publish/` folder. You will refer to that files in partials. For example:

```
<img src="images/{{ "logo.png" | relURL }}">
```

Every content page has a front matter (the upper part) for parameters, followed by a content text.

```
---
title: Login
layout: my-layout
my-logo: logo.png
---
My content
```

Some special variables can be referred this way: `.Title` or `.Content` but the rest will be accessible as `.Params.my-logo`

```
<img src="images/{{ .Params.my-logo | relURL }}">
```

### Layouts

Every layout page is served first from the `layouts` folder. If it's not there, it will be found in `themes/my-theme/layouts`. If more than one theme is used, Hugo will look into every theme.

First you set up a Base template with partials and blocks inside. Then you must create a specific layout for every page, where you define blocks only. Partials should be defined in `layouts/partials/` folder. So there is a Base template and Page template for every page.

You can define `type` and `layout` parameters explicitly in a front matter.&#x20;

```
---
title: Login
language: fr
type: my-type
layout: my-layout
---
```

But if not defined, the layout for a page will be found according to where you have placed its content file. In this case, page section acts like a type.&#x20;

Hugo will search from the top of every list. Note that:&#x20;

* the second folder will be checked only when no file is found in the first folder&#x20;
* any file is looked for in both the project and the themes
* to find `my-layout.html` file you must set `layout` variable in the front matter

| Template for: | Layout folders                       | Layout files                                                                    |
| ------------- | ------------------------------------ | ------------------------------------------------------------------------------- |
| Home Page     | <p>/my-type/<br>/<br>/\_default/</p> | <p>my-layout.html<br>index.html<br>home.html<br>list.html</p>                   |
| Home Base     | <p>/my-type/<br>/<br>/\_default/</p> | <p>index-baseof.html<br>home-baseof.html<br>list-baseof.html<br>baseof.html</p> |
| Regular Page  | <p>/my-type/<br>/\_default/</p>      | <p>my-layout.html<br>single.html</p>                                            |
| Regular Base  | <p>/my-type/<br>/\_default/</p>      | <p>single-baseof.html<br>baseof.html</p>                                        |

{% hint style="info" %}
If you plan to work with `language` parameter, Hugo will look first for `.fr.html` French file extension, next for plain `.html`
{% endhint %}

If you are new to Hugo, practice a little bit now. Find useful Hugo tutorial to go deeper. Head over to the [Hugo documentation](https://gohugo.io/documentation/) for details. After that go back for advanced tips.