Hugo project structure: content, layouts, static, and archetypes

To create a skeleton of a future website we use the next command:

hugo new site test

docker run --rm -it \
  -v "$(pwd):/src" \
  klakegg/hugo \
  new site test

This creates the test directory, with the following files and directories within:

test/
  -- archetypes
    |-- default.md
  -- config.toml
  -- content
  -- data
  -- layouts
  -- static
  -- themes

Each of these directories has a specific purpose:

• archetypes. Hugo uses files from this directory as models when it generates new content pages (through CLI). There’s default one that places a title and date in the file and sets the draft status to true.
• The config.toml file holds configuration variables for your site that Hugo uses intertnally when constructing your pages, but you can also use values from this file in your themes (example - site’s title).
• The content directory holds all of the content for your site.
• The data directory holds data files in YAML, JSON, or TOML. You can load these data files and extract their data to populate lists or other aspects of your site.
• The layout folder is where you define your site’s look and feel.
• The static directory holds your CSS, JavaScript files, images, and any other assets that aren’t generated by Hugo.
• The themes directory holds any themes you download or create. You can use the layouts folder to override or extend a theme you’ve downloaded.

Archetypes in detail

archetypes/default.md is the model for hugo new:

---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true
---

Create a page from it:

hugo new about.md

docker run --rm -it \
  -v "$(pwd):/src" \
  -u $(id -u):$(id -g) \
  klakegg/hugo \
  new about.md

Custom archetypes per section

archetypes/projects.md:

---
title: "{{ replace .Name "-" " " | title }}"
draft: false
---

![alt](//via.placeholder.com/640x150)

Description

### Tech used
* item
* item
* item

hugo new projects/awesomeco.md

Because the path starts with projects/, Hugo picks archetypes/projects.md and writes content/projects/awesomeco.md.