How to Set Up Cloudflare Workers with Astro

/

This blog is built with Astro and deployed on Cloudflare Workers. Here’s exactly how to set it up from scratch.

Why Cloudflare Workers?

Cloudflare Workers runs your code at the edge, in over 330 locations worldwide. It’s fast, cheap (free tier: 100k requests/day), and requires zero server management. Pair it with Astro and you get a modern, server-rendered blog that loads instantly everywhere.

Project Setup

Create your Astro project and add the Cloudflare adapter:

npm create astro@latest my-blog -- --template minimal
cd my-blog
npx astro add cloudflare

This installs @astrojs/cloudflare and configures it in astro.config.ts.

Configuration

The adapter is set up in astro.config.ts:

import { defineConfig } from 'astro/config';
import cloudflare from '@astrojs/cloudflare';

export default defineConfig({
  output: 'server',
  adapter: cloudflare(),
});

With output: 'server', Astro renders pages on-demand at the edge. The Cloudflare adapter bundles everything into a Worker script automatically.

Writing Content

Add markdown files under src/pages/posts/. Each post uses a layout:

---
layout: ../../layouts/BlogPost.astro
title: Your Post Title
date: 2026-06-24
tags: tutorial, cloudflare
---

Content goes here...

The layout receives frontmatter fields via Astro.props.content in Astro v7:

---
const { content } = Astro.props;
const title = content.title;
const date = new Date(content.date);
---

Listing Posts

Use import.meta.glob to list posts (Astro v7 replaces Astro.glob):

---
const modules = import.meta.glob('./posts/*.md', { eager: true });
const posts = Object.entries(modules)
  .map(([path, mod]) => ({
    url: path.replace('./posts/', '/posts/').replace(/\.md$/, ''),
    title: mod.frontmatter.title,
    date: new Date(mod.frontmatter.date),
  }))
  .sort((a, b) => b.date - a.date);
---

Build Commands

The package.json scripts handle everything:

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

Deploying

Option 1: Wrangler CLI

Authenticate and deploy:

npx wrangler login
npm run deploy

The build outputs to dist/ — the Worker bundle is in dist/server/entry.mjs.

Option 2: GitLab CI/CD

Create .gitlab-ci.yml for automatic deployments:

image: node:22

before_script:
  - npm install

pages:
  script:
    - npm run build
  artifacts:
    paths:
      - dist/

Push to GitLab, then connect your repo to Cloudflare Pages for auto-deploys on every push.

Git Workflow

Push your code to GitLab:

git remote add origin git@gitlab.com:your-username/your-blog.git
git add -A
git commit -m "Initial commit"
git push origin main

Summary