Deploy an existing static site

Workers Sites require Wrangler Open external link — 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:

• Hugo Open external link
• Gatsby Open external link , requires Node
• Jekyll Open external link , requires Ruby
• Eleventy Open external link , requires Node
• WordPress Open external link (refer to the tutorial on deploying static WordPress sites with Pages)

​​ 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",
    });
  }
}

5. 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
   

6. 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.