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

support
1

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/first.md

I don’t understand how to link this first post to the index html.
I have read through the https://gohugo.io/extras/crossreferences/ but I am still confused.

Do I need: {{< ref “document” >}} all these brackets?
Why will this not work? a href="/content/post/first.md">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/first.md”

This is my current tree:

D:.
├───archetypes
├───content
│ └───post
├───data
├───layouts
├───static
└───themes
├───firstTheme
│ ├───archetypes
│ ├───images
│ ├───layouts
│ │ ├───partials
│ │ └───_default
│ └───static
│ ├───css
│ ├───img
│ └───js
│ └───vendor

2

Hello @jswtch,

how do you want to display the content of first.md 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 first.md?

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

3

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.

4

So I think I am confused about single page content (https://gohugo.io/templates/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?

5

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 mysite.com/about and not mysite.com/singles/about/). 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):

[permalinks]
  singles = "/:title/"

So if I create a single content file at content/singles/about.md, the final url for the page is mysite.com/about/.
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:

---
title:...
...
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 yoursite.com/about/ (ie, a pretty url equivalent to yoursite.com/about/index.html).

HTH.

6

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

7

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

4 Likes
8

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

1 Like