[<-] Back

SiteForge

Static HTML, Supabase, Design tokens · 2026 · 1 min read

A no-code builder that generates single-file HTML sites with a built-in design system. Pick a theme, drop in pages and blog posts, hit publish — output is a portable index.html plus a /blog/ directory you can host anywhere. No build step, no framework, no runtime — every page is plain HTML with inline CSS using a --sf-* token palette.

What it produces

flowchart LR
    editor["SiteForge editor<br/>(pages · blocks · blog)"]
    tokens["Design tokens<br/>--sf-primary · --sf-surface<br/>--sf-radius · --sf-spacing"]
    sb[("Supabase<br/>auth + content")]

    subgraph site ["Generated site (static)"]
        idx["index.html<br/>(self-contained)"]
        blog["blog/index.html<br/>blog-posts/*.html"]
    end

    editor --> tokens
    editor <--> sb
    editor -->|"publish"| site
    site -->|"host anywhere"| host["Vercel · S3 · GitHub Pages · local file"]

The --sf-* design system

Each generated site ships with a complete token palette inlined into index.html:

  • Color--sf-primary, --sf-primary-dark, --sf-primary-light, --sf-secondary, --sf-accent, --sf-background, --sf-surface, --sf-text, --sf-text-muted
  • Layout--sf-container-max-width, --sf-element-gap, --sf-grid, data-sf-split for two-column blocks
  • Typography--sf-font-family, --sf-heading-font-family, --sf-heading-weight, --sf-line-height
  • Components--sf-btn-padding-x/y, --sf-btn-radius, --sf-radius-sm/md/lg/full
  • Theming — paired --sf-dark-bg / --sf-dark-text for the dark variant; switch by overriding the root vars

The result: a site you can edit by hand later without touching a framework, build tool, or package manager.