Beginner Question: How do I display content on home page (index.html)? [SOLVED]

I want to use Hugo with Foundation 6. I am currently set up with GitHub Pages and Netlify but I plan on moving to GitLab Pages in the future.

I have created theme with > hugo new theme firstTheme
I have created a first post with> hugo new post/

I don’t understand how to link this first post to the index html.
I have read through the but I am still confused.

Do I need: {{< ref “document” >}} all these brackets?
Why will this not work? a href="/content/post/">My First Post /a>
Also how do I post code properly on this forum?

According to index.html the current directory is firstTheme?
I have tried a few variations of “…/…/content/post/”

This is my current tree:

│ └───post
│ ├───archetypes
│ ├───images
│ ├───layouts
│ │ ├───partials
│ │ └───_default
│ └───static
│ ├───css
│ ├───img
│ └───js
│ └───vendor

Hello @jswtch,

how do you want to display the content of on the homepage? Do you want to display a list of all posts like on a blog? Or should the homepage just be used to show the content of

Cross-references are only used to link from one content file to another one, but not inside a template. You can use cross-references to link to link a paragraph in for example.

Because your post will be rendered at /post/first/index.html.

This forum supports Markdown to format text. You can wrap in-line code in backticks `. For more information look here.

Alternatively, you can use the formatting options above the input field for your comments. Look for the </> icon.

Thanks for the quick reply. I don’t want to actually display the content on the homepage. I just want to link to another page.

So I think I am confused about single page content (, and the creation of posts.

What is the difference?
I want to eventually have a homepage, about page, product page, blog page (with posts). I’m guessing with the “hugo new post” I can start building an archive that can be rendered to a single page I set up for the blog?

So does each page require its own html doc? I understand index is for the homepage (called first), but what would I call the others and how would I link to them?

You will be able to do all of this easily with Hugo, so no worries.

A single page is directly correlated with a single markdown file. A list page is correlated with a list of single pages.

If you’re thinking about your site’s architecture according to the example you gave above, it would look something like this:

                               index.html (home)
         |                             |                                  |
      About (single)        Product (single)                         Blog (list)
                                                              |            |           | 
                                                        Post(single)   Post(single)   Post(single)

Keeping single pages at the root (eg, a single about page that lives at yoursite/about/) can seem tricky at first, but there are plenty of ways around this. First, here’s a way to think of your list vs single pages:

  • Your Blog (list) page template is going to live at layouts/sections/blog.html. This is where you format the list page that introduces the section (the section in this case is blog and all posts will live in the content/blog/ folder).
  • Your Post (single) page templates can live at /layouts/blog/single.html. Keep in mind that these are just examples of where they can live, but you have a lot of freedom w/r/t setting up default templates.

There are multiple ways to set up single pages at the root (ie, your About (single) and Product (single) pages) and bypass a list page for the singles section (ie, since it sounds like you want and not The way I do it is to set up a section called singles (ie, a folder at content/singles) and then set the following in my config.toml to shorten the permalink for all singles single/individual content files (ie, each .md file):

  singles = "/:title/"

So if I create a single content file at content/singles/, the final url for the page is
By default, this page can render according to the template you create at layouts/_default/single.html, but you have flexibility here as well. You can also declare the type and layout in the front matter of the page. For example:

type: singles
layout: aboutpage

Then create a template at layouts/singles/aboutpage.html and this will be the first page that Hugo looks for when rendering the About page that will live at (ie, a pretty url equivalent to


Thank you for your thoughtful reply. I believe this will solve my problem.

You could take a look at my Hugo Skeleton Site. It’s designed to show newbies to Hugo how a theme fits together.


@stiobhart Great resource! I am working through it now.

1 Like