インストール

zudo-doc のインストールとローカル開発環境のセットアップ方法。

前提条件

• Node.js 22+ — zfbおよびツールチェーンに必要

• pnpm — 推奨パッケージマネージャー

新規プロジェクトの作成

create-zudo-doc CLI を使うと、対話式のセットアップウィザードで新規プロジェクトをすばやく作成できます。

pnpm create zudo-doc

他のパッケージマネージャーの場合:

npm create zudo-doc
yarn create zudo-doc
bunx create-zudo-doc

非対話的な使用（CI、自動化、AI エージェント）では、--yes でデフォルトを使用するか、フラグを直接指定できます:

pnpm create zudo-doc my-docs --yes
pnpm create zudo-doc my-docs --lang ja --scheme Dracula --no-i18n --pm pnpm --install

すべてのフラグについては CLI リファレンス を参照してください。

CLI では以下のオプションを順番に設定します。

プロジェクト名

プロジェクトディレクトリの名前を入力します（デフォルト: my-docs）。

デフォルト言語

ドキュメントサイトのデフォルト言語を選択します。英語、日本語、中国語（簡体字/繁体字）、韓国語、スペイン語、フランス語、ドイツ語、ポルトガル語がサポートされています。

カラースキームモード

サイトのカラースキーム設定を選択します。

• Light & Dark（トグル） — ユーザーがライトとダークテーマを切り替え可能。事前設定されたペアリング（GitHub、Catppuccin、Solarized、Rosé Pine、Atom One、Everforest、Gruvbox、Ayu）から選択するか、ライトとダークのスキームを個別に選べます。

• Single scheme — サイト全体で1つの固定カラースキーム。Dracula、Nord、TokyoNight など40のスキームが利用できます。

Light/Dark モードでは、デフォルトモード（ライトまたはダーク）の設定や、ユーザーのシステムカラースキーム設定を尊重するかどうかも選択できます。

機能選択

オプション機能を選択します。

パッケージマネージャー

使用するパッケージマネージャーを選択します: pnpm（推奨）、npm、yarn、bun。スキャフォールディング後に依存関係をインストールするか確認されます。

代替方法: リポジトリのクローン

リポジトリを直接クローンして始めることもできます。

git clone https://github.com/zudolab/zudo-doc.git my-docs
cd my-docs
pnpm install

開発

pnpm dev

zfb 開発サーバーがインスタントなホットモジュールリプレースメントとともにポート4321で起動します。

ビルド

pnpm build

dist/ ディレクトリに静的HTMLが生成されます。任意の静的ホスティングサービスにデプロイできます。

型チェック

pnpm check

プロジェクトのTypeScript型チェッカーをstrictモードで実行します。

プロジェクト構成

インストール後のプロジェクト構成は以下の通りです:

src/
├── components/          # Preactコンポーネント（サーバーレンダリング + クライアントアイランド）
│   └── admonitions/     # Note, Tip, Info, Warning, Danger
├── config/
│   ├── settings.ts      # サイト名、アクティブなカラースキーム
│   ├── color-schemes.ts # 利用可能なカラープリセット
│   └── color-scheme-utils.ts
├── content/
│   ├── docs/            # 英語 MDX コンテンツ
│   └── docs-ja/         # 日本語 MDX コンテンツ
└── styles/
    └── global.css       # デザイントークン & Tailwind 設定

pages/                   # zfbのファイルベースルーティング（.tsxページモジュール）
zfb.config.ts            # zfbエンジンのエントリーポイント設定

ドキュメントページの作成と整理方法については、ドキュメントの書き方 ガイドを参照してください。