zudo-doc

Type to search...

to open search from anywhere

インストール

作成2026年3月22日Takeshi Takatsudo

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 設定

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

Revision History

AI Assistant

Ask a question about the documentation.