Under the hood

How a page gets built

From a markdown file with YAML frontmatter to a validated, rendered, deployable static page - here's the whole pipeline.

Step 1 - Write

Pages are lists of blocks

Every page is a markdown file whose frontmatter declares a blocks array. Each entry has a type plus that block's fields - the full vocabulary is on the blocks page, with live previews where a meaningful standalone preview is possible.

src/pages/example.md

---
name: Example
permalink: /example/
blocks:
  - type: hero
    content: |
      # Hello
  - type: markdown
    content: Body text here.
---

Step 2 - Validate

The build checks every block

Unknown block types, unknown top-level keys, and missing required values fail the build with an error naming the file and the block. Nested validation does not catch every unknown or mistyped child field, so compare nested entries with the schema and inspect the output. The same schemas generate the editor config and reference docs; tests check that those generated files stay current.

terminal

Unknown block type "herro" (block 1 in ./src/pages/example.md).
Valid types: ...

Step 3 - Build

One command, one directory

Eleventy renders every page, processes images into responsive formats, bundles CSS and JS, builds the search index, and checks every internal link. The result is a plain _site/ directory.

terminal

npm run build
# -> _site/
#    index.html, blocks/, guide/, news/ ...
#    css/, assets/, images/, pagefind/

Step 4 - Deploy

Push to deploy

A bundled workflow builds the site on every push and deploys it to Bunny Sites: main goes to production and every other branch to staging. The steps are the ones every Chobble site shares; any other static host can serve the _site/ directory instead.

.github/workflows/build-and-deploy.yaml

jobs:
  build:
    uses: chobbledotcom/chobble-client/.github/workflows/shared-build-and-deploy.yml@main
    with:
      standalone: true