Browser docs

Creating Content

HB Framework Authors March 7, 2023 3 min read Docs
On this page

Content is the most basic and core part of a site. This article will introduce some basic concepts of content and how to create it.

Content Structure

 1tree content/blog 
 2content/blog
 3├── _index.md
 4├── hello.md
 5├── foo
 6|   ├── feature.png
 7│   ├── bar.md
 8│   └── index.md
 9├── posts
10│   ├── _index_.md
11│   ├── post-1.md
12│   └── post-2.md

The content structure above has:

  • Four regular pages: blog/hello/, blog/foo/, blog/posts/post-1/ and blog/posts/post-2/.
  • Two branch bundles (any directory at any hierarchy that contains an _index.md file): blog and posts.
  • Three branch content: hello.md, posts/post-1.md and posts/post-2.md.
  • One leaf bundle (a directory at any hierarchy that contains an index.md): foo. The Leaf bundle will be a regular page and the rest of the content will be its page resource, e.g. foo/bar.md is a page resource, not a regular page.

For more information, please refer to Content Organization and Page Bundles.

Creating Content

Create content with the hugo new command.

1hugo new blog/hello/index.md

This command will create a blog/hello/index.md content page in the content directory, with initial content similar to the following:

1---
2title: "Hello"
3date: 2023-03-08T11:02:23+08:00
4draft: true
5---

Archetypes

Content archetypes is the templates for creating content, you can define some initial parameters and content, for example the following notes archetype specifies type as docs to use the docs layout.

archetypes/notes.md
1---
2type: docs
3title: '{{ replace .Name "-" " " | title }}'
4date: {{ .Date }}
5draft: true
6---

When created, the initial content will be generated using the corresponding template.

1hugo new notes/foo.md   
2Content "content/notes/foo.md" created

1cat content/notes/foo.md
2---
3type: docs
4title: 'Foo'
5date: 2023-04-12T14:35:35+08:00
6draft: true
7---

Read more on Archetypes。

Content Composition

Each content page consists of the front matter and the body.

1FRONT MATTER
2
3CONTENT BODY

Content Front Matter

Used to define the parameters of the content, such as title, date, tags, categories, etc.

Content Front Matter Format

YAML、TOML and JSON are supported.

YAML Front Matter

YAML front matter are wrapped by ---.

1---
2title: "Hello"
3---

TOML Front Matter

TOML front matter are wrapped by +++.

1+++
2title = "Hello"
3+++

JSON Front Matter

JSON front matter are wrapped by { and }, followed by a new line.

1{
2  "title": "Hello"
3}

Content Body

literally the content itself, with support for Markdown and shortcode writing content.

Learn More