Build a Static Site

This is where Poops stops being "just a bundler." The markup pipeline is a full static site generator: templates, front matter, collections, pagination, an image tag, a search index, a sitemap and a navigation tree — all generated in a single pass.

A typical static-site project looks like this:

my-site/
├─ poops.json
├─ package.json
└─ src/
   ├─ scss/          → compiled to dist/css
   ├─ js/            → bundled to dist/js
   ├─ static/        → copied to dist
   └─ markup/
      ├─ _layouts/   → base templates (not emitted)
      ├─ _partials/  → includes (not emitted)
      ├─ _data/      → JSON/YAML globals
      ├─ index.md
      ├─ about.md
      └─ blog/
         ├─ index.html
         └─ first-post.md

A config that ties it together:

{
  "styles": [
    {
      "in": "src/scss/index.scss",
      "out": "dist/css/styles.css",
      "options": { "minify": true }
    }
  ],
  "scripts": [
    {
      "in": "src/js/main.ts",
      "out": "dist/js/scripts.js",
      "options": { "minify": true }
    }
  ],
  "markup": {
    "in": "src/markup",
    "out": "dist",
    "options": {
      "site": {
        "title": "My Site",
        "description": "Built with Poops.",
        "url": "https://example.com"
      },
      "includePaths": ["_layouts", "_partials"],
      "searchIndex": "search-index.json",
      "sitemap": "sitemap.xml",
      "nav": "nav.json"
    }
  },
  "copy": [{ "in": "src/static", "out": "dist" }],
  "serve": { "port": 4040, "base": "/dist" },
  "livereload": true,
  "watch": ["src"]
}

Work through the pieces:

• Building pages — layouts, partials, front matter, Markdown.
• Images & galleries — responsive images and a photo grid.
• A documentation site — the sidebar nav tree, like this site.
• A blog with collections — posts, sorting, pagination, RSS.
• React components — pre-render components into pages.
• A complete React static site — a full hydrated SSG.