@sigx/ssg

Static site generator for SignalX with file-based routing, MDX, and pluggable themes.

Features

• 🗂 File-based routing — src/pages/ becomes routes automatically
• 📑 Layout system — wrap pages with reusable layouts
• 📝 MDX — write content with Markdown + SignalX components
• 🎨 Pluggable themes — install a theme package (e.g. @sigx/ssg-theme-daisyui) or build your own
• 🔥 Vite HMR — instant updates during development
• ⚡ Fast builds — parallel rendering with streaming
• 🚀 Zero-config mode — works out of the box with sensible defaults
• 🗺️ Sitemap generation — automatic sitemap.xml and robots.txt

Installation

npm install @sigx/ssg sigx @sigx/router
npm install -D vite @sigx/vite

Usage

@sigx/ssg ships as a @sigx/cli plugin and a Vite plugin you can use directly. Drop a ssg.config.ts in your project root to opt in:

// ssg.config.ts
import { defineSSGConfig } from '@sigx/ssg';

export default defineSSGConfig({
    site: {
        title: 'My Site',
        description: 'Built with SignalX SSG',
        url: 'https://example.com',
    },
});

Via @sigx/cli

npx sigx ssg dev      # start dev server
npx sigx ssg build    # build static site
npx sigx ssg preview  # preview the production build

Via the Vite plugin

// vite.config.ts
import { defineConfig } from 'vite';
import sigx from '@sigx/vite';
import ssg from '@sigx/ssg/vite';

export default defineConfig({
    plugins: [sigx(), ssg()],
});

File-based routing

Pages in src/pages/ are automatically converted to routes:

| File | Route | |------|-------| | src/pages/index.tsx | / | | src/pages/about.tsx | /about | | src/pages/blog/index.tsx | /blog | | src/pages/blog/[slug].tsx | /blog/:slug | | src/pages/docs/[...path].tsx | /docs/*path |

Dynamic routes export getStaticPaths:

// src/pages/blog/[slug].tsx
import { component } from 'sigx';

export async function getStaticPaths() {
    const posts = await fetchBlogPosts();
    return posts.map(post => ({
        params: { slug: post.slug },
        props: { post },
    }));
}

export default component(({ props }) => () => (
    <article>
        <h1>{props.post.title}</h1>
    </article>
));

Layouts

Create layouts in src/layouts/:

// src/layouts/default.tsx
import { component } from 'sigx';

export default component(({ slots }) => () => (
    <div class="layout">
        <header><nav>My Site</nav></header>
        <main>{slots.default()}</main>
        <footer>©</footer>
    </div>
));

Specify the layout in frontmatter or by exporting it:

---
title: My Page
layout: docs
---

# Content here

export const layout = 'docs';

MDX

---
title: Hello World
date: 2026-05-10
---

# {frontmatter.title}

This is **markdown** with SignalX components mixed in:

<Counter initial={5} />

Themes

Install a theme:

npm install @sigx/ssg-theme-daisyui

// ssg.config.ts
export default defineSSGConfig({
    theme: '@sigx/ssg-theme-daisyui',
});

A theme bundles layouts, components, and CSS so you don't have to.

Islands hydration

@sigx/ssg works with @sigx/ssr-islands for selective hydration via client:* directives. See the islands README for details.

Configuration

Full options:

defineSSGConfig({
    pages: 'src/pages',
    layouts: 'src/layouts',
    content: 'src/content',
    outDir: 'dist',

    site: {
        title: 'My Site',
        description: 'Site description',
        url: 'https://example.com',
        lang: 'en',
        favicon: '/favicon.ico',
        fonts: ['Inter:wght@400;500;600;700'],
        ogImage: 'https://example.com/og.png',
        twitter: 'myhandle',
        themeColor: '#000000',
    },

    theme: '@sigx/ssg-theme-daisyui',
    defaultLayout: 'default',

    markdown: {
        shiki: {
            light: 'github-light',
            dark: 'github-dark',
        },
    },
});

License

MIT © Andreas Ekdahl