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, so you can omit it. A node-free template is also available for projects that need no Node.js dependency — see Install without Node for details.

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 a fixed set of project roots — pages/, content/, components/, layouts/, styles/, data/, public/, and the two config files (zfb.config.json, zfb.config.ts) — plus any additional paths declared as collection path values in your config. Saving any tracked file triggers a live-reload broadcast to connected browsers.

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.