Recipe: Keystatic + Astro on Cloudflare Workers

[terrabitz]

Hey all! I recently went through the process of setting up Keystatic on my Astro site deployed to Cloudflare Workers. I figured I'd document the process in a short tutorial to help anyone else looking to setup a similar stack

---

• Follow the official guide to integrate Keystatic into your Astro project: Adding Keystatic to an Astro project - Docs | Keystatic
• Follow the GitHub Mode instructions: GitHub mode - Docs | Keystatic
• Add the Cloudflare Adapter: @astrojs/cloudflare | Docs
• Add your secrets to the Cloudflare Workers environments (this will prompt you to login to Cloudflare if you haven't already)

npx wrangler secret bulk .env

• Build and deploy

npm run build
npx wrangler deploy

• Update your GitHub App's callback URL to https://<app-name>.<account-name>.workers.dev/api/keystatic/github/oauth/callback

Done! Now you should be able to access Keystatic at https://<app-name>.<account-name>.workers.dev/keystatic

I originally thought this would be harder, but it was really all quite plug-n-play. The only real thing I needed to do was figure out env var management in Cloudflare, which the wrangler secret bulk command makes pretty easy.

Example setup: https://github.com/terrabitz/keystatic-astro-cloudflare-demo