Why I Migrated My Technical Blog from WordPress to Astro

For years, WordPress has been the default choice for personal and technical blogs. But as a Systems Architect, as my content grew, WordPress began to feel like a legacy security and performance burden.

This post covers why I migrated induslevel.com to a static-first Astro framework (blog.induslevel.com), how I reduced hosting costs to exactly $0, and the suite of serverless integrations powering the setup.

---

1. The WordPress Debt vs. $0 Astro Hosting

Dynamic blogs running on dynamic VPS instances with database nodes require constant monthly dynamic hosting costs. Here is the technical debt I migrated away from:

• Security Overhead: Dynamic PHP backends require constant security log audits and patches to prevent dynamic code injection or dynamic scanner attacks.
• Plugin Bloat: Third-party plugins added for basic syntax highlighting, custom CSS themes, or SEO metadata bloated the database and slowed down page speeds.
• Dynamic Database Latency: Database queries for read-heavy blogs introduce latency and increase infrastructure maintenance.

The Astro Solution: $0 Serverless Hosting

• Static Compilation: Astro compiles MDX (Markdown with dynamic components) files into highly optimized, static HTML, CSS, and lightweight JS.
• Cloudflare Pages/Workers: Statically serves files from a global CDN at the edge.
• Scale-Free Hosting: With no server execution or database queries, monthly hosting is exactly $0, requiring zero dynamic server administration.

---

2. PageSpeed Insights: Before & After

Static edge caching delivers dramatic speed gains compared to dynamic servers. I ran PageSpeed Insights audits comparing the old site (www.induslevel.com) to the new site (blog.induslevel.com):

Desktop Audit

Mobile Audit

Key Takeaways:

• LCP dropped by 75%: Desktop headings load instantly.
• TBT dropped by 95%: Mobile main-thread blocking fell from 1.4s to 70ms.
• Semantic HTML: Static compilation elevated SEO and Accessibility scores to near-perfect levels.

PageSpeed Insights Screenshots

Before: Legacy WordPress Performance

After: Astro Static Site Performance

---

3. High-Performance Serverless Integrations

To replicate dynamic WordPress components, I built a serverless, database-free stack:

• Serverless Comments (Giscus): Employs GitHub Discussions as a comment database. Readers write comments that publish straight to a designated public GitHub repository, keeping the blog serverless and cost-free.
• Build-Time Static Search (Pagefind): Pagefind indexes the blog statically during build. When a reader searches, it queries a compressed index folder locally inside their browser for fast matches.
• Turnstile-Secured Contact Form: Statically dispatched Contact Us page utilizing Cloudflare Turnstile to verify client integrity and block spam, bypassing custom backend servers.
• Dynamic Mermaid Diagrams: Dynamic client-side Mermaid diagramming support is natively integrated. It dynamically loads from a global CDN only on posts with diagrams, adjusting configurations for dark/light themes automatically.
• Consent-Aware Google Analytics: Respects Google Consent Mode v2 using a local cookie manager banner, respecting user privacy while collecting essential analytics.
• WhatsApp Messaging Channel: High-conversion WhatsApp links are integrated directly into the Follow CTA blocks of all guides to support direct messaging.
• Brand Theme Selector: Dynamic color selector enables readers to toggle dark/light modes and select various colors (blue, emerald, orange, violet, etc.) dynamically.

---

4. Secure Sandbox Staging Pipeline

A modern development pipeline requires a preview sandbox where drafts can be verified before going live.

graph LR
  subgraph Local Development
    Dev[Dev Machine] -- git push --> GitHub((GitHub Repository))
  end

  subgraph Dev / Sandbox Environment
    GitHub -- GHA Trigger --> Runner[GHA Self-Hosted Runner]
    Runner -- Docker Bake --> Container[Docker Dev Container]
    Tunnel[Cloudflare Tunnel] <--> Container
    Access[Cloudflare Access] <--> Tunnel
  end

  subgraph Production Environment
    GitHub -- Static Build --> CF_Pages[Cloudflare Pages]
  end

  Waqar[Waqar Azeem] -- SSO Login --> Access
  Reader[Public Readers] <--> CF_Pages

• Dockerized Dev Site: Pushing updates to my dev branch triggers a GitHub Actions workflow that builds a Docker container and runs an Astro preview server inside my private local network at dev-blog.induslevel.com.
• Cloudflare Access Tunnel: Traffic is routed via a secure Cloudflare Tunnel to the edge, locked down with Cloudflare Access requiring Single Sign-On (SSO) authentication.

---

5. Content Automation Pipeline via n8n

I integrated my static architecture with a local automation server (n8n) to automate reader content requests:

sequenceDiagram
  actor Reader
  participant ContactPage as Contact Form
  participant Webhook as n8n Webhook
  participant Workflow as n8n Workflow Engine
  participant GitHub as GitHub API
  participant DevBranch as git [dev] branch

  Reader->>ContactPage: Fill Topic & Suggestion
  ContactPage->>Webhook: HTTP POST (Form Data)
  Webhook->>Workflow: Trigger Pipeline
  Workflow->>GitHub: REST API (Create File Request)
  GitHub->>DevBranch: Create draft-topic.mdx Stub
  GitHub-->>Reader: "Request Submitted Successfully!"

1. Reader Submission: A user submits a topic suggestion on the Contact page.
2. Webhook Dispatch: The frontend dispatches a POST request directly to my secure n8n-server.induslevel.com server.
3. GitHub Rest API Action: The n8n workflow calls the GitHub REST API, creates a draft MDX post stub inside src/content/blog/, and opens a draft PR on the dev branch.

---

Pair-Programming with Google Antigravity: From Zero to Enterprise Production

As a Systems Architect, I manage enterprise Linux servers, BIND DNS networks, and Docker environments. However, I had very little prior experience with Astro, React, or MDX.

Rebuilding a custom dynamic website into a static-first framework usually requires weeks of learning and debugging. Instead, I pair-programmed the entire migration with Google Antigravity, an agentic AI coding assistant designed by Google DeepMind.

Working with Antigravity, we:

• Designed dynamic, responsive components.
• Integrated Pagefind search, Giscus comments, and consent-aware script loaders.
• Configured custom theme logic and solved complex Astro build routes.
• Deployed the dynamic client-side Mermaid rendering pipelines.

Having a powerful AI assistant completely eliminated the framework learning curve, enabling me to build a state-of-the-art technical blog in record time.

---

Conclusion

Migrating from WordPress to Astro delivers massive improvements:

• Exactly $0 hosting costs and zero database management.
• 90% faster load times on mobile and perfect PageSpeed scores.
• Native dynamic diagrams via client-side Mermaid and serverless comments via Giscus.
• A secure, containerized Docker dev environment locked down by Cloudflare Access.

Static architecture, backed by Docker, modern CD, and automation platforms like n8n, is the standard for developer sites!