What I Wanted to Do

I wanted to publish my Astro site using Cloudflare Pages.

Environment

  • Windows 11
  • Node.js
  • Astro
  • GitHub
  • Cloudflare Pages

Steps

1. Install Astro

npm create astro@latest

2. Verify Locally

cd project-name
npm run dev

If the Astro welcome screen appears at http://localhost:4321, you are good to go.

3. Push to GitHub

If this is your first time pushing to GitHub, see How to Push to GitHub for the First Time.

git init
git add .
git commit -m "first commit"
git remote add origin YOUR_GITHUB_URL
git push -u origin main

4. Connect to Cloudflare Pages

  1. Go to “Workers & Pages” → “Create application”
  2. Click “Looking to deploy Pages? Get started” at the bottom of the screen
  3. Click “Import an existing Git repository” → “Get started”
  4. Select your repository
  5. Choose “Astro” from the Framework preset dropdown
  6. Click “Save and Deploy”

Gotchas

  • Clicking “Create application” opens the Workers screen. For Pages, use “Get started” at the bottom of the page
  • Selecting the Astro framework preset automatically fills in the build settings
  • If you need to set environment variables after deployment, see How to Set Environment Variables in Cloudflare Pages
  • Fiverr - Find freelance developers and tech experts