Add a Simple Page

Add the simplest page in Hugo. This method is fine for simple sites and writings without images or other media.

Project Folder Structure

On the previouse page, mysite project was started. The project folder looks like this:

mysite ──+── archetypes (1)
          │   └── default.md (2)
          ├── config.toml (3)
          ├── content (4)
          ├── data
          ├── layouts
          ├── static
          └── themes
1Document Template directory
2markdown template
3hugo project configuration file
4All the site content will be added to this folder

Note: The folder name mysite is also called project root.

Turn "content" folder into a branch.

Do not skip this step, Hugo needs this file to recognize the folder as a tree.

Add index.md file to the content <4> folder to turn it into a _branch, meaning that the content folder can contain other pages.

hugo new content/_index.md

Add a text only page (no images).

Make sure you are in the project root, which is the mysite folder. In terminal:

$ hugo new about-me.md
/Users/myhome/mysite/content/about-me.md created

The folder structure now looks like this:

├── archetypes
│   └── default.md
├── config.toml
├── content
│   ├── _index.md   (1)
│   └── about-me.md (2)
├── data
├── layouts
├── resources
├── static
└── themes
1Sets the content folder as a brach.
2This is where About Me content will go.

Open file mysite/content/about-me.md and it should look like this:

1
2
3
4
5
---
title: "First"
date: 2020-10-22T07:10:12-04:00
draft: true
---

Add some text to the very bottom of the file like this:

1
2
3
4
5
6
7
8
---
title: "About Me"
date: 2020-10-22T07:10:12-04:00
draft: true
---

Hi, I am me, this site is about me.  I would like to introduce myself to the
world because there are things that I have to offer.

Save the file. If the server on the previouse page is running, Hugo will automatically rebuild the site.

Go to the browser and in the address bar enter localhost:1313/about-me Note: be sure to replace the 1313 port with the port your Hugo server in terminal specified. You should now see something like this:

About Me page

Open up the config.toml file in the project root. Find the params.links.list1 section and add a link to the bottom of the section like so:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
  # Links
  #
  # Links List #1
  [[params.links]]
    [params.links.list1]
      heading = "Connect"

      [[params.links.list1.link]]
        text = "Blog"
        url = "#"

      [[params.links.list1.link]]
        text = "Email"
        url = "#"

      [[params.links.list1.link]]
        text = "Newsletter"
        url = "#"

      [[params.links.list1.link]]  (1)
        text = "About Me HaHa"     (2)
        url = "/about-me/"         (3)

  # Links List #2
  [[params.links]]
    [params.links.list2]
      heading = "Social"
1Indicate the Link higherchy
2Link Name, what the website user will see.
3Link Path, since the file is inside content directory, it is simply /about-me/

Save the file and in browser, go back to localhost:1313 and you should now see this:

About Me page