Source Organization

Hugo takes a single directory and uses it as the input for creating a complete website.

The top level of a source directory will typically have the following elements:

▸ archetypes/
▸ content/
▸ data/
▸ layouts/
▸ static/
▸ themes/
  config.toml

Learn more about the different directories and what their purpose is:

Example

An example directory may look like:

.
├── config.toml
├── archetypes
|   └── default.md
├── content
|   ├── post
|   |   ├── firstpost.md
|   |   └── secondpost.md
|   └── quote
|   |   ├── first.md
|   |   └── second.md
├── data
├── layouts
|   ├── _default
|   |   ├── single.html
|   |   └── list.html
|   ├── partials
|   |   ├── header.html
|   |   └── footer.html
|   ├── taxonomies
|   |   ├── category.html
|   |   ├── post.html
|   |   ├── quote.html
|   |   └── tag.html
|   ├── post
|   |   ├── li.html
|   |   ├── single.html
|   |   └── summary.html
|   ├── quote
|   |   ├── li.html
|   |   ├── single.html
|   |   └── summary.html
|   ├── shortcodes
|   |   ├── img.html
|   |   ├── vimeo.html
|   |   └── youtube.html
|   ├── index.html
|   └── sitemap.xml
├── themes
|   ├── hyde
|   └── doc
└── static
    ├── css
    └── js

This directory structure tells us a lot about this site:

  1. The website intends to have two different types of content: posts and quotes.
  2. It will also apply two different taxonomies to that content: categories and tags.
  3. It will be displaying content in 3 different views: a list, a summary and a full page view.