Deploying Astro to Cloudflare Pages

What is Deployment?

Right now, your site runs on localhost:4321 - only you can see it. Deployment means putting it online so anyone can visit it.

Your Computer
(localhost)

→

GitHub
(code storage)

→

Cloudflare Pages
(live website)

⚠️ Before You Deploy

Make sure your project builds without errors:

npm run build

If this fails, fix the errors first! Deployment won't work with build errors.

Step 1: Push Your Code to GitHub

If you don't have a GitHub repo yet:

Go to github.com/new
Create a new repository (e.g., "my-astro-site")
Don't initialize with README (your project already has files)
Click "Create repository"

In your terminal (in your project folder):

# Initialize git (if not already done)
git init

# Add all files
git add .

# Create first commit
git commit -m "Initial commit"

# Add your GitHub repo as remote
# Replace YOUR_USERNAME and YOUR_REPO with yours
git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPO.git

# Push to GitHub
git branch -M main
git push -u origin main

✅ Your code is now on GitHub! Refresh your GitHub repo page to see it.

Step 2: Connect Cloudflare Pages

Go to dash.cloudflare.com
Sign up / Log in (free account)
Click Workers & Pages in the sidebar
Click Create application
Choose Pages tab
Click Connect to Git
Authorize Cloudflare to access your GitHub
Select your Astro repository
Click Begin setup

Step 3: Configure Build Settings

Framework preset: Astro

Cloudflare auto-detects this!

Build command: npm run build

Command to build your site

Build output directory: dist

Where Astro puts the built files

Click Save and Deploy

Step 4: Wait for Deployment

Cloudflare will now:

Clone your GitHub repo
Run npm install
Run npm run build
Upload the dist folder to their CDN
Give you a live URL!

This takes 1-3 minutes usually.

✅ You're Live!

Once deployment succeeds, Cloudflare gives you a URL like:

https://your-project-123.pages.dev

Click it to see your site live on the internet! 🎉

Automatic Deployments

The best part: every time you push to GitHub, Cloudflare automatically rebuilds and redeploys!

# Make changes to your code
git add .
git commit -m "Update hero section"
git push

# Cloudflare automatically deploys the changes!
# Visit your URL in 1-2 minutes to see updates

Custom Domain (Optional)

Don't like the .pages.dev URL? You can use your own domain:

Buy a domain (e.g., from Namecheap, Google Domains)
In Cloudflare Pages → Your project → Custom domains
Add your domain and follow DNS setup instructions
Free HTTPS included!

💡 Tips for Creative Devs

Preview deployments: Cloudflare creates a preview URL for every git branch. Great for showing clients work-in-progress!
Check build logs: If deployment fails, check the logs in Cloudflare dashboard to see what went wrong.
Environment variables: Add API keys in Cloudflare Settings → Environment variables (don't commit secrets to GitHub!)
GSAP files: All your GSAP animations work the same when deployed - no changes needed!

Other Deployment Options

Platform	Best For	Free Tier
Cloudflare Pages	Static sites (your best choice)	✅ Unlimited
Vercel	Next.js, easy deployment	✅ 100GB bandwidth/month
Netlify	JAMstack sites, forms	✅ 100GB bandwidth/month
GitHub Pages	Simple static sites	✅ Unlimited (1GB storage)

All work great with Astro! Cloudflare Pages is fastest and most generous with free tier.

Quick Summary

Test build locally: npm run build
Push code to GitHub
Connect Cloudflare Pages to your GitHub repo
Configure build settings (Astro preset)
Deploy! Get your live URL
Future updates: just git push

🚀 Deploying Astro to Cloudflare Pages