Your first site

Scaffold, run, and build a zfb project in about five minutes.

This walkthrough takes you from an empty directory to a running dev server and a built site. No global CLI install is required — the scaffold command fetches everything on demand.

Scaffold a new project

pnpm create zfb@latest my-site
# or
npm create zfb@latest my-site

This runs the create-zfb initializer, which calls zfb new under the hood and copies the bundled basic-blog template into my-site/. If pnpm is on your PATH, zfb runs pnpm install automatically right after copying the template; otherwise it prints a short note telling you to run it yourself.

cd my-site

If you already have the zfb CLI installed globally (see Installation), you can invoke zfb new directly with the same result:

zfb new my-site --template basic-blog

--template basic-blog is the default and currently the only available template, so you can omit it.

Start the dev server

pnpm zfb dev
# or
npx zfb dev

You’ll see a “ready” banner with the host and port (defaults: http://localhost:3000). zfb watches the project directory; saving any file in pages/, layouts/, components/, content/, or styles/ triggers a live-reload broadcast to connected browsers. The server also serves anything you drop into public/.

You can override host and port from the CLI — they always win over zfb.config.ts:

pnpm zfb dev --port 4000 --host 0.0.0.0
# or
npx zfb dev --port 4000 --host 0.0.0.0

Build and preview

To produce a static build of the site:

pnpm zfb build
pnpm zfb preview
# or
npx zfb build
npx zfb preview

zfb build resolves the output directory (defaulting to dist/), enumerates routes via the file-system router, and writes one HTML file per static route. zfb preview then serves that directory over HTTP on port 4321 by default. CLI flags (--outdir, --port) win over the config file in both commands.

A working example

A fully built site using basic-blog is available at https://github.com/Takazudo/zfb-example-blog.

What to read next

• Project structure — what every directory the template created actually does.
• Routing — how pages/ becomes URLs, including dynamic and catchall routes.
• Islands — how to opt individual components into client-side hydration.
• Build engine — how the Rust crates fit together under the hood.