easy-vibeは、AIを使ったプロダクト開発「vibe coding」を初心者向けに教えるVitePressベースの教材サイトです。テキスト解説だけでなく、Vue製のインタラクティブなデモ部品を多数組み込み、RAGやAPI設計、認証、バックエンド構造などの概念を図解と操作で学べる構成になっています。10言語のREADMEとサイト本体を持ち、PDF・EPUB形式の書籍としても配布されます。
リポジトリの中心はdocs/.vitepress配下のVitePressサイトです。config.mjsとsidebars/data.mjsが章立てとサイドバーを言語ごとに定義し、locale別のパスプレフィックス（/zh-cn/、/en/など）で多言語ページを振り分けています。学習コンテンツはMarkdownですが、appendix配下には概念1つにつき1つのVueデモ（例えばAgentArchitectureDemo.vueやMcpDetailedDemo.vue）が用意され、Markdownから直接呼び出されて図解・アニメーションを表示します。ビルドはDockerfileにある通りnpm run buildでVitePressの静的サイトを生成し、Nginxで配信する2段階構成です。GitHub Actionsのdeploy.ymlがmainブランチへのpushでGitHub Pagesに自動デプロイし、release-books.ymlはタグpush時にLaTeX・Pandoc系ツールでPDFとEPUBを生成してリリースに添付します。.huskyのpre-commit・pre-pushフックはVueファイル変更時にESLintとビルドチェックを強制し、壊れた状態のコミットを防いでいます。
- STEP 01
リポジトリをcloneしてnpm ciを実行すると、docs配下の大量のVueコンポーネントと多言語Markdownが依存関係として解決されます。
- STEP 02
npm run devでローカルサーバーを起動すると、welcomeページから各stageのチュートリアルと付録（appendix）のインタラクティブデモに直接アクセスできます。
- STEP 03
appendix配下のページを開くと、AgentQuickStartDemoやMcpVisualDemoのようなVueコンポーネントがMarkdown本文の中にアニメーション付きで表示され、クリック操作で概念の流れを追体験できます。
- STEP 04
npm run buildを実行すると、docs/.vitepress/distに静的HTMLが生成され、DockerfileどおりNginxコンテナに載せてローカルで動作確認できます。
- STEP 05
バージョンタグをpushする想定でnpm run book:allを試すと、texlive系ツールが未整備の場合はビルドに失敗しやすく、CI専用の重い依存関係だと分かります。
- STEP 06
Vueファイルを編集してcommitしようとすると、.huskyのpre-commitフックがESLintとビルドを自動実行し、エラーがあればcommit自体が止まります。
手元で得られるのは、テキストだけでなく操作可能な図解デモを含むAI開発学習サイトそのものと、そのビルド・多言語・書籍化パイプラインです。実際のプロダクト開発ツールやエージェントは含まれず、学習コンテンツと配信基盤が主な成果物です。
PDF・EPUB生成にはtexlive-xetexやfonts-noto-cjkなど多数のシステム依存パッケージが必要で、CI環境以外での再現は手間がかかります。
appendix配下のVueデモは数百ファイル規模で存在し、全体構造を把握するには相当な探索が必要です。
ライセンスはCC BY-NC-SA 4.0のため、商用利用や改変配布には制約があります。
AIコーディングをゼロから学びたい初心者、または図解付きの教材構成を参考にしたい教育系プロジェクトの開発者に向いています。README・ワークフロー・Dockerfile・huskyフックの内容が相互に整合しており、ビルドと多言語・書籍化の仕組みは実在するCI定義から確認できるため、インストールせずとも動作像を判断できます。ただし個々のVueデモの表示品質までは、ソース断片だけでは保証できません。