Where does hugo get its landing page from?

[aarem]

I am new to hugo and wanting to learn at least a few basic things. So, I decided to Quick start and get things going.

However, my question is not on what file to edit to add new material (that information) is there, but on how a html file is created that takes the markdown file? What files do hugo look at, in a theme or elsewhere, to decide how to, for instance, format or lay out the different pieces to come up with as a landing page?

I found the following slow start: however, it does not really answer the question.

Hugo 101: Slowstart for beginners

Hugo makes creating a new site easy, but the site is blank. This blank slate is helpful if you’re experienced and don’t want to delete a bit of configuration before building your site, but it can be really rough on beginners just trying to understand how to get going. The purpose of this post is to give newbies a leg-up by showing what needs to be done to get to a “working” site. It’s not intended to explain “why” things need to be done (the documentation does a good job of that). TL;DR: Cre…

My question is not on the files to be edited for content, but where the “hugo renderer” ge its style from.

Any pointers here for my question? Many thanks!

[jmooring]

In a simplistic implementation…

1. Hugo grabs your text and metadata from the content file in the content directory.
2. It picks a template from the layouts directory based on a predefined lookup order.
3. It wraps that template inside a baseof.html shell.
4. It processes related assets such as CSS, JS, and images.
5. It compiles these pieces into a final HTML file saved in the public directory.

For foundational questions like this, AI assistants like Gemini or ChatGPT are actually great resources for getting quick, clear breakdowns.

[aarem]

Thank you! Assuming that the questons have been asked multiple times, AI tools are fine, no doubt, but they are also good at someimes making stuff up.

But my question was not really answered there,

From what I understood, the baseof.htmlinside the ananke theme (say) is what is looked at. But isn’t this file the base template for all files. How does it know where to get the landing page from?

Is the home the same as a landing page?

Template types

Introduction to templating I guess I should also look into this so see what the baseof file syntax stands for? It is not the usual html (or at least is more advanced than what I am used to).

Btw, I am just curious, but there is code here for TOML, YAML and JSON as examples, but the MD area appears to be missing: for example, Introduction to templating in contacts/annual-conference.md?

Thank you again!

[jmooring]

content/_index.md

Hugo asks, “What is the page kind?” → home
Hugo asks, “Which template type should I use?” → home falling back to list
Hugo asks, “Based on the define actions in this template, should I wrap it in a base template?” → yes

Reference:

• https://gohugo.io/templates/types/#base
• https://gohugo.io/templates/new-templatesystem-overview/#changes-to-template-lookup-order

[markupandmatcha]

the lookup order is what makes hugo tick once you understand it — and it genuinely does click all at once when it does.

the really short version: hugo takes your content (the markdown file), picks a template from your layouts directory, and wraps the whole thing in baseof.html. the CSS and JS come from wherever your theme links them — usually from an assets folder processed through Hugo Pipes, or just static files in static/.

the key file to understand first is layouts/_default/baseof.html. it’s the skeleton of every page. then you’ve got layouts/_default/single.html for individual posts and layouts/_default/list.html for index/listing pages. those slot into baseof.html using the {{ block "main" . }} / {{ end }} pattern.

what tripped me up early on was thinking the theme handled all of this magically. it does — but in a really transparent way. if you open the theme folder and look at its layouts/ directory, you’ll see the exact same file structure. your site’s layouts/ directory overrides anything in the theme, file by file. so if you want to change how a single post renders, you just copy themes/yourtheme/layouts/_default/single.html to layouts/_default/single.html and edit from there.

the hugo docs page on template lookup order is worth bookmarking — it shows the exact priority order hugo uses to pick templates.

hope that helps! once you’ve got the baseof → single/list pattern in your head it all starts to make sense.