Hugo page is not rendering

support
1

Hey everyone,

So I have a new install of hugo.

I created a page like so:
$ hugo new what-we-do.md

This created the file in the content folder.

I went into that file, added some dummy text and changed the draft: true to draft: false.

I then did

$ rm -rf public
$ hugo
$ hugo server

which tells me to go to localhost:1313.

The homepage loads fine, I can see my theme. which just has a side bar at the moment.
However, when I go to localhost:1313/what-we-do I get

404 - Not found

What is going on? Am I missing something painfully obvious?

2

Hi there,

It’s difficult to say what’s going on, we need more info to help. Please see: Requesting Help

Do you have the correct layouts or a theme configured?

3

The theme is configured in config file…
What do you mean by correct layouts? It is my understanding that if there is nothing set for layouts it would just output the raw text?

4

Not quite. Hugo needs layout files to know how to render your pages. It will not output the raw text of your content unless you tell it to do so.

What does your config look like? What theme are you using? What Hugo version? Do you have the code for your site somewhere we can have a look at?

Like I said, there’s not enough information to be able to help; please see Requesting Help.

5

So, I think I figured the problem…

The issue was I was creating the file in the root. Like so:

mySite
|-- content
    _index.md
    what-we-do.md

What I had to do was:

$hugo new what-we-do/_index.md

which gives me the structure:

mySite
|-- content
    _index.md
    |-- what-we-do
        _index.md

so now when I go to: localhost:1313/what-we-do I see the content I need to see.

Am I correct in thinking that for any link that needs to on root like:
localhost:1313/about-us
localhost:1313/what-we-do
localhost:1313/contact

etc…

I need to name the directory what I want the URL to be and then add in an _index.md file?

Is this bad for SEO ?

6

That is not correct: you have many options! Your content can live at any place in your content directory, but permalinks are set by configuration (with defaults): URL management | Hugo

What is SEO?

7

Hey Maiki.

Are you saying that is not correct because my statement is incorrect and that it does not have to be like that or are you saying that is not correct because my url structure is wrong?

SEO - Search engine optimisation.

8

It’s fine to put what-we-do.md or any content file in the root of the content/ directory. For example, my TGIH site includes a content/about.md file that works like this:

source in TGIH/  →  destination in TGIH/public/  →  URL

content/about.md  →  about/index.html  →  example.org/about/

I wrote about this in https://www.ii.com/themeless-gitless-intro-hugo/#_source_files_destination_files_and_pretty_urls

As others have said, you need to show us your project files for us to help. Possible reasons this isn’t working for you include:

  • permalinks setting in your config file
  • a front matter setting in what-we-do.md
  • GO HTML code in your .html files in your layouts/ directory

You almost surely do not want to use a content/what-we-do/_index.md file because that turns what-we-do into a “branch bundle.”

9

Assuming you have the correct layouts in place, and default config. (This is where it would really help us to see code for your site)

Having any one of the three below:

  1. content/what-we-do.md
  2. content/what-we-do/index.md
  3. content/what-we-do/_index.md

will lead Hugo to generate a page on yoursite.com/what-we-do/.

There are a few small differences between them though, and which one you use will depend on what you want to do and how you want to organise your content.

#1 vs #2:

These are both considered regular single pages; these have no child pages. By default they will use the /layouts/_default/single.html layout file, unless a more specific layout file is applicable (see https://gohugo.io/templates/lookup-order/#examples-layout-lookup-for-regular-pages).

So what’s the difference? #2 is a Leaf-type Page Bundle (see https://gohugo.io/content-management/page-bundles/#leaf-bundles). This means that you can nest related resources under it.

For example:

├── content
│   ├── what-we-do
│   │   ├── index.md
│   │   ├── some-photo.jpg
│   │   ├── other-photo.png
│   │   └── document.pdf

This is convenient because you can keep related ‘things’ together.

#3:

This is a Branch-type Page Bundle (see https://gohugo.io/content-management/page-bundles/#branch-bundles). Unlike the first two, this can have child sub-pages under it.

By default this will use the /layouts/_default/list.html layout file, unless a more specific layout file is applicable (see https://gohugo.io/templates/lookup-order/#examples-layout-lookup-for-section-pages).

For example:

├── content
│   └── what-we-do
│       ├── _index.md           # generates yoursite.com/what-we-do/
│       ├── we-can-sing.md      # generates yoursite.com/what-we-do/we-can-sing/
│       ├── we-can-dance
│       │   └── index.md        # generates yoursite.com/what-we-do/we-can-dance/
│       └── we-can-paint
│           ├── paint.png
│           └── index.md        # generates yoursite.com/what-we-do/we-can-paint/

But this all only work with the assumptions I mentioned in the beginning. Does your theme have the correct and necessary layout files? What does your config actually look like?

We can only guess. We cannot possibly know what you want to accomplish and how you are trying to do that with what little information you have provided. This is why we keep asking if you have your code somewhere we can have a look at.

1 Like
10

Thanks for the reply. Sorry I thought that I mentioned about my code initially.

It is a brand new hugo site. The only thing I have changed is added a theme location to the config file and created a theme.

I only added in the bootstrap basic html in my files. For example my partial header file and footer and the list page.

11

Thanks for the reply. Sorry I thought that I mentioned about my code initially in my post:

It is a brand new hugo site. The only thing I have changed is added a theme location to the config file and created a theme using the hugo new theme command:

baseURL = "https://example.com"
languageCode = "en-us"
title = "Site Title"
theme = "my-theme"

I only added in the bootstrap basic html in my theme files. This lead to only two files been edited. The partial header and footer.

I then also added in:

{{ partial "header.html" . }}
{{ .Content }}
{{ partial "footer.html" . }}

Into all the three files that are in the layouts/_defaults folder.

I tried to create a new page what-we-do.md and also blog/testblog.md and when I go to:

mysite .com/what-we-do/
mysite .com/blog/testblog/

The pages return the 404 not found page.

Any ideas?