既存プロジェクトから始める

Workers Sites には Wrangler ↗ が必要です。最新バージョンを使ってください。

既存の静的サイトプロジェクトをデプロイするには、あらかじめ生成されたサイトから始めます。Workers Sites は、次のような静的サイトジェネレーターすべてで使えます。

Hugo ↗
Gatsby ↗（Node が必要）
Jekyll ↗（Ruby が必要）
Eleventy ↗（Node が必要）
WordPress ↗（Pages で静的な WordPress サイトをデプロイするチュートリアルを参照）

はじめ方

プロジェクトのルートディレクトリで wrangler init を実行し、基本的な Worker を生成します。
```
wrangler init -y
```
このコマンドは次のファイルを追加または更新します。
- wrangler.jsonc: プロジェクト設定を含むファイルです。
- package.json: Wrangler の devDependencies が追加されます。
- tsconfig.json: まだない場合は、TypeScript で Worker を書くために追加されます。
- src/index.ts: TypeScript で書かれた基本的な Cloudflare Worker です。
サイトのビルド／出力ディレクトリを Wrangler ファイルに追加します。
{ "site": { "bucket": "./public" // <-- Add your build directory name here. } }
[site] bucket = "./public"
主要な静的サイトジェネレーターのデフォルトディレクトリは次のとおりです。
- Hugo: public
- Gatsby: public
- Jekyll: _site
- Eleventy: _site
プロジェクトに @cloudflare/kv-asset-handler パッケージをインストールします。
```
npm i -D @cloudflare/kv-asset-handler
```
src/index.ts の内容を次のコードに置き換えます。

import { getAssetFromKV } from "@cloudflare/kv-asset-handler";
import manifestJSON from "__STATIC_CONTENT_MANIFEST";
const assetManifest = JSON.parse(manifestJSON);

export default {
	async fetch(request, env, ctx) {
		try {
			// Add logic to decide whether to serve an asset or run your original Worker code
			return await getAssetFromKV(
				{
					request,
					waitUntil: ctx.waitUntil.bind(ctx),
				},
				{
					ASSET_NAMESPACE: env.__STATIC_CONTENT,
					ASSET_MANIFEST: assetManifest,
				},
			);
		} catch (e) {
			let pathname = new URL(request.url).pathname;
			return new Response(`"${pathname}" not found`, {
				status: 404,
				statusText: "not found",
			});
		}
	},
};

import { getAssetFromKV } from "@cloudflare/kv-asset-handler";

addEventListener("fetch", (event) => {
	event.respondWith(handleEvent(event));
});

async function handleEvent(event) {
	try {
		// Add logic to decide whether to serve an asset or run your original Worker code
		return await getAssetFromKV(event);
	} catch (e) {
		let pathname = new URL(event.request.url).pathname;
		return new Response(`"${pathname}" not found`, {
			status: 404,
			statusText: "not found",
		});
	}
}

wrangler dev または npx wrangler deploy を実行し、サイトをプレビューまたは Cloudflare にデプロイします。 Wrangler は、設定したディレクトリ内のアセットを自動でアップロードします。
```
npx wrangler deploy
```
所有していて、すでに Cloudflare ゾーンとして追加済みのカスタムドメインにサイトをデプロイします。Wrangler ファイルに route プロパティを追加します。
{ "route": "https://example.com/*" }
route = "https://example.com/*"
Note
route を正しく設定するには、Routes のドキュメントを参照してください。

プロジェクトの設定について、さらに詳しく学べます。