Why my single page in Hugo returns a 404 HTTP error?

Question

I am trying to create a site with Hugo, but I don't get how to add a single page to my website (posts are working fine).

Starting from a fresh install (v.0.27 64x for windows) and running the following command from my terminal:

> hugo new site soexample
> cd soexample
> git clone https://github.com/parsiya/Hugo-Octopress.git themes\octopress
> hugo new about.md
> echo "Please display me" >> content\about.md
> hugo serve -D -t octopress

I can see that my draft page is rendered from the output of the last command:

...
Built site for language en:
1 of 1 draft rendered
...

but when I try to access either http://localhost:1313/about/ or http://localhost:1313/about.html, the server (not the browser) returns a white page with:

404 page not found

What am I missing ?

Understood

Should I instead put my page in a section ? That is to say move soexample\content\about.md to soexample\content\about\_index.md ? – Understood

Answer 1

The problem seems to come from the selected default theme that do not render single page outside of posts section. Themes can be a tricky point for beginners as hugo isn't shipped with default one and no official theme is recommended or supported (so beginners may have to choose randomly).

So the following commands worked for me:

> hugo new site soexample
> cd soexample
> git clone https://github.com/spf13/hyde.git themes\hyde
> hugo new about.md
> echo "Please display me" >> content\about.md
> hugo serve -D -t hyde

The page http://localhost:1313/about/ is correctly rendered.

Understood

Is there a standard way to edit a theme so that it does render single pages outside post sections? – Menendez

Depends what you mean by standard: you can add a single.html file inside your layout\defaultfolder. It will override any layout from your theme to render single files with this layout. The only thing is that the coupling with the theme layouts can be tricky to get rid of. The minimal content you want in your single.html file is {{.Content}}, but you will surely want other elements (header, footer) that can be dependent of your current theme. – Understood

Note that this will not render your home page (content/_index.md), which looks for layout/index.html. I worked around this by creating a symlink. – Darlenadarlene

note that you need to change draft: true to draft: false in the front matter in order for the page to render correctly – Curse

do not forget the frontmatter in about.md. – Polarity

Answer 2

In order to render standalone pages in Hugo you need to set the type to page and make sure you have a 'single' template in your layouts.

In the about.md front-matter set type = "page". In the layouts folder under _default folder make sure you have a single.html file.

That's it, the /about page now should render properly.

Richburg

I have been searching for the answer for this in Hugo's official documentation for hours. – Crwth

The single template was exactly what I needed. Thanks! – Gurglet

type = "page" changed to type: page in frontmatter, my version is 0.121 – Polarity

Answer 3

Possible duplicate, How to add a new hugo static page?

I already answer in that question, copy pasting here also.

I had a similar requirement, to add static page (aboutus in this case). Following steps did the trick,

• Created an empty file content/aboutus/_index.md
• Created aboutus.html page layouts/section/aboutus.html

Overseas

Answer 4

Just stumbled on here, it was drafts, but in my case the solution had an interesting wrinkle:

about/_index.md  (draft)
about/other.md  (not a draft)

Hugo ignores other.md when not building drafts, regardless of other.mds draft state. I'll leave it to the reader to decide if this is a bug or a feature.

Youthful

Answer 5

Modify the configuration file hugo.toml,Change baseURL to "/"

Loredo

Answer 6

I think the problem could be related to draft.

By default, the newly created content has draft: true, and hugo will exclude draft files by default.

You can change it to draft: false or use --buildDrafts option.

Byline

Actually the opposite, newly created content has draft: true. – Kazbek