Getting Started with SSG#

Prerequisites

Before continuing, make sure you're familiar with: SignalX Core basics, Router basics

@sigx/ssg is the static site generator for SignalX. It turns a folder of pages into a fast, pre-rendered site:

File-based routing — files in src/pages become routes (index.tsx to /, blog/[slug].tsx to /blog/:slug, and so on).
MDX and Markdown — author content with frontmatter, Shiki syntax highlighting, GFM, and automatic heading slugs.
Collections and navigation — group content under a path prefix and get a sidebar generated from your frontmatter.
Layouts and themes — wrap pages in shared shells, or pull a full theme from a package (such as @sigx/ssg-theme-daisyui).
Island hydration — ship static HTML and hydrate only what needs to be interactive.
Build, dev, and preview — a zero-config dev server, a static production build, sitemap and robots.txt generation.
Built for content sites — built-in search, an npm/pnpm/yarn/bun code-fence switcher, copy-code buttons, redirects, link checking, and SPA navigation all ship in the box.

The current package version is 0.11.1.

Install#

Terminal

pnpm add @sigx/ssg sigx @sigx/router
pnpm add -D vite @sigx/vite

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

yarn add @sigx/ssg sigx @sigx/router
yarn add -D vite @sigx/vite

bun add @sigx/ssg sigx @sigx/router
bun add -D vite @sigx/vite

Vite 8 or newer is required. See Installation for peer dependencies, the two ways to wire it up, and zero-config entry detection.

A minimal end-to-end example#

1. Create `ssg.config.ts`#

defineSSGConfig is a type-safe helper that applies sensible defaults and merges your config. Export the result as the default from ssg.config.ts in your project root.

TypeScript

import { defineSSGConfig } from '@sigx/ssg';

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

2. Add a page#

Files under src/pages are routed automatically. src/pages/index.tsx becomes /.

TSX

import { component } from 'sigx';

export default component(() => {
    return () => (
        <main>
            <h1>Hello from @sigx/ssg</h1>
            <p>This page was pre-rendered to static HTML.</p>
        </main>
    );
});

export const meta = {
    title: 'Home',
    description: 'Welcome to my site',
};

You can also author pages in MDX. src/pages/about.mdx becomes /about:

MDX

---
title: About
description: About this site
---

# About

Markdown content with **GFM**, frontmatter, and Shiki highlighting.

3. Run dev, then build#

If you have the CLI plugin available, drive everything through sigx: