@papack/ssg

Minimal static site generator with JSX to File rendering.

Core Idea

• Components can be async
• One-shot rendering (SSG -> static files)
• No state, no reactivity, no hydration
• Every route is just a function

Install

npm install @papack/ssg

Quick Start

import { StaticSiteGenerator } from "@papack/ssg";

const gen = new StaticSiteGenerator({
  out: "./dist",
  ctx: { siteName: "Example" },
});

gen.html("/", async (ctx) => {
  return <h1>{ctx.siteName}</h1>;
});

await gen.run();

Routes

html

gen.html("/", () => <Home />);
gen.html("/blog", () => <Blog />);
gen.html("/about.html", () => <About />);

Path mapping:

• / -> index.html
• /blog -> blog/index.html
• /about.html -> exact file

css / js

gen.css("/style.css", () => "body {}");
gen.js("/app.js", () => "console.log('hi')");

• file extension required
• returns plain strings
• no bundling

public / file

gen.public("/", "./public");
gen.file("/cv.pdf", "./cv.pdf");

notFound

gen.notFound(() => <h1>404</h1>);

Generates 404.html.

JSX Helpers

<For />

<For each={items}>{(item) => <li>{item}</li>}</For>

• single render function
• no keys, no diffing
• SSR-only

<Show />

<Show when={visible}>
  <Content />
</Show>

Controls existence, not visibility.

Context (ctx)

new StaticSiteGenerator({
  out: "./dist",
  ctx: { api, version: "1.0" },
});