Directory Structure

With Section the hierarchy of your site’s files is important. It is solely responsible for the resulting permalink structure.

Let’s look at an example site structure:

├─ content
│  ├─
│  ├─
│  ├─ blog
│  │  ├─
│  │  ├─ 2013-05-20-why-section
│  │  │  ├─
│  │  │  └─ image.png
│  │  └─
│  └─ docs
│     └─
├─ assets
│  ├─ favicon.ico
│  └─ robots.txt
├─ output
├─ layout.jst
├─ style.less
└─ config.yaml

Now let’s see what each of the files and directories are.


This directory holds your content which usually means markdown files. The way files are organized here will determine the URL or permalink of each page of your site. For example the file stored in content/docs/ will have /docs/overview/ as the URL.

For documents where the published date is needed, such as blog posts, you can prefix the year, month and day to the name of the file. Thus the file at site/blog/ will have the permalink /blog/reasons-to-learn-javascript/ and the date will be available inside the layout template.

If a document has associated files like images they can be stored along side it and will be copied over to the output directory unmodified.

You need nothing more than this directory to generate a beautiful website.


Files in this directory will be copied unmodified to the generated site. This is where you would put your static resources, such as images, scripts and stylesheets.


This is the directory that by default holds the generated site, ready to be deployed.


This is an optional underscore template file that is used against every markdown file to generate the corresponding HTML file.


This is an optional custom stylesheet that is passed to the LESS CSS pre-processor. Alternatively you can have a style.css vanilla CSS file.


Holds configuration data as YAML or JSON—in which case a .json extension is needed.