Cloudflare Docs
Workers
Edit this page
Give us feedback
Set theme to dark (⇧+D)

Deploy an existing static site

Workers Sites require Wrangler — make sure to use the latest version.

To deploy a pre-existing static site project, start with a pre-generated site. Workers Sites works with all static site generators, for example:

​​ Getting started

  1. Run the wrangler init command in the root of your project’s directory to generate a basic Worker:

    $ wrangler init -y

    This command adds/update the following files:

    • wrangler.toml: The file containing project configuration.
    • package.json: Wrangler devDependencies are added.
    • tsconfig.json: Added if not already there to support writing the Worker in TypeScript.
    • src/index.ts: A basic Cloudflare Worker, written in TypeScript.
  2. Add your site’s build/output directory to the wrangler.toml file:

    [site]
    bucket = "./public" # <-- Add your build directory name here.

    The default directories for the most popular static site generators are listed below:

    • Hugo: public
    • Gatsby: public
    • Jekyll: _site
    • Eleventy: _site
  3. Install the @cloudflare/kv-asset-handler package in your project:

    $ npm i -D @cloudflare/kv-asset-handler
  4. Replace the contents of src/index.ts with the following code snippet:

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",
});
}
}
  1. Run wrangler dev or npx wrangler deploy to preview or deploy your site on Cloudflare. Wrangler will automatically upload the assets found in the configured directory.

    $ npx wrangler deploy
  2. Deploy your site to a custom domain that you own and have already attached as a Cloudflare zone. Add a route property to the wrangler.toml file.

    route = "https://example.com/*"

Learn more about configuring your project.