Cloudflare Docs
Workers
Workers
Visit Workers on GitHub
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";
    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 wrangler publish to preview or publish your site on Cloudflare. Wrangler will automatically upload the assets found in the configured directory.

    $ wrangler publish

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