インストール
zudo-doc のインストールとローカル開発環境のセットアップ方法。
前提条件
- Node.js 18+ — Astro 6 に必要
- pnpm — 推奨パッケージマネージャー
ℹ️ Info
npm、yarn、bun も使用できますが、このガイドでは 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 モードでは、デフォルトモード(ライトまたはダーク)の設定や、ユーザーのシステムカラースキーム設定を尊重するかどうかも選択できます。
機能選択
オプション機能を選択します。
| 機能 | デフォルト | 説明 |
|---|---|---|
| i18n(多言語対応) | オフ | セカンダリ言語をミラーリングしたコンテンツディレクトリで追加 |
| Pagefind 検索 | オン | ドキュメント全体の全文検索 |
| サイドバーフィルター | オン | サイドバーナビゲーションのリアルタイムフィルタリング |
| Claude Resources | オフ | Claude Code コンポーネントの自動生成ドキュメント |
| カラースキームプレビュー | オフ | カラー調整パネルで50以上のプリセットカラースキームを閲覧 |
パッケージマネージャー
使用するパッケージマネージャーを選択します: pnpm(推奨)、npm、yarn、bun。スキャフォールディング後に依存関係をインストールするか確認されます。
💡 Tip
インストーラーは選択内容に基づいて src/config/settings.ts を生成します。プロジェクト作成後にいつでも設定を変更できます。
代替方法: リポジトリのクローン
リポジトリを直接クローンして始めることもできます。
git clone https://github.com/zudolab/zudo-doc.git my-docs
cd my-docs
pnpm install
📝 Note
リポジトリのクローンでは、ドキュメントソースとすべての機能が含まれた完全なプロジェクトが取得できます。コードベース全体を確認したい場合や、zudo-doc 自体に貢献したい場合にこの方法を使用してください。
開発
pnpm dev
Viteによるインスタントなホットモジュールリプレースメントで開発サーバーがポート4321で起動します。
⚠️ Warning
ポート4321が使用可能であることを確認してください。別のプロセスが使用中の場合、Astro は自動的に次の使用可能なポートを選択します。
ビルド
pnpm build
dist/ ディレクトリに静的HTMLが生成されます。任意の静的ホスティングサービスにデプロイできます。
型チェック
pnpm check
Astro の組み込み型チェッカーを strict TypeScript モードで実行します。
🚨 Danger
dist/ ディレクトリはソース管理にコミットしないでください。.gitignore で除外済みです。
プロジェクト構成
インストール後のプロジェクト構成は以下の通りです:
src/
├── components/ # Astro + React コンポーネント
│ └── admonitions/ # Note, Tip, Info, Warning, Danger
├── config/
│ ├── settings.ts # サイト名、アクティブなカラースキーム
│ ├── color-schemes.ts # 利用可能なカラープリセット
│ └── color-scheme-utils.ts
├── content/
│ ├── docs/ # 英語 MDX コンテンツ
│ └── docs-ja/ # 日本語 MDX コンテンツ
├── layouts/ # ページレイアウト
├── pages/ # ファイルベースルーティング
└── styles/
└── global.css # デザイントークン & Tailwind 設定
ドキュメントページの作成と整理方法については、ドキュメントの書き方 ガイドを参照してください。