hugo/content/getting-started/directory-structure.md

title, linktitle, description, date, publishdate, lastmod, categories, tags, weight, draft, aliases, toc

title	linktitle	description	date	publishdate	lastmod	categories	tags	weight	draft	aliases	toc
Directory Structure	Directory Structure	Hugo's CLI scaffolds a project directory structure and then takes that single directory and uses it as the input for creating a complete website.	2017-01-02	2017-02-01	2017-03-09	project organization	source organization directories fundamentals	50	false	/overview/source-directory/	true

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

New Site Scaffolding

Running hugo new site from the command line will create a directory structure with the following elements:

.
├── archetypes
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

Directory Structure Explained

The following is a high-level overview of each of the directories with links to each of their respective sections with in the Hugo docs.

archetypes

You can create new content files in Hugo using the hugo new command. By default, hugo will create new content files with at least date, title (inferred from the file name), and draft = true. This saves time and promotes consistency for sites using multiple content types. You can create your own archetypes with custom preconfigured front matter fields as well.

config.toml

Every Hugo project should have a configuration file in TOML, YAML, or JSON format at the root. Many sites may need little to no configuration, but Hugo ships with a large number of configuration directives for more granular directions on how you want Hugo to build your website.

content

All content for your website will live inside this directory. Each top-level folder in Hugo is considered a content section. For example, if your site has three main sections---blog, articles, and tutorials---you will have three directories at content/blog, content/articles, and content/tutorials. Hugo uses sections to assign default content types.

data

This directory is used to store configuration files that can be used by Hugo when generating your website. You can write these files in YAML, JSON, or TOML format. In addition to the files you add to this folder, you can also create data templates that pull from dynamic content.

layouts

stores templates in the form of .html files that specify how views of your content will be rendered into a static website. Templates include list pages, your homepage, taxonomy templates, partials, single page templates, and more.

static

stores all the static content for your future website: images, CSS, JavaScript, etc. Note that when Hugo build your site, all assets inside your static directory are copied over as-is.

Example Hugo Project Directory

The following is an example of a typical Hugo project directory:

.
├── config.toml
├── archetypes
|   └── default.md
├── content
|   ├── post
|   |   ├── _index.md
|   |   ├── post-01.md
|   |   └── post-02.md
|   └── quote
|   |   ├── quote-01.md
|   |   └── quote-02.md
├── data
├── i18n
├── 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
    ├── images
    └── js

The above directory structure tells us a lot about this project.

The rendered website

• has two different types of content: posts and quotes.
• applies two different taxonomies to the content: categories and tags
• displays content in 3 different views: a list, a summary, and a full-page view

Homepage and List Page Content

Since v0.18, everything in Hugo is a Page. This means list pages and the homepage can have associated content files---i.e. _index.md---that contains page metadata (i.e., front matter) and content. This model allows you to include list-specific front matter via .Params and also means that list templates (e.g., layouts/_default/list.html) also have access to all page variables.

Using the above example, let's assume you have the following in content/post/_index.md:

{{% code file="content/post/_index.md" %}}

---
title: My Golang Journey
date: 2017-03-23
publishdate: 2017-03-24
---

I decided to start learning Golang in March 2017.

Follow my journey through this new blog.

{{% /code %}}

You can now access this _index.md content in a list template:

{{% code file="layouts/_default/list.html" %}}

{{ define "main" }}
<main class="main">
    <article>
        <header>
            <h1>{{.Title}}</h1>
        </header>
        {{.Content}}
    </article>
    <ul class="section-contents">
    {{ range .Data.Pages }}
        <li>
            <a href="{{.Permalink}}">{{.Date.Format "2006-01-02"}} | {{.Title}}</a
        </li>
    {{ end }}
    </ul>
</main>
{{ end }}

{{% /code %}}

This will output the following HTML:

{{% code file="yoursite.com/post/index.html" copy="false" %}}

<!--all your baseof.html code-->
<main class="main">
    <article>
        <header>
            <h1>My Golang Journey</h1>
        </header>
        <p>I decided to start learning Golang in March 2017.</p>
        <p>Follow my journey through this new blog.</p>
    </article>
    <ul class="section-contents">
        <li><a href="/post/post-01/">Post 1</a></li>
        <li><a href="/post/post-02/">Post 2</a></li>
    </ul>
</main>
<!--all your other baseof.html code-->

{{% /code %}}

List Pages Without _index.md

You do not have to create an _index.md file for every list page (i.e. section, taxonomy, taxonomy terms, etc) or the homepage. If Hugo does not find an _index.md within the respective content section when rendering a list template, the page will be created but with no {{.Content}} and only the default values for .Title etc.

Using this same layouts/_default/list.html template and applying it to the the quotes section above will render the following output. Note that quotes does not have an _index.md file to pull from:

{{% code file="yoursite.com/quote/index.html" copy="false" %}}

<!--baseof.html code-->
<main class="main">
    <article>
        <header>
            <h1>Quotes</h1>
        </header>
    </article>
    <ul class="section-contents">
        <li><a href="https://yoursite.com/quote/quotes-01/">Quote 1</a></li>
        <li><a href="https://yoursite.com/quote/quotes-02/">Quote 2</a></li>
    </ul>
</main>
<!--baseof.html code-->

{{% /code %}}

{{% note %}} The default behavior of Hugo is to pluralize list titles; hence the inflection of the quote section to "Quotes" when called with the .Title page variable. You can change this via the pluralizeListTitles directive in your site configuration. {{% /note %}}