# Vyriy Preset SSG

Markdown-first static site generated with @vyriy/ssg.

Published: 2026-06-19
Tags: vyriy, preset, ssg, cli
Source: https://vyriy.dev/examples/vyriy-preset-ssg/

---

# Vyriy Preset - SSG

Markdown-first static site generated with `@vyriy/ssg`.

The generated repository keeps content under `site/*`, styling under
`packages/components/styles.scss`, and the build entry point in
`workspaces/ssg`.

## Create this example

```bash
npm create vyriy@latest
```

Choose the `ssg` preset.

## Workspace Layout

```text
packages/
  components/   Site stylesheet and style documentation.
site/
  home/         Home page Markdown.
  consulting/   Standalone consulting page Markdown.
  docs/         Documentation landing page and docs entries.
  blog/         Blog entries.
  examples/     Example entries.
  public/       Static assets copied into dist.
workspaces/
  ssg/          Thin build workspace around @vyriy/ssg.
```

## Build Flow

The SSG preset builds the static site through the reusable `@vyriy/ssg`
package:

1. `workspaces/ssg` is bundled into `dist/index.js`.
2. `packages/components/styles.scss` is compiled into `dist/styles.css`.
3. `@vyriy/ssg` reads Markdown from `site`.
4. The generator writes HTML pages, search data, sitemap, robots.txt, and copied
   public assets into `dist`.

The workspace stays thin. It calls `buildStaticSite`, passes the compiled
stylesheet content, and lets `@vyriy/ssg` own the static content pipeline.

## Development

Install dependencies with Yarn 4 and Node.js 24 or newer:

```bash
yarn install
```

Build the static site:

```bash
yarn build:ssg
```

Run Storybook documentation:

```bash
yarn storybook
```

## Validation

Run all checks:

```bash
yarn check
```

Run checks separately:

```bash
yarn lint
yarn build
yarn test
```

Focused Jest validation can target the main packages and workspace:

```bash
yarn jest workspaces/ssg --runInBand --coverage=false
yarn lint:stylelint
```

## Documentation

- `workspaces/ssg/README.md` documents the static build workspace.
- `packages/components/README.md` documents project stylesheet ownership.
- `site/*/README.md` files provide the generated site content.

The matching `doc.mdx` files render these README files in Storybook.

## Project Guidance

These articles describe the development approach behind this preset and provide practical guidance for evolving a project on top of it:

- [Calm Development Environment: Node.js, Corepack, Yarn and Static Preview](https://vyriy.dev/blog/calm-development-setup/) - how to keep the local development environment predictable and easy to reproduce.
- [Calm App Structure for the Vyriy Ecosystem](https://vyriy.dev/blog/vyriy-calm-app-structure/) - a practical project structure for Vyriy applications: shared configs, small packages, thin workspaces, Storybook docs, tests, and deployable entry points.
- [One Handler, Many Runtimes](https://vyriy.dev/examples/one-handler-many-runtimes/) - how @vyriy/handler, @vyriy/router, and @vyriy/server compose a calm Lambda-compatible API that can run locally, in Docker, Fargate-style HTTP runtimes, and AWS Lambda.
- [Storybook as Project Documentation](https://vyriy.dev/blog/storybook-as-project-documentation/) - how to use Storybook as living project documentation and a component playground.