The website is structured and managed in a git version-controlled repository. The files are organized in main root directories, such as /content for the website content (list and single pages, translations, resources such as illustrations), /config, /data, /themes, etc.

Directory Structure

By default, Hugo looks for Markdown files in the /content directory, and the structure of the directory determines the final output structure of your website.

Take this site as an example:

• /content
  • _index.md ← / (homepage)
  • docs
    • _index.md ← /docs/
    • getting-started
      • index.md ← /docs/getting-started/
    • guide
      • _index.md ← /docs/guide/
      • organize-files.md ← /docs/guide/organize-files/
  • blog
    • _index.md ← /blog/
    • post.md ← /blog/post/
    • article
      • index.md ← /docs/article/

Each _index.md file is the List page for the corresponding Section. The other Markdown index.md or my-page.md files are regular Single pages, placed directly in the section directory, or nested in their own sub-directory.

• Single (index.md) pages are in general where most changes are made.
• List (_index.md) pages in general gather content from related Single pages and need little changes.

Content files are mostly written with Markdown and contain a metadata header called the Front Matter at the top of the file in-between the YAML --- characters. The content of Single and List pages is then generated into HTML by Hugo templates in the Theme Theme, project setup, and configurationEnhance the website project and the Trigo Theme..

Configure Content Directory

By default, the root /content directory is used by Hugo to build the site. If you need to use a different directory for content, for example /docs, this can be done by setting the contentDir parameter in the site configuration hugo.yaml.

Resources

In addition to text content, Hugo supports a wide range of additional resources, such as images, animations, vector graphics, videos, PDF, JSON, CSV, and many more medias and data formats.

Page bundles

To add linked resources for a specific page, the easiest way is to place these files together in the same folder as the page Markdown file.

The method called page bundles is a Hugo feature that allows to organize content and resource files neatly and makes relative links easy. To achieve that, turn the my-page.md file into a directory my-page, put the content into a Markdown file named index.md, and put the resource files inside the my-page directory.

For example, add an image file image.webp alongside the my-page.md file:

• content
  • section
    • my-page.md
    • image.webp

Then, can use the following Markdown syntax to add the image to the content:

![alt](image.webp "title")

Static and Assets

Alternatively, it is possible to place resources in the static and assets root directories, which will make the resources available for all pages:

• static
  • images
    • image.webp
• content
  • section
    • my-page.md

![alt](/images/image.webp "title")