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 😍. 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:

page Kind	content	publish
Home page	/_index.md	/index.html
Regular page	/my-page.md	/my-page/index.html
Section home page	/my-type/_index.md	/my-type/index.html
Section page	/my-type/my-page.md	/my-type/my-page/index.html

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.

---
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.

Hugo will search from the top of every list. Note that:

• the second folder will be checked only when no file is found in the first folder

• 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	/my-type/ / /_default/	my-layout.html index.html home.html list.html
Home Base	/my-type/ / /_default/	index-baseof.html home-baseof.html list-baseof.html baseof.html
Regular Page	/my-type/ /_default/	my-layout.html single.html
Regular Base	/my-type/ /_default/	single-baseof.html baseof.html

If you plan to work with language parameter, Hugo will look first for .fr.html French file extension, next for plain .html

If you are new to Hugo, practice a little bit now. Find useful Hugo tutorial to go deeper. Head over to the Hugo documentation for details. After that go back for advanced tips.