Building a Personal Website: The Complete Series

This is the index for a series of posts documenting how this website was built: from the first architecture decision to automated deployments in production. Each post covers one piece of the stack, written as the work happened rather than in retrospect.

The series is organised into five parts that follow the natural order of building a production-ready application: laying the foundation, modeling the content, optimising for performance, adding observability, and finally automating deployments. You can read from the beginning or jump to whichever topic is most relevant to what you are building.

Every architectural decision made at the start of a project shapes everything that comes after. This part covers the why before the how: why build a custom CMS-powered site rather than using an existing platform, why decouple the frontend from the backend, and what that actually means in practice with Wagtail and Next.js.

These posts are tool-agnostic where possible. The goal is to give you enough context to understand the decisions before diving into the implementation details in later parts.

The most technically dense part of the series. Content modeling is where the two sides of a decoupled architecture - the CMS and the frontend - have to agree on a shared language. These posts cover how to design content types in Wagtail's StreamField, how the API serializes those blocks into JSON, and how Next.js consumes that JSON to render fully interactive pages.

The progression is deliberate: start with the data model, follow it through the API, and trace it all the way to the browser. By the end of this part you should have a clear picture of how a piece of content goes from a Wagtail editor to a rendered page component.

A site that works is not the same as a site that performs. This part covers the decisions that make a decoupled application fast and cost-effective to run: how to cache content intelligently across a headless architecture, how to reduce the JavaScript bundle size that ships to the browser, and how to think about deployment geography when the frontend and backend live on separate services.

These posts sit at the intersection of architecture and operations, decisions that look invisible when they go right and are painful to fix when they go wrong.

Flying blind in production is a risk that compounds over time. This part covers how to build a structured logging system for both sides of a decoupled stack: why the Next.js server and client need fundamentally different approaches, how to implement queue-based structured logging in Wagtail without affecting request latency, and how to use BetterStack to turn raw log data into actionable alerts.

The goal is not just to collect logs, but to know what to look for and to be notified automatically when something goes wrong before users tell you.

The final piece of a production-ready stack is automating the path from code to deployment. This part covers CI/CD from concept to concrete implementation: what continuous integration and continuous deployment actually mean, why the automation matters more for solo projects than large teams, and how GitHub, Vercel, and Render work together to take a commit from a laptop to a live deployment in two to four minutes.

Each of the two services in this stack, the Next.js frontend and the Wagtail backend, lives in its own repository and deploys independently. A change to one has no effect on the other.

The series covers the complete lifecycle of a decoupled CMS-powered website — from the first architecture decision to a fully automated deployment pipeline. Eighteen posts, five parts, one stack.

The series is not closed. Future posts will document improvements, new directions, and lessons from running the site in production. Each new addition will be listed here.

Questions about the series or the stack? Reach out via the contact form or connect on LinkedIn!

Building a Personal Website: The Complete Series

Part 1 - Foundation

Part 2 - Content Modeling

Part 3 - Performance and Delivery

Part 4 - Observability

Part 5 — CI/CD

Conclusions

Building a Personal Website: The Complete Series

Part 1 - Foundation

Part 2 - Content Modeling

Part 3 - Performance and Delivery

Part 4 - Observability

Part 5 — CI/CD

Conclusions