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 ?

Should I instead put my page in a section ? That is to say move `soexample\content\about.md` to `soexample\content\about\_index.md` ? — Pierre-Jean, Sep 14 '17 at 14:02

score 14 · Accepted Answer · edited Jun 20 '20 at 09:12

14

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 14 '17 at 14:57

Pierre-Jean

1,872
1
15
21

Is there a standard way to edit a theme so that it does render single pages outside post sections? – mjeppesen Oct 08 '17 at 04:29
1

Depends what you mean by _standard_: you can add a `single.html` file inside your `layout\default`folder. 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. – Pierre-Jean Oct 08 '17 at 18:27
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. – David Moles Aug 21 '18 at 20:29
1

note that you need to change `draft: true` to `draft: false` in the front matter in order for the page to render correctly – Trevor McCormick Oct 05 '20 at 01:22

score 12 · Answer 2 · edited Nov 01 '20 at 20:54

12

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.

edited Nov 01 '20 at 20:54

jediz

4,459
5
36
41

answered Oct 03 '17 at 19:12

Scriptonomy

3,975
1
15
23

I have been searching for the answer for this in Hugo's official documentation for hours. – Andre Dickson Jun 26 '18 at 16:45
The single template was exactly what I needed. Thanks! – Chidi Williams May 26 '20 at 14:05

score 1 · Answer 3 · answered Feb 11 '19 at 22:10

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

score 0 · Answer 4 · answered Mar 08 '22 at 11:54

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.

score 0 · Answer 5 · answered Jul 21 '23 at 03:57

0

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

answered Jul 21 '23 at 03:57

bibichuan

1
1

Shuo Feng · Answer 6 · 2023-02-02T03:07:29.493

-1

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.

edited Feb 02 '23 at 03:07

answered Apr 03 '19 at 01:19

Shuo Feng

445
7
13

Actually the opposite, newly created content has `draft: true`. – Kapusch Dec 04 '22 at 12:03

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

6 Answers6

Linked