はじめに

このガイドを参考に、サイトを最速で立ち上げましょう。AIGNE CLI のインストール、ソース資料の収集、aigne web generate の実行、計画の承認、生成されたページの確認まで、すべてを 1 か所で行えます。

エンドツーエンドのフローを見る

前提条件

ステップ 1. AIGNE CLI のインストールと検証

AIGNE CLI をグローバルにインストールして、どのフォルダからでも aigne コマンドが利用できるようにします。

AIGNE CLI のインストール

npm install -g @aigne/cli

インストールが成功したことを確認します。

--help

aigne web --help

ベータチャネルが必要ですか？npm install -g @aigne/cli@beta でインストールし、aigne web upgrade --beta を実行して最新の Agent を取得してください。

ステップ 2. プロジェクトワークスペースの作成

最初のサイト用にクリーンなディレクトリを設定し、そのディレクトリに移動します。

ワークスペースの作成

mkdir my-first-websmith-site
cd my-first-websmith-site

このフォルダ内 (または近くの sources ディレクトリ) に、AI に読み込ませたいドキュメント、概要、メディアをコピーまたは作成します。明確に定義された資料は、出力品質を劇的に向上させるため、数分かけて準備チェックリストに従ってください。

ステップ 3. aigne web generate を実行する

プロジェクトディレクトリから、ジェネレーターを起動します。

ウェブサイトの生成

aigne web generate

これは新しいワークスペースであるため、WebSmith は対話型のウィザードを起動し、以下の情報を収集します。

1. ウェブサイトの目的

   • 例: SaaS マーケティングサイト、ドキュメントハブ、投資家向けアップデート。

2. ターゲットオーディエンス

   • 開発者、顧客、投資家など。読者に合わせてトーンと証明を調整します。

3. ウェブサイトの規模

   • 最小、標準、包括的から選択するか、AI に決定させます。

4. 言語

   • プライマリロケールと生成する翻訳を選択します。

5. ページディレクトリ

   • 生成されたファイルが保存される場所 (デフォルトは aigne/web-smith/pages)。

6. ソースパス

   • 製品知識を含むディレクトリまたはファイル。

7. カスタムルール

   • トーン、用語、コンプライアンスに関するリマインダーなどの制約。

あなたの回答は .aigne/doc-smith/config.yaml に書き込まれ、次回の実行時に再利用できます。

ステップ 4. 設定の確認

生成された設定ファイルを開き、特に sourcesPath の値が正しいかを確認します。以下は、簡略化された例です。

config.yaml

projectName: My Awesome Project
projectDesc: This is a project that does amazing things.
pagePurpose:
  - saas
targetAudienceTypes:
  - developers
websiteScale: standard
locale: en
pagesDir: aigne/web-smith/pages
sourcesPath:
  - ./docs
  - ./briefs/product-overview.md
  - ./evidence
rules: >
  Use confident, concrete copy. Highlight 99.99% uptime and SOC 2 compliance.

重要: sourcesPath は AI が参照できるすべてのものを制御します。生成されるコピーが正確であるように、概要、仕様書、価格表、証明を含む正確なディレクトリを指すようにしてください。

ステップ 5. 計画の承認とページの検査

設定ファイルを読み取った後、WebSmith はサイトマップ (ページ、セクション、主要な論点) を提案します。これを承認すると、AI がコンテンツを作成し、Astro/React テンプレートを組み立てます。実行が完了すると、以下が表示されます。

生成されたページをローカルで開くか、ウェブサイトの公開ガイドに直接進んで、それらを本番環境にプッシュします。

次のステップ