Auto-deploy your generated static site to Cloudflare Workers.

Installation

• compile from source code
• get pre-built installers for all add-ons with a Lifetime Purchase

Configuration

via UI

Input your Cloudflare Workers connection settings via the WP2Static > Cloudflare Workers menu.

via WP-CLI

wp wp2static cloudflare_workers options set name value

Troubleshooting

• check WP2Static’s Logs for any errors
• check webserver/PHP’s error logs on server
• check keys in KV namespace in Cloudflare

• test your Cloudflare API token:

  • via CLI:

    curl -X GET "https://api.cloudflare.com/client/v4/user/tokens/verify" \
    -H "Authorization: Bearer YOURAPITOKEN" \
    -H "Content-Type:application/json"

• check your Cloudflare API token’s permissions (write to KV for correct account/zone)

How it works

The Cloudflare Workers deployment add-on deploys your static site files to a Cloudflare Workers KV namespace. It adds a key for each path (path), along with an extra key (path_ct) to store the content type. An example of 1 file uploaded, would result in 2 keys:

A Workers script (you need to setup) is used to read the files and correct content type and serve these to the user, caching at their nearest edge locations.

You’ll need to add a Route for the Worker for it to run on the intended domain/subdomain.

The resulting deployment will function similar to if you deploy with Cloudflare’s Wrangler CLI tool.

An example script for Workers to use the KV store:

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

/**
 * Respond to the request
 * @param {Request} request
 */
async function handleRequest(request) {
  const url = new URL(request.url);
  uri = url.pathname

  const value = await FIRST_KV_NAMESPACE.get(uri)
    if (value === null) {
      return new Response("Value not found", {status: 404})
    }

  const content_type = await FIRST_KV_NAMESPACE.get(uri + "_ct")
    if (content_type === null) {
      // TODO: fallback to default content type or guess from extension/content
      return new Response("Content type not found", {status: 404})
    }

  const init = {
    headers: {
      'content-type': content_type + ';charset=UTF-8',
    },
  }

  response = new Response(value, init)

  return response
}