Getting started

Scaffold a project

create-staticbolt writes the config, the scripts, the linters, and the editor setup, so there is nothing to wire up by hand:

npm create staticbolt@latest my-site
cd my-site
npm install
npm run dev

The single argument is the directory to create the project in. Leave it out and the command asks. --help / -h prints the usage. It works under whichever name your package manager gives it:

npx create-staticbolt my-site
pnpm create staticbolt my-site
bun create staticbolt my-site
yarn create staticbolt my-site

The generated package.json carries four scripts:

Script	What it does
`npm run dev`	`staticbolt serve`, dev server with live reload
`npm run build`	`staticbolt build`, production build into `dist`
`npm run fix-eslint`	ESLint over the project, with `--fix`
`npm run fix-stylelint`	Stylelint over `sources` and `pages`, with `--fix`

Add it to a project that already exists

npm install -D @staticbolt/core @staticbolt/lsp

@staticbolt/lsp is optional. It is what gives the editor completion, links, and diagnostics for the tags the build understands. See Editor support.

Then write a .staticbolt.ts and a tsconfig.json. Configuration covers both, and Project structure covers where files go.

Run it

npx staticbolt serve   # development server, watches and reloads
npx staticbolt build   # production build into dist

Every command is listed in the CLI reference.

A page

A page either stands alone or wraps itself in a layout. The layout is plain HTML with a <slot> where the page's content goes, and any attribute on the <layout> tag is readable inside it as $data:

<layout src="@layouts/main.layout.html" title="Home">
  <h1>Hello</h1>
  <part src="@parts/feature-card.part.html"></part>
  <script src="@scripts/main.ts"></script>
</layout>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link href="@styles/global.css" rel="stylesheet" />
    <title>{{ $data.title ?? 'My site' }}</title>
  </head>
  <body>
    <main>
      <slot />
    </main>
  </body>
</html>

The @styles, @parts, @layouts, @scripts, and ~ prefixes are aliases from tsconfig.json, and the tags come from plugins: <layout> and <part> from the layout plugin, <script src> from the bundle script plugin.