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:添加 WranglerdevDependencies。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
- Hugo:
-
在项目中安装
@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 zone 附加的自定义域名。向 Wrangler 文件添加
route属性。{ "route": "https://example.com/*" }route = "https://example.com/*"
了解配置项目的更多信息。