Folder Structure

How to organize your Swifty project.

Swifty loves a tidy project. Here's how to organize your files so everything just works.

The Standard Structure

your-site/
├── pages/           # Your content lives here
│   ├── index.md     # Homepage
│   ├── about.md     # → /about
│   └── blog/        # A section
│       ├── index.md # → /blog
│       └── post.md  # → /blog/post
├── layouts/         # Page wrappers
│   ├── default.html # Fallback layout
│   └── blog.html    # Auto-used for /blog pages
├── partials/        # Reusable snippets
│   └── footer.md
├── css/             # Stylesheets (auto-injected)
│   └── styles.css
├── js/              # Scripts (auto-injected)
│   └── app.js
├── images/          # Images (auto-optimized)
│   └── hero.webp
├── template.html    # The master wrapper
├── config.yaml      # Site configuration
└── dist/            # Built output (generated)

What Each Folder Does

pages/

This is where your content lives. Every .md file becomes a page. Subfolders become URL paths. It's that simple.

layouts/

HTML templates that wrap your page content. Name them after folders for automatic matching - blog.html wraps pages in pages/blog/.

partials/

Reusable content snippets. Include them anywhere with {{ partial: name }}. Great for footers, CTAs, author bios, and link formats.

css/

Drop your stylesheets here. They're automatically added to every page, sorted alphabetically. Prefix with numbers to control load order.

js/

Same deal as CSS. All JavaScript files are auto-injected into every page.

images/

Your images go here. JPG, PNG, and JPEG files are automatically converted to WebP and resized for the web. SVGs and GIFs pass through unchanged.

dist/

The output folder. Don't edit files here - they get overwritten on every build. This is what you deploy.

URLs Mirror Folders

Your folder structure is your site structure:

File URL
pages/index.md /
pages/about.md /about
pages/blog/index.md /blog
pages/blog/hello.md /blog/hello
pages/docs/getting-started.md /docs/getting-started

No routing config needed. Just organize your files how you want your URLs.

Files You Can Skip

All folders are optional. Start with just:

your-site/
├── pages/
│   └── index.md
└── template.html

Add the others as you need them. Swifty won't complain about missing folders.

Custom Output Directory

By default, Swifty builds to dist/. Want it somewhere else?

npx swifty build --out public

Now your site builds to public/ instead.