Structure of a Hugo site

Archetypes:

• Holds templates for the creation of markdown files.
• The default format for front matter is using YAML.
• Some people prefer to use TOML. We will be using YAML as its simpler to work with.
• Each website page is generated from a markdown file.
• The page content (markdown) is placed below the front matter closing tag (—)

Archetypes folder has a file called default.md. This file specifies the template that will be used in markdown files of the entire project. The format we specify here will be used in the entire project.

We have set draft to true. You can set it to false so that the markdown files will be ready to publish by default.

Content:

• The content directory is where markdown files for each website page are stored.
• You can create new markdown files with the command “hugo new [path]”
• Example – “hugo new about /index.md” . This creates a markdown file in /content/about/index.md
• The page will be available at / about/index.html or /about/

Data:

• The data directory is for storing data which is shared between pages.
• It supports data in format of YAML, TOML and JSON.
• You can insert the data into pages for that you need to have to have a markdown (.md) file for each page.

(Note: you can’t generate pages directly from data files, This is a limitation of Hugo as of now (13th Aug 2023)

Layouts:

• Layouts define blocks which are included in baseof.html
• Markdown files (.md) will not be rendered if you layouts directory is empty.

Static:

• Stores all the static content. This content includes images, CSS and JavaScript.

Themes:

• Themes Directory includes the themes of the project.
• We can create our own theme in Hugo or simply clone someone else’s theme
• Hugo has a support of a lot of free open-source themes that can be used.

hugo.toml:

• This is where website configurations are done.
• you can also convert it to JSON, YAML formats.

Continuing the Coding part:

Step 5. Create a new home page with the command

“hugo new _index.md”

This will generate a _index.md file in content folder. You can add content to the file or simple jump to Step 6

Step 6. Add content to the index.md file from layouts folder

Step 5. Use this command to check you website

“hugo server”

Step 6. Go to http://localhost:1313/ and check you Hugo website out

Let us see a code snippet of a more complex Hugo site:

Hugo is a fast and modern static site generator written in Golang. Hugo is the world’s fastest static site generator, wondering what a static site generator is? will explain it in the Third paragraph, till then let’s discuss Hugo. Hugo is primarily written in Golang, But you don’t need to know Golang to work in Hugo. Website generation in Hugo is very simple and straightforward, only prerequisites are HTML and CSS. It was created by Bjørn Erik Pedersen, also known as “bep,” its first release was on July 17, 2013.