Why I killed my own WordPress site
I've been building websites since before most people had email. Mosaic browser. Netscape Navigator. RealAudio streams that took 10 minutes to buffer on a 14.4 modem. Animated GIFs as "design". I was there for all of it — the early web, the messy web, the exciting web.
Over the years, I got deep into CSS, PHP, and frontend. Built hundreds of sites. Learned WordPress when it was just a blogging tool. Moved to WooCommerce, then Elementor. Built 150+ client sites. WordPress is my comfort zone — I can hand-code a theme in my sleep.
But JavaScript? Dynamic frameworks? That was always the wall I hit. I could read it. I could tweak it. But building something from scratch in a JS framework felt like a different language. It always challenged me more than I wanted to admit.
Meanwhile, my own agency site was embarrassing. Elementor loaded 800KB+ of CSS and JS I didn't need. PageSpeed was in the 40s. I'm the guy who sells web design to other businesses — and my own site was the worst example. The cobbler's children with no shoes.
Then I discovered Claude Code. I started watching what people were building on YouTube — non-developers shipping real products with AI coding assistants. I saw what Astro could do. I read about headless WordPress. And something clicked.
I decided to challenge myself. Not hire someone. Not outsource it. Do it myself, hands-on, with AI as my co-pilot. Go beyond my comfort zone. Learn by doing. Break things. Fix them. Ship it.
It wasn't a one-prompt miracle — I want to be honest about that. It was a grind. Trial and error. Frustration at 2am when the mobile menu broke for the third time. Moments where everything disappeared and I had to git reset. But also — genuine breakthroughs. That rush when PageSpeed hits 92 for the first time. When 25 pages just work. When the deploy takes 45 seconds instead of a prayer.
After all these years — from Mosaic to Astro — this was the most fun I've had building something in a long time. This is that story.
Before vs After — the hard numbers
| Metric | Before (Elementor) | After (Astro) |
|---|---|---|
| PageSpeed (Mobile) | ~45 | 90+ |
| PageSpeed (Desktop) | ~62 | 98+ |
| First Contentful Paint | 3.2s | 0.4s |
| Total Page Weight | 2.8 MB | ~180 KB |
| CSS Files Loaded | 12+ files (Elementor) | 1 scoped file |
| JS Files Loaded | 18+ scripts | 1 (GSAP only) |
| WordPress Plugins | 12 plugins | 2 (WPGraphQL + ACF) |
| Time to Update Content | 5-10 min (Elementor) | Same (wp-admin) |
| Hosting Cost | ~$30/mo (shared) | ~$7/mo (Coolify VPS) |
| Deploy Time | N/A (live edits) | ~45 seconds |
The new stack: Astro (static) + Headless WordPress (content only) + Zero plugins on frontend
What is headless WordPress?
Headless WordPress means we still use WordPress for what it's good at — writing blog posts, managing content, storing project data. But instead of WordPress generating the pages visitors see, we use Astro to build a fast, static website that pulls content from WordPress via its API.
Think of it like this: WordPress is the kitchen. Astro is the waiter. The customer never sees the kitchen — they just get a beautifully plated dish, fast.
The 2-day timeline (yes, really)
We started on March 23, 2026 at 4:15pm. By March 24, 2:10pm — roughly 24 working hours later — we had a fully deployed, production-ready website. Here's how it went:
Initial setup
Astro project scaffolded. Connected to WordPress via WPGraphQL. Custom post types and ACF fields pulling through. Blog, projects, testimonials — all working from the API.
Pages and design
About, contact, Singapore geo-SEO pages created. Tried an industrial brutalist aesthetic. Too dark. Pivoted to a clean, light design with subtle dark accents.
Story-driven homepage
Rewrote the entire homepage as a story: problem → solution → services → proof → CTA. Fixed stats, added real data (150+ clients, 9 years, 200+ projects).
Deployment
Dockerfile + nginx config for Coolify. Site live on the server within 15 minutes. Fixed port routing for Traefik.
Polish round
Nav dropdowns, GSAP scroll animations, portfolio grid with 50 real screenshots, dark footer, Singapore geo links.
Full homepage rewrite
Phase 1 rewrite with proper story flow. Swapped AI-generated hero for a real before/after comparison. Images served from WordPress CDN in WebP.
Animations and mobile
Added CSS isometric elements, GSAP parallax. Tried AOS — it broke things — ripped it out. Fixed mobile menu three times. Added animated Lucide icons throughout.
All service pages
6 full service pages built: Website Design, SEO & Content, E-Commerce, Chatbot, Automation, Annual Plan.
Case studies and projects
About page rebuild. Case studies with real GSC data. Project pages with hero, sidebar, screenshots. Breadcrumb navigation. Custom 404 page.
Final consistency review
Full site audit: spacing, icons, content depth, navigation. Every page reviewed. 53 commits total. Done.
What we gained
Pages load in under 0.5 seconds. No Elementor CSS/JS bloat. Static HTML served from CDN. Google PageSpeed went from ~45 to 90+.
Every pixel is hand-coded. No page builder limitations. No "this widget doesn't support that" compromises. We write exactly what we want.
Blog posts, projects, and testimonials still live in WordPress. The team writes content in wp-admin like always. Nothing changed for them.
Clean HTML. Proper heading hierarchy. Structured data. Fast load times. No render-blocking scripts. Everything Google wants to see.
From ~$30/mo shared hosting to ~$7/mo on a Coolify VPS. Static files are tiny. No PHP processing. No database queries on every page load.
No public wp-admin. No plugin vulnerabilities on the frontend. WordPress is hidden behind an API — attackers can't find it.
Why not Supabase, Convex, or a full JS backend?
We see a lot of developers reach for Supabase, Convex, PlanetScale, or a custom Node.js backend when rebuilding a site. For most business websites, that's overkill.
| Approach | Monthly cost | Complexity | Speed |
|---|---|---|---|
| WordPress + Elementor | ~$30 | High (12 plugins) | Slow |
| Next.js + Supabase + Vercel | ~$45+ | High (3 services) | Good |
| Custom backend + database | ~$50+ | Very high | Good |
| Astro + Headless WP + Coolify | ~$7 | Low (2 plugins) | Fastest |
| Astro + Headless WP + Cloudflare | Free | Low (2 plugins) | Fastest |
No database queries on every page load. No serverless cold starts. No complex auth setup. Just static HTML files served instantly. The WordPress database only gets hit at build time — and you already have it running.
You can even host this for free
We use Coolify on our own VPS (~$7/mo) because we like the control. But since Astro builds to pure static files, you can host it for free on:
That means the total cost of running a headless WordPress + Astro site can be $0/month for hosting — you only pay for the WordPress hosting (which you already have). The frontend is free.
What went wrong (and what we learned)
It wasn't all smooth. Here's the honest version:
- Design pivots: We started with a dark, industrial brutalist look. Too aggressive. Pivoted to light with dark accents within the first hour.
- Animation overkill: We added AOS scroll animations on top of GSAP. It broke — elements stayed invisible. Ripped out AOS, toned GSAP down to subtle fade-ups.
- Mobile menu bugs: Three rounds of fixes. Z-index issues, display conflicts, dropdown toggle logic. Mobile is always the hardest part.
- Image strategy: Started with AI-generated illustrations. They looked generic. Switched to real screenshots, Lucide icons, and WordPress CDN WebP images.
- Jargon creep: First drafts had words like "headless architecture" and "SSG deployment" on the public site. Had to rewrite everything in normal language.
Thinking about migrating your WordPress site?
We've done it. We know every pitfall. Free 30-minute consultation — we'll tell you if headless makes sense for your business, or if a simpler fix is better.
The full toolchain (everything we used)
This wasn't just "install Astro and go". Here's every tool in the stack, what it does, and a link so you can explore it yourself.
| Tool | Category | What it does | Link |
|---|---|---|---|
| Astro | Framework | Static site generator. Builds HTML at build time, ships zero JS by default. | astro.build |
| WordPress | CMS | Headless backend. Stores blog posts, projects, testimonials. | wordpress.org |
| WPGraphQL | API | Exposes WordPress content as a GraphQL API. The bridge to Astro. | wpgraphql.com |
| WP-CLI | Migration | Command-line WordPress. Bulk export posts, clean databases, migrate content. | wp-cli.org |
| Coolify | Hosting | Self-hosted PaaS. Docker builds, SSL, zero platform fees. | coolify.io |
| Docker + nginx | Deployment | Container with nginx serving static files. Deploy in minutes. | docker.com |
| Traefik | Routing | Reverse proxy for SSL and routing. Coolify manages it automatically. | traefik.io |
| GSAP | Animation | Scroll animations. Fade-ups and hover effects only — we learned less is more. | gsap.com |
| Lucide Icons | UI | Inline SVG icons. Hand-placed, CSS animated. No icon font bloat. | lucide.dev |
| Claude Code | AI Dev | AI pair programmer. Full conversations, not just autocomplete. Every commit was a collab. | claude.ai |
| MCP Servers | Automation | Model Context Protocol. Filesystem, Playwright, GitHub — all connected to Claude Code. | modelcontextprotocol.io |
| Firecrawl | Scraping | Web scraper via MCP. Pulled real content from client sites for project descriptions. | firecrawl.dev |
| Playwright | Automation | Headless browser. Auto-captured 50+ portfolio screenshots in one script. | playwright.dev |
| Bun | Runtime | JavaScript runtime and package manager. Faster than npm. | bun.sh |
| UploadThing | Assets | CDN upload for new assets (video thumbnails, case study images). | uploadthing.com |
The AI workflow that made 2 days possible
Let's be honest: building a 25+ page website in 2 days isn't normal. The only reason it worked is because we used Claude Code as a real development partner — not just a code autocomplete.
Screenshots via MCP + Playwright
Claude Code used the Playwright MCP server to open each client URL in a headless browser, screenshot it, crop, convert to WebP, and save to the right directory. 50+ sites, fully automated.
Content via Firecrawl
For project pages, Claude Code scraped each client website using Firecrawl to understand what the business does. Then it wrote accurate descriptions based on real content — not hallucinated copy.
Migration via WP-CLI
Old blog posts from the Elementor site were exported using WP-CLI, cleaned up, and re-imported into the headless WordPress instance. Categories, tags, featured images — all preserved.
Git discipline
53 commits in 2 days. Every meaningful change committed with a clear message. If something broke, instant rollback. Claude Code suggested commits at natural breakpoints.
53 commits in 2 days
Every change was a commit. Here are highlights from the git log:
582eb38 Initial Astro + headless WordPress setup 615d26f Add GraphQL, custom post types, and ACF field support 0c83b5b Complete redesign: industrial brutalist aesthetic with real data eca618f Lighten design: mostly light with subtle dark accent a0de754 Story-driven homepage: problem → solution → services flow 74e0e88 Add Dockerfile + nginx for Coolify deployment 3083fae Phase 1: Full homepage rewrite with story flow a60a385 Fix: remove AOS (caused invisible elements), tone down GSAP 46dc3a2 Portfolio grid with 50 real screenshots b32a321 All 6 service pages + rebuilt services index b2eed2f About page rebuild + case studies + breadcrumb + 404 6113606 Full site consistency review: spacing, icons, content depth Would we do it again?
Absolutely. And we already are — for clients.
If you're running a WordPress + Elementor site and it's slow, bloated, or hard to manage — this is a real option. You keep WordPress for content. You get a lightning-fast frontend. Your SEO improves. Your visitors get a better experience.
This isn't a theoretical pitch. We did it ourselves, on our own production site, in 2 days. We know exactly what's involved, what breaks, and how to fix it.
Is this right for your business?
Good fit if:
- Your Elementor site scores under 60 on PageSpeed
- You're paying too much for slow shared hosting
- You want SEO improvements without rewriting all content
- Your team already uses WordPress for content
- You have 10-50+ pages and need them fast
Maybe not if:
- You need real-time dynamic features (user accounts, dashboards)
- Your site is already scoring 90+ and loads fast
- You're happy with Elementor and don't need more speed
- You have complex WooCommerce with 500+ products
Ready to go headless?
We offer WordPress-to-Astro migration as a service. Keep your content in WordPress, get a fast modern frontend. We've done it — let us do it for you.
Or explore our web design services and case studies to see more of our work.