How to add a new hugo static page?

Question

From the "getting started" section it seems this should work, but it doesn't.

hugo new site my-site
hugo new privacy.md
hugo server --watch --includeDrafts

curl -L localhost:1313/privacy/index.html
# 404 page not found
curl -L localhost:1313/privacy.html
# 404 page not found
curl -L localhost:1313/privacy/
# 404 page not found

How can I add a new page?

From what I understand: create it like any other post with the exception that it it should be in the `content` directory. i.e. don't put it inside the `content/posts` directory — mfaani, Jan 08 '22 at 20:58

score 46 · Answer 1 · answered May 29 '16 at 21:10

This is the best tutorial how to create static "landing pages" on Hugo: https://discuss.gohugo.io/t/creating-static-content-that-uses-partials/265/19?u=royston

Basically, you create .md in /content/ with type: "page" in front matter, then create custom layout for it, for example layout: "simple-static" in front matter, then create the layout template in themes/<name>/layouts/page/, for example, simple-static.html. Then, use all partials as usual, and call content from original .md file using {{ .Content }}.

All my static (landing) pages are using this method.

By the way, I'm not using hugo new, I just clone .md file or copy a template into /content/ and open it using my iA Writer text editor. But I'm not using Hugo server either, adapted npm-build-boilerplate is running the server and builds.

imo the process is bit complicated. But thanks u showed a direction ! =) — jamland, Aug 24 '16 at 13:06
This should have been the right answer and also aligns with the documentation of Hugo as on 2020. — Naveen, Jul 29 '20 at 15:22
THIS WORKS, I just checked. I spent a shameful amount of time on this. — Konstantin Kozirev, Dec 15 '22 at 20:00

score 24 · Accepted Answer · edited Jan 30 '21 at 02:08

24

Just tested OK with this on Hugo 0.13:

hugo new site my-site
cd my-site
hugo new privacy.md
hugo server -w -D
curl -L localhost:1313/privacy/

Note: You have to either use a theme or provide your own layout template to get something more than a blank page. And of course, some Markdown in privacy.md would also make it even nicer.

See http://gohugo.io/overview/introduction for up-to-date documentation.

edited Jan 30 '21 at 02:08

bryant1410

5,540
4
39
40

answered Mar 05 '15 at 15:11

bep

1,662
15
16

Why do you need the -w -d? – David Marciel Feb 26 '20 at 11:54
4

With hugo 0.69.0, that's not working any longer for me. `% curl -L localhost:1313/privacy/`: `404 page not found` – Lars Blumberg May 12 '20 at 15:12
2

Make sure to set draft: 'false' for the page to show up – neric Jun 04 '20 at 17:22
1

If you're seeing a `404 page not found` make sure you set `type: page` and have a `single.html` layout as explained in this post: https://stackoverflow.com/questions/46216333/why-my-single-page-in-hugo-returns-a-404-http-error – Andres Apr 04 '21 at 19:05
@neric you don't need to set `draft: false` if you use the -D flag on the `hugo server`, as this enables rendering of drafts as well I believe – Lushawn Aug 26 '22 at 10:29
Do you have to use `hugo new`? What if I already have a file? Do I really have to move it out of the way to use `hugo new` and then move it back? – Martin Aug 28 '23 at 15:39

score 14 · Answer 3 · answered Dec 28 '18 at 19:50

14

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

answered Dec 28 '18 at 19:50

Balkrishna

2,897
3
23
31

score 4 · Answer 4 · answered Aug 21 '20 at 07:52

Make you have some default frontmatter set in archetypes/default.md

# archetypes/default.md
+++
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true
+++

And the single layout in layouts/_default/single.html to render some variable or content

# tags to render markdown content
<h1>{{ .Title }}</h1>
<p>{{ .Content }}</p>
<span>{{ .Params.date }}</span>

Now type hugo new privacy.md which will create a new page on the following directory in content/privacy.md

score 3 · Answer 5 · answered Mar 26 '19 at 07:16

3

Take "About" as example:

# will create content/about.md
hugo new about.md

Edit about.md and add the last 2 lines, the metadata/front matter looks like:

title: "About"
date: 2019-03-26
menu: "main"
weight: 50

That should work.

answered Mar 26 '19 at 07:16

Michael

325
1
7

This got the link in menu. But I could see it as post as well in home page. Any way to remove that? – Ramesh Apr 21 '21 at 02:05
Do you have to use `hugo new`? What if I already have a file? Do I really have to move it out of the way to use `hugo new` and then move it back? – Martin Aug 28 '23 at 15:39

How to add a new hugo static page?

5 Answers5

Linked