最初のサイト

zfb プロジェクトをおよそ 5 分でスキャフォールド・実行・ビルドする。

このウォークスルーでは、空のディレクトリから開発サーバーの起動、そしてサイトのビルドまでを案内します。グローバルな CLI インストールは不要です。スキャフォールドコマンドが必要なものをすべてオンデマンドで取得します。

新しいプロジェクトをスキャフォールドする

pnpm create zfb@latest my-site
# または
npm create zfb@latest my-site

これは create-zfb イニシャライザを実行します。内部では zfb new を呼び出し、同梱の basic-blog テンプレートを my-site/ にコピーします。PATH 上に pnpm があれば、zfb はテンプレートのコピー直後に pnpm install を自動実行します。なければ、自分で実行するよう促す短いメッセージを表示します。

cd my-site

zfb CLI をすでにグローバルインストールしている場合（Installation を参照）、zfb new を直接呼び出しても同じ結果が得られます。

zfb new my-site --template basic-blog

--template basic-blog はデフォルトなので、省略できます。Node.js 依存を一切必要としないプロジェクト向けに node-free テンプレートも利用できます。詳細は Install without Node を参照してください。

開発サーバーを起動する

pnpm zfb dev
# または
npx zfb dev

ホストとポートを示す「ready」バナーが表示されます（デフォルトは http://localhost:3000）。zfb は固定された一連のプロジェクトルートを監視します。pages/・content/・components/・layouts/・styles/・data/・public/ と、2 つの設定ファイル（zfb.config.json、zfb.config.ts）です。これに加えて、設定でコレクションの path 値として宣言された任意のパスも監視します。監視対象のファイルを保存すると、接続中のブラウザにライブリロードがブロードキャストされます。

ホストとポートは CLI から上書きできます。これらは常に zfb.config.ts より優先されます。

pnpm zfb dev --port 4000 --host 0.0.0.0
# または
npx zfb dev --port 4000 --host 0.0.0.0

ビルドとプレビュー

サイトの静的ビルドを生成するには:

pnpm zfb build
pnpm zfb preview
# または
npx zfb build
npx zfb preview

zfb build は出力ディレクトリ（デフォルトは dist/）を解決し、ファイルシステムルーターでルートを列挙し、静的ルートごとに 1 つの HTML ファイルを書き出します。続いて zfb preview がそのディレクトリをデフォルトでポート 4321 の HTTP で配信します。CLI フラグ（--outdir・--port）は両コマンドとも設定ファイルより優先されます。

動作するサンプル

basic-blog を使って完全にビルドされたサイトが https://github.com/Takazudo/zfb-example-blog で公開されています。

次に読むもの

• Project structure — テンプレートが作成した各ディレクトリが実際に何をするのか。

• Routing — pages/ がどのように URL になるか。動的ルートやキャッチオールルートも含みます。

• Islands — 個々のコンポーネントをクライアントサイドのハイドレーションにオプトインする方法。

• Build engine — Rust クレートが内部でどう組み合わさっているか。