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 Workers)

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