Website Update: From WordPress Blocks to Full-Stack Flexibility

Overview

This website has been updated, migrating from a standard WordPress site using a block theme to a headless architecture. The former site was suitable for simple pages, products, and blog posts, but as needs grew more complex, it hit clear limitations. So I rebuilt the site from scratch.

This new version uses a modern front-end framework and automated deployment for enhanced flexibility, performance, and scalability. If that sounds complicated, I assure you it is. This site update was not easy to build, but AI tools helped me through the rough parts to develop and launch it. This post will walk through the site updates, what changed, why, and what to expect.

Development Process

Rebuilding this site was a complete rethinking of how I wanted to manage content, design, performance, and workflows. I originally started with a standard WordPress setup, but the more I tried to customize it, the more obvious it became that the system was working against me.

Why I Rebuilt The Site

WordPress has shifted toward a more visual, WYSIWYG-style editing experience with the introduction of the block editor and site editor. In theory, that makes it more accessible. In practice, it created constant headaches.

The editor tools felt fragile, half-finished, and unpredictable. I kept needing to install yet another plugin for basic features, such as creating a table of contents or building out navigation menus that didn’t suck. Maintaining child themes, making plugin workarounds, and manually fixing deploy issues started to feel like more of a fight than a workflow. I knew I wanted something more modular and predictable.

When I finished building and shipping the Boxing Timer Champ iOS app, I realized I was comfortable enough with the tools and development process to take on a full-site rebuild.

What started as a side project evolved into a comprehensive re-architecture of how this site operates, from content and layout to speed and developer workflow. While it was a massive effort, the end result is something that’s easier to manage, faster to load, and way more flexible.

Laying the Foundation with AI and Windsurf

I began by outlining the project requirements, including what features I needed, the tools I wanted to use, and what my ideal outcome would look like. I knew I wanted to use a headless WordPress setup to manage content, but I also wanted to avoid its main drawbacks.

I formalized my notes into a PRD (Product Requirements Document) and fed it to an AI model in Windsurf to begin scaffolding the project.

Iterative Design with AI Assistance

The early builds were basic. From there, the process was iterative and messy, as all real development is. I took screenshots of the old site and asked AI to recreate equivalent layouts. The agent often provided me with solid starting points that were definitely workable.

Then I debugged. Then I redesigned. Then I broke something. Then I fixed it. Then I broke something else. Then I screamed into the void of my choice. Then it worked. The cycle continues.

I heavily rely on Git and version control to maintain stability and sanity. This is crucial when working with AI, as it tends to produce unintended consequences, causing new or otherwise avoidable errors. This piece-by-piece process keeps the project securely iterative, allowing me to make significant changes using AI without worrying about destructive edits.

Building Locally, Deploying Smart

Most development occurs in a local environment. I run WordPress on a subdomain and proxy API requests during development, allowing me to iterate quickly without depending on the live server or worrying about live changes.

Once the core structure was solid, I deployed it to Netlify and ran everything in a staging environment. This gave me space to test DNS, SEO behavior, and overall functionality before flipping the switch to make the site live.

The SEO Cleanup Gauntlet

After going live, the work didn’t stop. I’ve been crawling the site with tools like Screaming Frog and Ahrefs to track down and fix every redirect loop, meta conflict, broken link, or other SEO issue that slipped through.

The architecture makes these fixes easier to implement, but it’s still a lot. Some problems are inherited from old content. Others are the result of introducing modern systems over legacy data. Regardless, I’m able to use AI to help me analyze, diagnose, and resolve issues just by sending spreadsheet exports and screenshots. This rapidly improves site maintenance and ensures it can reach its SEO potential.

Not for the Unresilient

This project was a pain. While I stand by the benefits of this build, I wouldn’t recommend it lightly. You need to be resilient or have serious web development experience to pull this off.

AI played a significant role, and numerous powerful tools accelerated the build process, making it faster, smarter, and less repetitive. But this setup is still complex. APIs break. Components need debugging. New headaches arise daily. The work is ongoing.

Technologies Used

This section outlines the primary technologies underlying the site update. It includes the tools used for the frontend, how content is managed and delivered, and what makes the site function.

Front-End Framework

• Astro – This is the framework used for the front of the site. Astro is great at generating static pages, which means most pages load quickly with no unnecessary scripts. When something interactive is needed, like with a search bar or form, Astro loads that part using an “island architecture” approach. This results in fast, lightweight, and efficient pages.
• React – React powers interactive elements on the site, like search and dynamic forms. It’s a popular JavaScript library used by companies such as Netflix and Airbnb. For this project, it is used only when needed to get selected interactivity without the usual bloat.
• Tailwind CSS – Tailwind is a CSS framework that speeds up styling by using utility classes in HTML. In most instances, I can design and adjust layouts from the relevant file, without having to switch to a stylesheet or create foundational classes. This helps with faster development, page responsiveness, and consistent design.
• TypeScript – This is JavaScript with rules, making the code more predictable and easier to maintain. It makes the site safer, easier to update, and more reliable.

Content Layer

• Headless WordPress – Most WordPress sites render pages directly, but headless WP sites mostly use it as a content database. All blog posts, product data, and pages are pulled from the REST API on a separate subdomain. This allows for the flexibility of WordPress, while offering the speed and design freedom of a modern frontend. See the pros and cons section below for more on this approach.
• Advanced Custom Fields (ACF) – A WordPress plugin that extends page and content customization. This is useful for creating more robust product metadata, custom templates, and structured fields for SEO benefits. For example, in the shop, I can add custom links and provide purchase options from popular platforms, such as Gumroad and Notion Marketplace.
• Yoast SEO – A popular SEO plugin used to manage metadata and improve search engine visibility. While not used nearly as much in a headless WP site, the plugin still manages page titles, meta descriptions, and other front-end aspects of the site.

Deployment

The site runs on a distributed stack that balances modern developer tools with practical hosting solutions:

• Netlify – Handles hosting and continuous deployment for the frontend. When I push code to Git, Netlify automatically builds and deploys the site. I also use Netlify Functions to support server-side rendering (SSR) when needed. For example, it handles dynamic content, such as real-time search, without compromising performance.
• Cloudways – Manages the WordPress backend. I run a headless WordPress install on a subdomain to serve as the content management system (CMS). This allows me to manage PHP, databases, and plugin updates without needing to configure a server. It also offers SFTP access and staging environments when needed.
• Cloudflare – I use this primarily for DNS management since I bought the domain through their registrar (it was cheaper than most). While I’m not currently using their CDN or WAF features, this DNS setup makes it easy to manage routing and SSL for multiple services.

This combination of Netlify for the frontend, Cloudways for content, and Cloudflare for DNS gives me control over each layer of the stack. It also keeps things modular, allowing me to troubleshoot and upgrade individual services without affecting the entire system.

Tooling & Libraries

• Windsurf – My AI-assisted IDE of choice, used as the primary development tool. Allows me to vibe code edits to the site and assists with manual edits when needed. Windsurf is in rapid development and released many helpful features while I was working on the site.
• Github Desktop – For managing version control, ensuring stability, backups, and maintaining general sanity when coding with AI. While I could manage Git commands in Windsurf (or most IDEs), I prefer working with a more visual interface to help understand file statuses and commits without having to remember dozens of commands.
• Vite – A next-gen bundler built into Astro. Vites translates and bundles files quickly, keeping the development process fast, even as the site grows.
• Algolia – This powers the search box and functionality. Algolia allows you to host your own search engine and customize the relevance of search results. It’s free to start with and powerful enough to run the search experience for sites like Twitch, Stripe, and Medium.
• Font Awesome – A rich library of free icons that are easy to implement and perform well. Used for various visual elements across the site, especially with branded elements.
• Heroicons – A free set of high-quality SVG icons designed by the creators of Tailwind. These icons integrate with the Tailwind ecosystem and can be dropped directly into components as inline SVGs, resulting in outstanding page load performance.
• New Relic – Used for monitoring server and frontend performance. New Relic helps track uptime, page load speeds, API call behavior, and overall system health, all with powerful real-time dashboards. This has been essential for debugging server issues and preventing performance regressions.

Pros & Cons of a Headless WordPress Site

Building a headless WP site with this level of customization comes with both major advantages and tradeoffs. Below is a breakdown of the benefits and drawbacks. If you’re considering a similar approach for a website, this gives a realistic look at what to expect.

Pros

---

Full Control Over the Tech Stack

I have complete control over how the site is built, styled, and deployed. Everything, from CSS and JavaScript to build tools, is managed within my development environment. I don’t have to deal with fragile block themes or restrictive frameworks.

No More Theme-Based Plugin Overhead

Traditional WordPress development often requires maintaining child themes, writing custom plugins, and using SFTP tools like FileZilla to manage deployments. With this new setup, that entire workflow is replaced with a streamlined, version-controlled process.

Minimal WordPress Maintenance

WordPress is still running the backend, but only minimally. I’ve rarely had to make changes after configuring form and email functionality. This means no more risky file pushes or fiddling with consistent plugin conflicts.

CMS Functionality Without Design Lock-In

I can use the full power of WordPress as a content management system to help with writing posts, structuring metadata, and managing categories, without relying on its limited design capabilities. Using WP also means that posts don’t need to be manually written in HTML, and the content backend is already built and fully featured.

Design Flexibility and Better Customization

The frontend stack allows full control over design and layout. This has been especially useful for customizing product pages, where WooCommerce’s default templates are bland and rigid. I can also directly use AI to design and build first drafts of pages, often resulting in interesting variations I wouldn’t have created otherwise.

Built for Product and Content Expansion

This development architecture makes it easier to add features over time. I plan to expand the shop, add additional features, optimize performance, and improve designs. This setup allows me to create custom experiences without relying on legacy layouts or extensive plugins.

Cons

---

High Complexity

This is a complicated system to build and maintain. It includes multiple APIs, services, and custom logic, which means more things can and do break. It took significant time and effort to get the minimum viable product working smoothly. I would say most solo developers should expect a project timeline of about two months, with many unexpected headaches along the way.

Fragile API Integrations

Much of the site relies on API calls, such as the WordPress REST API and WooCommerce endpoints, which can be easily disrupted if changes occur on the backend. Managing this requires caution and frequent testing.

AI Requires Manual Oversight

While AI aids in speed and automation, it still requires human input. Generated code often requires correction, refactoring, or debugging, and even minor changes can have unexpected ripple effects across the project.

Due to the system’s complexity and tendency to break when edited, I’m building test-driven development systems. This adds overhead, but it’s necessary to ensure long-term stability.

Server and Site Performance

There are still unresolved issues with server response and performance. It’s not yet clear whether these issues are caused by the frontend build, backend queries, or hosting configuration, but it remains an ongoing area of focus.

Going Forward

This site currently represents the minimum viable version. It’s live, functional, and already a significant improvement over the old setup, but it’s not yet great. There are still occasional server errors, performance issues, and untold bugs I’ve yet to discover. It’s chill.

What’s different is that I’ve built a new foundation with greater potential for expansion. I’ll be using AI agents to handle many of the more complex technical fixes and optimization tasks, allowing me to focus on refining the experience and expanding the site’s offerings.

Expect to see:

• Ongoing improvements to site speed, stability, and usability
• New content covering technology, workflows, and tools I genuinely find useful
• More Notion templates and digital products in the shop

This marks the start of something more sustainable and flexible. I’ll keep tweaking, building, and shipping, and we’ll see where it goes from here.