This post describes the initial steps in setting up this blog site.

Requirements

The following applications need to be installed before creating websites with Astro on Cloudflare:

1. Node.js

   Check version: node -v

   Astro supports even version numbers of Node

2. npm (Node Package Manager)

   Check version: npm -v

3. nvm (Node Version Manager)

This website was created using Node.js version v24.18.0 and npm version 11.16.0

1 Initialize An Astro Project

Creating the ./jottings folder and get started with the Astro framework:

> npx create-astro@5.2.4 jotttings --no-install --no-git

(tutorial suggestion: npm create astro@latest)

Settings:

Directory: ./jottings
Start with: Framework Starter
Development Framework: Astro
Deployment Platform: Pages

Package installed: create-astro@5.2.4

Use blog template

2 Scaffold the site on Cloudflare

Create a Cloudflare pages site:

> npm create cloudflare@latest -- jottings --framework=astro --platform=pages

Output:

Copying template files - files copied to project directory

Installing dependencies
    installed via `npm install`

Application created

Configuring your application for Cloudflare Step 2 of 3

Installing wrangler A command line tool for building Cloudflare Workers

    installed via `npm install wrangler --save-dev`

Selecting workerd compatibility date, compatibility date 2026-09-23

Installing adapter
    installed via `npx astro add cloudflare`

Updating configuration in astro.config.mjs

Adding Wrangler files to the .gitignore file
    updated .gitignore file

Updating `package.json` scripts
    updated `package.json`

Generating types for your application
generated to `./worker-configuration.d.ts` via `npm run cf-typegen`

Installing @types/node
    installed via npm

Do you want to use git for version control?
    yes git

Initializing git repo
    initialized git

Deploy with Cloudflare Step 3 of 3

Do you want to deploy your application?
    yes deploy via `npm run deploy`

Logging into Cloudflare checking authentication status
    not logged in

Logging into Cloudflare This will open a browser window
allowed via `wrangler login`

Selecting Cloudflare account retrieving accounts
    account Simon.fermor@gmail.com's Account

Creating Pages project
    created via `npx wrangler pages project create jottings --production-branch main`

Verifying Pages project
    verified project is ready for deployment

3 Add Cloudflare to the packages

npm run astro add cloudflare

See astro.config.mjs

4 Build and Deploy

> astro build && wrangler pages deploy

> npm i -D wrangler@latest

> npm install scripts present

5 Running Wrangler

Check the version of Wrangler:

> npx wrangler --version

To run Wrangler:

> npx wrangler

To login to Wrangler:

> wrangler login

To set up Wrangler

> wrangler setup

To make sure the local installation of Wrangler is the latest:

> npm update @astrojs/cloudflare wrangler

6 To run the dev site locally

> npm run dev

7 To build the public site (updates files in /dist/client/)

> npm run build

Uses the build setting from package.json, for example:

"scripts": {
    "dev": "astro dev",
    "build": "astro build",
},

8 To upload to Cloudflare

The site on Cloudflare is a Pages project, good for static sites. Initially I used wrangler to deploy the site to Cloudflare. I’m now pushing to Github and using the Cloudflare app to build the site and update Cloudflare.

> npx wrangler deploy

9 DNS

For DNS I did the following:

• add a sub-domain for fermor.org on the domain provider
• create a CNAME target on the domain provider to point to jottings-woh.pages.dev (the Cloudflare site url)
• update Cloudflare to allow the external custom sub-domain (blog.fermor.org) to be used for the Cloudflare site

More details

Astro Getting Started Tutorial

Cloudflare Astro Deployment Guide

Migrating from Cloudflare Pages to Workers

Resolving Dependancy Version Errors

Cloudflare Deployment Guide

YouTube Cloudflare Astro guide

Astro Guide to Cloudflare Deployment

Astro Guide to Using Endpoints

Favicon Generator

PNG to ICO conversion

Noun Project Bike Icon