How to Host a Static Site with Astro and Cloudflare Workers

Static sites are back - and they are better than ever. With Astro and Cloudflare Workers, you can build a fast, SEO-friendly site and deploy it globally for free in under an hour. No servers, no containers, no bills.

This is the exact stack Studio Cavan uses for this site.

Why Astro

Astro is a modern static site generator built for content-heavy sites. What makes it stand out:

Zero JS by default. Astro ships no JavaScript to the browser unless you explicitly opt in. Pages are pure HTML and CSS.
Component islands. You can drop in React, Vue or Svelte components where you need interactivity - without paying the cost everywhere.
MDX support. Write blog posts and docs in Markdown with embedded components.
Content collections. Type-safe content management built into the framework - no CMS required.
Fast builds. Even large sites build in seconds.

Why Cloudflare Workers

Cloudflare Workers (and the Pages product that’s merging into it) gives you:

Global CDN. Your static assets are served from 300+ data centers worldwide.
Free tier. Generous enough to run a real site with zero cost.
Git-based deploys. Every push to main triggers a build and deploy automatically.
Custom domains. Free SSL, no configuration required.

Step 1 - Create an Astro project

npm create astro@latest my-site
cd my-site
npm install

Pick the “Empty” template to start clean, or “Blog” if you want a head start with content collections.

Step 2 - Configure for static output

Open astro.config.mjs and set the output to static:

import { defineConfig } from 'astro/config';

export default defineConfig({
  site: 'https://your-domain.com',
  output: 'static',
});

This tells Astro to generate plain HTML files - no server runtime needed.

Step 3 - Add a wrangler config

Create wrangler.jsonc at the root of your project:

{
  "$schema": "node_modules/wrangler/config-schema.json",
  "name": "my-site",
  "compatibility_date": "2025-09-27",
  "assets": {
    "directory": "./dist"
  }
}

This tells Cloudflare’s wrangler CLI where your build output lives.

Step 4 - Install wrangler

npm install --save-dev wrangler

Add a deploy script to package.json:

{
  "scripts": {
    "dev": "astro dev",
    "build": "astro build",
    "deploy": "npm run build && wrangler deploy"
  }
}

Step 5 - Deploy to Cloudflare

First, authenticate with Cloudflare:

npx wrangler login

Then deploy:

npm run deploy

Wrangler will build your site, upload the static assets to Cloudflare’s network and give you a live URL. First deploy takes about 30 seconds.

Step 6 - Connect your GitHub repo for automatic deploys

In the Cloudflare Dashboard:

Go to Workers and Pages
Find your project
Go to Settings - Builds and Deployments
Connect your GitHub repo
Set the build command to npm run build and deploy command to npx wrangler deploy

From now on, every push to main triggers a fresh deploy automatically.

Step 7 - Add a custom domain

In the Cloudflare Dashboard, go to your Worker project and add a custom domain under Settings - Domains and Routes. Cloudflare handles SSL automatically - no Certbot, no renewal scripts.

Optional - Add a sitemap

For SEO, install the official sitemap integration:

npm install @astrojs/sitemap@3.2.1

Add it to astro.config.mjs:

import sitemap from '@astrojs/sitemap';

export default defineConfig({
  site: 'https://your-domain.com',
  output: 'static',
  integrations: [sitemap()],
});

Astro generates sitemap-index.xml on every build. Submit it to Google Search Console at https://your-domain.com/sitemap-index.xml.

The result

A globally distributed static site with:

Sub-100ms response times
Free hosting
Automatic deploys on every git push
Free SSL and custom domain
A sitemap ready for Google

No WordPress, no PHP, no server to maintain. Just fast HTML served from the edge.

If you want help migrating an existing site to this stack, Studio Cavan can help.