Directory Structure

By default, Hugo searches 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
  • docs
    • _index.md
    • getting-started.md
    • guide
      • _index.md
      • organize-files.md
  • blog
    • _index.md
    • post.md

Each of the _index.md files is the index page for the corresponding section. The other Markdown files are regular pages.

📁content
├── _index.md  ← /
├── 📁docs
│   ├── _index.md  ← /docs/
│   ├── getting-started.md  ← /docs/getting-started/
│   └── 📁guide
│       ├── _index.md  ← /docs/guide/
│       └── organize-files.md  ← /docs/guide/organize-files/
└── 📁blog
    ├── _index.md  ← /blog/
    └── post.md  ← /blog/post/

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.

Add Images

To add images, the easiest way is to put the image files in the same directory as the Markdown file. For example, add an image file image.png alongside the my-page.md file:

• content
  • docs
    • my-page.md
    • image.png

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

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

We can also utilize the page bundles feature of Hugo to organize the image files together with the Markdown file. To achieve that, turn the my-page.md file into a directory my-page and put the content into a file named index.md, and put the image files inside the my-page directory. With multi-lingual sites, translated content can be organized in the same directory with the language code in the file name.

• content
  • docs
    • my-page
      • index.en.md
      • index.fr.md
      • image.png

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

Alternatively, we can also put the image files in the static directory, which will make the images available for all pages:

• static
  • images
    • image.png
• content
  • docs
    • my-page.md

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