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

**URL:** <https://discourse.gohugo.io/t/beginner-question-how-do-i-display-content-on-home-page-index-html-solved/4110>\
**Category:** support\
**Created:** [September 17, 2016, 6:07pm UTC](https://discourse.gohugo.io/t/beginner-question-how-do-i-display-content-on-home-page-index-html-solved/4110 "2016-09-17T18:07:04Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![jswtch](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jswtch/32/8984_2.png) [@jswtch](https://discourse.gohugo.io/u/jswtch)\
**Post date:** [September 17, 2016, 6:07pm UTC](https://discourse.gohugo.io/t/beginner-question-how-do-i-display-content-on-home-page-index-html-solved/4110/1 "2016-09-17T18:07:05Z")

</div>

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/](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

---

<div class="post-metadata">

**Author:** ![digitalcraftsman](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/digitalcraftsman/32/4142_2.png) [@digitalcraftsman](https://discourse.gohugo.io/u/digitalcraftsman)\
**Post date:** [September 17, 2016, 6:39pm UTC](https://discourse.gohugo.io/t/beginner-question-how-do-i-display-content-on-home-page-index-html-solved/4110/2 "2016-09-17T18:39:50Z")

</div>

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`?

> [@jswtch](#):
>
> I have read through the [Links and cross references | Hugo](https://gohugo.io/extras/crossreferences/) but I am still confused.

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.

> [@jswtch](#):
>
> Why will this not work? a href=“/content/post/first.md”\>My First Post /a\>

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

> [@jswtch](#):
>
> Also how do I post code properly on this forum?

This forum supports [Markdown](https://daringfireball.net/projects/markdown/syntax) to format text. You can wrap in-line code in backticks ```. For more information look [here](https://daringfireball.net/projects/markdown/syntax#precode).

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

---

<div class="post-metadata">

**Author:** ![jswtch](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jswtch/32/8984_2.png) [@jswtch](https://discourse.gohugo.io/u/jswtch)\
**Post date:** [September 18, 2016, 1:05am UTC](https://discourse.gohugo.io/t/beginner-question-how-do-i-display-content-on-home-page-index-html-solved/4110/3 "2016-09-18T01:05:52Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jswtch](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jswtch/32/8984_2.png) [@jswtch](https://discourse.gohugo.io/u/jswtch)\
**Post date:** [September 18, 2016, 1:33am UTC](https://discourse.gohugo.io/t/beginner-question-how-do-i-display-content-on-home-page-index-html-solved/4110/4 "2016-09-18T01:33:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![rdwatters](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/rdwatters/32/2848_2.png) [@rdwatters](https://discourse.gohugo.io/u/rdwatters)\
**Post date:** [September 18, 2016, 4:08am UTC](https://discourse.gohugo.io/t/beginner-question-how-do-i-display-content-on-home-page-index-html-solved/4110/5 "2016-09-18T04:08:19Z")

</div>

> [@jswtch](#):
>
> So I think I am confused about single page content ([Templates | Hugo](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?

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:

```auto
                               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):

```auto
[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:

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

---

<div class="post-metadata">

**Author:** ![jswtch](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jswtch/32/8984_2.png) [@jswtch](https://discourse.gohugo.io/u/jswtch)\
**Post date:** [September 18, 2016, 6:14am UTC](https://discourse.gohugo.io/t/beginner-question-how-do-i-display-content-on-home-page-index-html-solved/4110/6 "2016-09-18T06:14:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![stiobhart](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/stiobhart/32/161_2.png) [@stiobhart](https://discourse.gohugo.io/u/stiobhart)\
**Post date:** [September 18, 2016, 6:59am UTC](https://discourse.gohugo.io/t/beginner-question-how-do-i-display-content-on-home-page-index-html-solved/4110/7 "2016-09-18T06:59:45Z")

</div>

You could take a look at my [Hugo Skeleton Site](https://github.com/madranet/hugoskeletonsite). It’s designed to show newbies to Hugo how a theme fits together.

---

<div class="post-metadata">

**Author:** ![jswtch](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jswtch/32/8984_2.png) [@jswtch](https://discourse.gohugo.io/u/jswtch)\
**Post date:** [September 18, 2016, 3:43pm UTC](https://discourse.gohugo.io/t/beginner-question-how-do-i-display-content-on-home-page-index-html-solved/4110/8 "2016-09-18T15:43:10Z")

</div>

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