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

1	Document Template directory
2	markdown template
3	hugo project configuration file
4	All 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

1	Sets the `content` folder as a brach.
2	This 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:

Add a Link to 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"

1	Indicate the Link higherchy
2	Link Name, what the website user will see.
3	Link 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:

← Quickstart | Index | Add Blog →