Project Structure

Your project created with create thulite comes with a practical default structure. This page explains what each top-level directory is for and where to put your files.

At a glance#

Thulite follows the Hugo directory structure. Most projects include these key directories and files:

• assets - processed assets (styles, scripts, images)
• config - Hugo/Thulite configuration
• content - pages and section content
• layouts - templates, partials, and shortcodes
• static - files copied as-is to output
• package.json - npm dependencies and scripts

Example tree#

Typical starter structure:

archetypes#

default.md

Template used when creating new content files.

assets#

favicon.png, favicon.svg

Use assets/ for files that should be bundled, transformed, or optimized.

scss#

Storing styles in assets/scss/ is conventional, but not required. Any stylesheet in assets/ can be processed when imported correctly.

Use app.scss as your entrypoint. Put custom variables in common/_variables-custom.scss and custom styles in common/_custom.scss.

config#

_default#

• hugo.toml: core Hugo configuration
• module.toml: Hugo mounts, including links from node_modules to project directories
• params.toml: site-level Thulite settings, including theme and integration options

content#

Use content/ for pages, sections, and page bundles (including page resources).

layouts#

Layouts define shared page structure and rendering templates.

static#

Files in static/ are copied to the output unchanged.

This is ideal for assets like fonts or icons, and special files like robots.txt and manifest.webmanifest.

You can place CSS and JavaScript here, but they will not be bundled or optimized.

package.json#

package.json defines dependencies and scripts such as npm run dev and npm run build.

You can use dependencies and devDependencies. For most Thulite projects, placing packages in dependencies is a practical default.