4. Content™️

18 Feb 2023

Let’s add some content to our site! Hugo uses markdown files for content, which makes writing super easy! You can read more about markdown formatting here.

Making a test post

1. Open a terminal to /content/posts/, then type hugo new post yourpostname. This will generate a markdown file with the front matter that Hugo needs.
2. Open the markdown file. Note the front matter at the top of the file - Hugo uses this info for various site functions (ex. sorting posts by date, or listing titles)
3. Make sure draft: false is present in the front matter.
4. Add some example content!
5. Save the file, then open your site to localhost:1313/archive. You should see the post appear in the list.

Organization

Hugo offers a flexible content organization system. It’s quite powerful, and I highly encourage you to read more about it in their docs. However, it can be a bit overwhelming for newcomers.

For this guide, I’m going to show two simple methods of organizing content in Hugo:

- Flat Branch Bundle

This method replicates the file organization of Zoner. The file organization looks like this:

your-site/
├── content/
│   ├── posts/
│   │   ├── post1.md
│   │   ├── post2.md
│   │   ├── post3.md
│   │   └── _index.md
│   ├── about.md
│   ├── another-single-page.md
│   └── _index.md
└── static/
    ├── files/
    │   └── post2/
    │       └── document.pdf
    └── img/
        ├── post1/
        │   ├── image1.jpg
        │   └── image2.jpg
        ├── post2/
        │   └── image1.png
        ├── post3image1.jpg
        └── post3image2.png

Some key points for this method:

• All of the single pages live in the top level content directory.
• All of the posts pages live in the top level posts directory.
• The markdown file names are arbitrary except for _index.md, which is used for the root index and list pages.
• All images, linked files, etc, live in the static folder at the root of the site. You have to reference them with the full file path, ex. [Image 1](/static/img/post1/image1.jpg)
• The file organization and naming in the static folder is arbitrary.

- Leaf Bundle per page

Making a leaf bundle per page will allow all of the page resources (markdown, images, etc) to live in a single folder. I personally prefer this method because it’s easier to add images to posts. The file organization looks like this:

your-site/
├── content/
│   ├── posts/
│   │   ├── post1/
│   │   │   ├── index.md
│   │   │   ├── image1.jpg
│   │   │   └── image2.jpg
│   │   ├── post2/
│   │   │   ├── index.md
│   │   │   ├── image1.png
│   │   │   └── document.pdf
│   │   ├── post3/
│   │   │   ├── index.md
│   │   │   ├── post3image1.jpg
│   │   │   └── post3image2.png
│   │   └── _index.md
│   ├── about/
│   │   └── index.md
│   ├── another-single-page/
│   │   └── index.md
│   └── _index.md
└── static/

Some key points for this method:

• Each single page gets its own directory at the top level.
• Each post page gets its own directory inside the posts directory.
• Each page’s directory name is arbitrary, but the markdown name must be index.md.
• Images, linked files, etc for a post:
  • Generally live inside each post’s directory.
  • Can be referenced with relative file paths, ex. [Image 1](image1.jpg).
  • Can also be placed in static if desiered, but the full file path needs to be referenced in markdown.

This is a starting place

These organization methods are just suggestions for starting out. They work well for a simple site like hugo-zones. Hugo offers deeper functionality if you outgrow these or just want something else. If that’s the case, I again encourage you to read the Hugo docs.