Building a static site with Cloudflare Workers

Cloudflare recently announced static assets for workers.

You can now deploy static files with a worker, instead of shipping worker code in your Cloudflare Pages project.

This makes it easier to build things like multi-user chat with websockets using durable objects which are not deployable via Cloudflare Pages.

DIY

Here are the steps to deploy a static site from scratch. You can follow along or find the code in github.

Less patient users can run pnpm create cloudflare --experimental and choose a static asset template as described in the docs.

1. Create an empty directory and install wrangler

These instructions assume that you already have node and pnpm.

mkdir minimal-static-site
cd minimal-static-site
pnpm install wrangler

2. Create wrangler.toml

You can choose your own worker name and content directory for assets.

#:schema node_modules/wrangler/config-schema.json
name = "minimal-static-site"
compatibility_date = "2024-09-25"
assets = { directory = "./content" }

The worker will serve all files in the assets directory on routes starting at the worker root.

3. Create index.html in your content directory

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        font-family: sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #255;
      }
      h1 {
        color: orange;
        font-size: 20vw;
        padding: 0.5ch;
      }
    </style>
  </head>
  <body>
    <h1>Hello👋 Workers</h1>
  </body>
</html>

4. Ship it 🚢

$ pnpm wrangler deploy

 ⛅️ wrangler 3.78.10
--------------------

🌀 Building list of assets...
🌀 Starting asset upload...
🌀 Found 1 new or modified file to upload. Proceeding with upload...
+ /index.html
Uploaded 1 of 1 assets
✨ Success! Uploaded 1 file (1.68 sec)

Total Upload: 0.34 KiB / gzip: 0.24 KiB
Uploaded minimal-static-site (9.81 sec)
Deployed minimal-static-site triggers (5.77 sec)
  https://minimal-static-site.jldec.workers.dev
Current Version ID: d0ecd041-b9a3-4e89-b168-baa394567839

The result is live at minimal-static-site.jldec.workers.dev

What's next?

For more thoughts on where this is going, see Read-write Static Assets bindings for Cloudflare Workers.