Astro and Keystatic
- Open source (MIT)
- Astro on GitHub
- Keystatic on GitHub
- Every save is a Git commit
The site you're reading is built with Astro and edited in Keystatic. Pages go out as plain, fast HTML, every edit is saved in Git, and when we need something custom we write it into the same project.
- 1Cloudflare Worker serves the whole site
- 1-2 minfrom Save to the site
- 2builds on it
- 2services it belongs to
Why we rebuilt our own site on it
Fast by default
Astro turns every page into plain HTML and only sends JavaScript for the parts that need it, like the menu or an animation. Nothing loads that the page doesn't use.
Editing in a form
Keystatic gives each kind of page its own form: a tool, a case study, a landing page. You fill in the fields and click Save. No code, no Designer.
Every edit kept in Git
Each save is a commit on GitHub, so you can see who changed what and when, and put any page back the way it was.
Pages built from blocks
Every section is a block with its own reference, like HER-06c for the hero at the top of this page. We add, reorder and hide them in the editor, and the style guide shows every version side by side.
Custom when you need it
Forms, redirects, the staging login and pages generated from data are all code in the same project. No plugins, no embeds, nothing we can't change.
Checks before it ships
Every change runs a content check before it deploys, so a broken reference or a page the editor can't open never reaches the site.
We rebuilt this website in Astro so we could change anything on it. It used to be a Webflow site. Now every page is built from content files in GitHub, Keystatic is the editor, and one Cloudflare Worker serves the lot.
How an edit gets to the site
- Someone changes a page in Keystatic and clicks Save.
- Keystatic saves the change as a commit on GitHub.
- GitHub checks the content, builds the site and deploys it to Cloudflare, usually within a minute or two.
If an edit's wrong, we revert that commit and the old page is back.
Content is just files
Every tool, case study and post is a small JSON file in the project. This page starts like this:
src/content/tools/astro-keystatic/index.json
{
"title": "Astro and Keystatic",
"fields": {
"short-name": "Astro + Keystatic",
"cluster": "website",
...
}
}So we can search, check and change content the same way we change code, in bulk if we need to.
Blocks, not one-off pages
Each section is a block with a permanent reference and numbered versions. Most pages are layouts: a list of blocks you put in order in Keystatic. All the tool pages share one layout, so a change there reaches every tool at once.
Forms go straight to our systems
Every form posts to the Worker, which checks it and hands it to n8n. n8n saves the lead and tells us. The site itself never sends email.
Built with Claude Code, checked by people
Most of the code is written with Claude Code. Code changes go through a pull request that's tested and reviewed before it merges. Content saves in Keystatic run the content check before they deploy.
When a client's team wants to edit the site visually, we build in Webflow. Astro is for when a site needs custom code. WordPress sites move to whichever of the two suits the site. The comparison below says which fits you.
Which website setup fits you?
Astro isn't the right call for every site. Pick what yours needs to do and we'll tell you what we'd use.
Your team edits it visually
| What matters | Astro + Keystatic |  WebflowOur pick |
|---|---|---|
| How you edit | Fields in a form. A new kind of section needs a developer to build the block first | On the page itself, and designers can move and restyle anything in the Designer |
| A brand-new page design | A developer builds the blocks, then anyone can use them | Your designer builds it in the browser |
| Hosting | You set it up (ours is a Cloudflare Worker) | Included in the site plan |
| Undo | Every save is a Git commit you can revert | Automatic backups you can restore |
| What you pay for | Hosting, plus developer time for new blocks | A site plan for each site, plus seats for your team |
| Who looks after it | A developer, or us | Webflow runs the hosting and the platform |
Our pick: Webflow, if your marketing team wants to change layouts and publish without a developer.
The site needs custom tools
| What matters | Astro + KeystaticOur pick | Webflow |
|---|---|---|
| Custom logic | Written in the site's own code, server endpoints included | Custom code embeds, marketplace apps or a separate service |
| Pages made from data | Generated from content files when the site builds | CMS collections, with an item limit on each plan |
| Forms | Post to your own endpoint, which passes them on (ours go to n8n) | Webflow's form handling, or a webhook out to your tools |
| Checks before publishing | Scripts run on every change and stop broken content | You check it in the Designer before you publish |
| What loads in the browser | HTML, plus JavaScript only where a component needs it | jQuery and Webflow's own scripts by default |
| Your content | JSON or Markdown files in your own Git repo | In Webflow's CMS, out through the API or a CSV export |
Our pick: Astro and Keystatic. Forms that feed your CRM, pages built from data and checks before anything ships are all just code in one project.
You sell online
| What matters | Astro + Keystatic |  ShopifyOur pick |
|---|---|---|
| Products and stock | You'd build them or connect a service | Shopify handles products, variants and stock |
| Checkout | Not included, you'd connect a payment provider | Shopify's own checkout, so the design hands people into the cart |
| Storefront design | Fully custom, built as blocks in code | A Shopify theme, or a Webflow design on top, joined by an app such as Smootify |
| Tracking | You build and test it yourself | We send purchase events server-side, because browser tags often fail on a Shopify checkout |
| Who looks after it | A developer, or us | Shopify runs checkout and the platform, and you edit products in Shopify and pages in the storefront |
| What you pay for | Hosting, plus developer time | A Shopify plan, plus a Webflow site plan and the sync app if the storefront is on Webflow |
Our pick: Shopify for the products and checkout. The storefront is whatever suits the brand: a Shopify theme, or a custom Webflow storefront on top.
Webflow and Shopify facts are from their own sites and docs, October 2026, and from our own ecommerce builds. Prices change, so we've kept their numbers out. Our side is from this site's own code and docs.
What we connect it to
A fast site with an easy editor still needs tracking, good content and a quick follow-up on every enquiry before it brings in customers.
GitHubHolds the code and the content. Every CMS save is a commit.
CloudflareServes the site from a Worker and stores the uploaded images.
Claude CodeWrites most of the code. Code changes are tested and reviewed before they merge.
n8nGets every form the site sends and follows it up.- WebflowWhat this site moved off. We still build client sites on it when the team wants to edit visually, and WordPress sites move to it or to Astro, whichever suits the site.
It's one part of the setup.
If another part is broken, this one wastes money.
What's a customer worth?
- 1
- 2
- 3
- 4
Where we've used Astro and Keystatic
- Built by us
Pacing AI
The Cursor skills, connector notes and workspace setups we use on client work, on one site. Copy a folder, or ask us to set it up on your tools.
See the build
- Built by us
This website
How we rebuilt pacing.agency in Astro, with Keystatic as the editor and one Cloudflare Worker, in three weeks, with AI agents opening 95% of the pull requests.
See the build+4
Services that use it
We don't sell it on its own. Each of these services uses it alongside the rest of your setup.
- Place in the loop: WebsiteWebsite Design & DevelopmentWebsites that look the part, turn visitors into enquiries, and that your team can update without a developer.Related tools: Webflow, Astro and Keystatic, Shopify, FigmaHow it fits
- Custom BuildsWhen nothing you can buy does the job, we build the missing piece and connect it to the rest. We've built and run several of these for ourselves.How it fits
What Astro and Keystatic is
Astro is an open-source web framework for content sites. It turns your pages into HTML when the site builds and only sends JavaScript for the components you mark as interactive. It's MIT-licensed. The team behind it joined Cloudflare in January 2026, and Cloudflare says Astro stays open source.
Keystatic is a content editor made by Thinkmill, also MIT-licensed. It edits the Markdown, JSON and YAML files in your project through a form in the browser, and saves them to your computer or straight to GitHub. It works with Astro, Next.js and Remix. Keystatic Cloud, a hosted option, handles the GitHub sign-in and image optimisation if you'd rather not set that up.
Questions about Astro and Keystatic
Straight answers on how we work, what it costs and what to expect. If yours isn't here, just ask.
Still have questions?
Talk to usShould I move my Webflow site to Astro?
Probably not, if your team edits pages in Webflow every week and the site does what you need. Webflow's visual editor is hard to beat for that.
It's worth it when the site needs things Webflow makes awkward: custom logic, pages built from data, forms that go straight into your own systems, or content kept in Git with checks before anything ships. That's why we moved our own site.
Start with your numbers.
We'll tell you which tools you need and which connections are missing.
Bring your numbers.
We'll tell you if the spend makes sense.
- A 15-minute callYour goals, your challenges, and whether we're the right fit.
- A 1-hour discovery callWe dig into your numbers. Worth a hundred emails.
- A concrete planAds, a custom build or both, as a one-off project or ongoing.