create-site

新しい AEM Edge Delivery サイトを作成する

このスキルでは、新しい AEM Edge Delivery サイトのオンボーディングの流れを最初から最後まで説明します。自動化できる作業はすべて処理し、人間による操作が必要な手順を明確に示します。

このスキルを使用するタイミング

次の場合にこのスキルを使用します。

• ユーザーが、AEM Edge Delivery サイトを一から新規作成したい場合
• ユーザーが「新しいサイトをセットアップして」「新しい EDS プロジェクトを作成して」「新しいサイトをオンボーディングして」と依頼した場合
• プロジェクト用の GitHub リポジトリも DA コンテンツもまだ存在しない場合

次の場合、このスキルは使用しないでください。

• 既存ページをインポートまたは移行する場合（page-import スキルを使用してください）
• 既存サイトのブロックを作成または変更する場合（content-driven-development スキルを使用してください）

前提条件

• 対象の組織にリポジトリを作成する権限がある GitHub アカウント
• DA（da.live）にアクセスできる Adobe IMS アカウント
• 認証済みの gh CLI（gh auth status）または repo スコープを持つ GitHub パーソナルアクセストークン
• Node.js（da-auth-helper による DA トークン管理用）

関連スキル

• page-import — 新しく作成したサイトに既存ページをインポートします
• content-driven-development — サイト作成後にブロックを作成および変更します
• building-blocks — 新しいブロックのコードを実装します

---

Step 0: TodoList を作成する

進捗を記録するチェックリストを作成します（利用可能な場合は、エージェントのタスク追跡ツールを使用してください）。

1. 入力情報の収集 — 組織、リポジトリ名、サイト名を収集済み
2. GitHub リポジトリの作成 — ボイラープレートテンプレートからリポジトリを作成済み
3. aem-code-sync のインストール (人間による操作) — GitHub App をリポジトリにインストール済み
4. DA への認証 — 有効な IMS トークンを取得済み
5. DA に初期コンテンツを作成 — ナビゲーション、フッター、インデックスを作成済み
6. プレビューの開始 — 3 つすべてのパスが 200/201 を返す
7. 引き継ぎ — プレビュー URL と DA リンクをユーザーに提供済み

---

Step 1: 入力情報を収集する

次の情報をユーザーに尋ねます。必須情報がすべて揃うまで先に進まないでください。

1. GitHub org — リポジトリを作成する GitHub 組織またはユーザー名（例：my-org）
2. プロジェクト名 — リポジトリ名。小文字のみを使用し、ハイフンで区切ります（例：my-site）
3. サイト名 — コンテンツで使用する、人が読める名前（例：My Site）。指定されていない場合は、プロジェクト名から導出します。

次のように保存します：{{ORG}}、{{REPO}}、{{SITE_NAME}}

---

Step 2: GitHub リポジトリを作成する

adobe/aem-boilerplate テンプレートを使用して、新しいリポジトリを作成します。

Option A — GitHub CLI（推奨。認証も自動的に処理します）：

gh repo create {{ORG}}/{{REPO}} \
  --template adobe/aem-boilerplate \
  --description "{{SITE_NAME}} — AEM Edge Delivery site" \
  --public

gh auth status で gh が利用可能か確認します。認証されていない場合は、まず gh auth login を実行します。

Option B — GitHub API（gh CLI を利用できない場合）：

POST https://api.github.com/repos/adobe/aem-boilerplate/generate
Authorization: Bearer {{GITHUB_TOKEN}}
Content-Type: application/json

{
  "owner": "{{ORG}}",
  "name": "{{REPO}}",
  "description": "{{SITE_NAME}} — AEM Edge Delivery site",
  "private": false,
  "include_all_branches": false
}

トークンを取得するには、https://github.com/settings/tokens/new にアクセスします。スコープ：repo。

成功条件： HTTP 201（API）または終了コード 0（CLI）。リポジトリは https://github.com/{{ORG}}/{{REPO}} で利用可能になります。

---

Step 3: aem-code-sync をインストールする (人間による操作が必要)

aem-code-sync GitHub App は、リポジトリを AEM のコンテンツ配信パイプラインに接続します。この手順は自動化できないため、ユーザーがブラウザーで完了する必要があります。

次の内容をユーザーに伝えます。

操作が必要です： 新しいリポジトリに AEM Code Sync アプリをインストールしてください。

1. 次の URL を開きます：https://github.com/apps/aem-code-sync/installations/new
2. 「Repository access」で、Only select repositories を選択します
3. リストから {{ORG}}/{{REPO}} を選択します
4. Save をクリックします

完了したら「done」と返信してください。

先に進む前に、確認を待ちます。

確認： 確認後、https://admin.hlx.page/status/{{ORG}}/{{REPO}}/main/ が有効な JSON 応答を返す（404 ではない）ことを確認します。応答が返れば、アプリは正しくインストールされています。

---

ステップ 4：DA で認証する

DA では Adobe IMS 認証が必要です。適切な方法を選択してください。

オプション A — da-auth-helper（推奨）

da-auth-helper（https://github.com/adobe-rnd/da-auth-helper）は IMS トークンを ~/.aem/da-token.json にキャッシュします。新しい OAuth フローを開始する前に、必ず最初にキャッシュを確認してください。

1. 有効なキャッシュ済みトークンがあるか確認します。

node -e "
  const fs = require('fs');
  const p = process.env.HOME + '/.aem/da-token.json';
  if (!fs.existsSync(p)) { console.log('No cache'); process.exit(1); }
  const t = JSON.parse(fs.readFileSync(p));
  console.log('Valid:', t.expires_at > Date.now());
  console.log('Expires:', new Date(t.expires_at).toISOString());
"

2. 有効な場合はトークンを取得し、ステップ 5 に進みます。

DA_TOKEN=$(node -e "const t = require(process.env.HOME + '/.aem/da-token.json'); process.stdout.write(t.access_token);")

3. トークンがないか期限切れの場合は、GitHub から da-auth-helper をインストールして（npm では公開されていません）、更新します。

npm install -g github:adobe-rnd/da-auth-helper
da-auth-helper token

Adobe IMS にログインするためのブラウザーが開き、新しいトークンが ~/.aem/da-token.json に書き込まれます。その後、ステップ 2 と同様にトークンを取得します。

オプション B — DA MCP が設定済みの場合

DA MCP サーバーを利用できる場合は、認証ツールを呼び出して OAuth フローを開始し、認証 URL をユーザーに共有します。

オプション C — 手動でトークンを取得

ブラウザーから IMS トークンを取得し（DA のネットワークタブや既存のセッションなど）、貼り付けるようユーザーに依頼します。{{DA_TOKEN}} として保存します。

---

ステップ 5：DA に初期コンテンツを作成する

すべての EDS サイトで必須となる 3 つのページを作成します。以下のテンプレートは EDS への準拠が事前に検証済みのため、そのまま使用してください。

オプション A — DA MCP： 以下のコンテンツを使用して、DA のソース作成ツールを 3 回呼び出します。

オプション B — DA API：

各ファイルを最初に一時ファイルに書き込み、@ 構文を使って POST します。複数行のコンテンツを -F 'data=...' でインライン指定すると、curl が失敗します（終了コード 26）。サブシェルでの PATH 解決の問題を避けるため、/usr/bin/curl を明示的に使用してください。

cat > /tmp/nav.html << 'EOF'
<nav content>
EOF
/usr/bin/curl -s -o /dev/null -w "%{http_code}" -X POST "https://admin.da.live/source/{{ORG}}/{{REPO}}/nav.html" \
  -H "Authorization: Bearer {{DA_TOKEN}}" \
  -F "data=@/tmp/nav.html;type=text/html"

footer.html と index.html についても同様に繰り返します。

確認： 各 POST の後に HTTP 201 が返ることを確認してください。401 が返る場合はトークンの有効期限が切れています。ステップ 4 に戻ってください。

---

nav.html

<main>
  <div>
    <p><a href="/">{{SITE_NAME}}</a></p>
  </div>
  <div>
    <ul>
      <li><a href="/">Home</a></li>
    </ul>
  </div>
  <div></div>
</main>

footer.html

<main>
  <div>
    <p>© 2024 {{SITE_NAME}}. All rights reserved.</p>
  </div>
</main>

index.html

<main>
  <div>
    <h1>Welcome to {{SITE_NAME}}</h1>
    <p>Your new site is ready. Start editing this page in DA.</p>
  </div>
</main>

---

ステップ 6：プレビューを開始する

プレビューは DA のコンテンツを AEM 配信パイプラインに取り込み、.aem.page ドメインでアクセスできるようにします。

DA から取得したコンテンツをプレビューするリクエストには、パブリックリポジトリの場合でも Bearer トークンが必要です。/usr/bin/curl を明示的に使用してください。

/usr/bin/curl -s -o /dev/null -w "%{http_code}" -X POST "https://admin.hlx.page/preview/{{ORG}}/{{REPO}}/main/nav" \
  -H "Authorization: Bearer {{DA_TOKEN}}"
/usr/bin/curl -s -o /dev/null -w "%{http_code}" -X POST "https://admin.hlx.page/preview/{{ORG}}/{{REPO}}/main/footer" \
  -H "Authorization: Bearer {{DA_TOKEN}}"
/usr/bin/curl -s -o /dev/null -w "%{http_code}" -X POST "https://admin.hlx.page/preview/{{ORG}}/{{REPO}}/main/" \
  -H "Authorization: Bearer {{DA_TOKEN}}"

成功： 各リクエストで HTTP 200 または 201 が返ります。ホームページが次の URL で公開されます。

https://main--{{REPO}}--{{ORG}}.aem.page/

---

ステップ 7：確認して引き継ぐ

ユーザーに次のように伝えます。

サイトの準備ができました！

• プレビュー： https://main--{{REPO}}--{{ORG}}.aem.page/
• DA でコンテンツを参照： https://da.live/#/{{ORG}}/{{REPO}}/
• ホームページを編集： https://da.live/edit#/{{ORG}}/{{REPO}}/index
• ナビゲーションを編集： https://da.live/edit#/{{ORG}}/{{REPO}}/nav
• フッターを編集： https://da.live/edit#/{{ORG}}/{{REPO}}/footer
• GitHub リポジトリ： https://github.com/{{ORG}}/{{REPO}}

ローカルで開発を始めるには、次のコマンドを実行します。

git clone https://github.com/{{ORG}}/{{REPO}}.git
cd {{REPO}}
npm install
aem up

次は何をしますか？ページの追加、ブロックのカスタマイズ、カスタムドメインの設定から選べます。

---

トラブルシューティング

症状	考えられる原因	対処方法
ステップ 2 で 422 が返される	リポジトリ名がすでに存在する	ユーザーに別の名前を依頼します
ステップ 3 の検証で 404 が返される	aem-code-sync がインストールされていない	インストール URL を再送します
ステップ 4 でキャッシュされたトークンが見つからない、または期限切れになっている	このマシンで DA セッションを開始したことがない	GitHub から da-auth-helper をインストールし（npm install -g github:adobe-rnd/da-auth-helper）、da-auth-helper token を実行します
ステップ 5 の curl がコード 26 で終了する	-F フラグ内に複数行のコンテンツをインラインで指定している	コンテンツを一時ファイルに書き込み、@/tmp/file.html の構文を使用します
ステップ 5 で 401 が返される	IMS トークンが期限切れ、または存在しない	~/.aem/da-token.json の有効期限を再確認し、ユーザーに新しいトークンを依頼します
ステップ 5 で 403 が返される	トークンにこの組織／リポジトリへのアクセス権がない	ユーザーが DA で {{ORG}}/{{REPO}} への書き込みアクセス権を持っていることを確認します
ステップ 6 で 401 が返される	DA から取得したコンテンツをプレビューする際に認証が必要	プレビューリクエストに -H "Authorization: Bearer {{DA_TOKEN}}" を追加します
ステップ 6 で 404 が返される	aem-code-sync が正しくインストールされていない	ステップ 3 を確認してから再試行します
スクリプトで curl: command not found と表示される	サブシェルで PATH が解決されていない	/usr/bin/curl を明示的に使用します
プレビュー URL に空白のページが表示される	nav または index がプレビューされていない	問題のパスについてステップ 6 を再実行します

---

参考資料

• ボイラープレート：https://github.com/adobe/aem-boilerplate
• aem-code-sync アプリ：https://github.com/apps/aem-code-sync
• DA ドキュメント：https://da.live/docs
• DA Admin API：https://opensource.adobe.com/da-admin/
• DA Auth（IMS トークンヘルパー）：https://github.com/adobe-rnd/da-auth-helper
• AEM Admin API：https://www.aem.live/docs/admin.html
• オンボーディングガイド全文：https://www.aem.live/developer/create-site.md

DA URL のパターン

• フォルダーを参照：https://da.live/#/{{org}}/{{repo}}{{folder-path}}
• HTML ドキュメントを編集：https://da.live/edit#/{{org}}/{{repo}}{{path-without-extension}}
• JSON／シートを編集：https://da.live/sheet#/{{org}}/{{repo}}{{path-without-extension}}