Building a mimimal 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 possible to add things like 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

Here is some sample HTML to get started. Use any HTML, CSS and JavaScript files you like. Everything in the content directory will be uploaded and served, including images.

<!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?

Here are some suggestions for next steps:

Connect a GitHub repo.
Add a custom domain.
Build your site with a framework like Astro.

For more thoughts about workers and assets, see Read-write Static Assets bindings for Cloudflare Workers.