Building a Modern Ham Radio Blog with Headless WordPress

(I asked Claude (the AI that built my blog site) to write a blog post about our blog building project. He went ahead and wrote it as if I were going to post it as my own words. I give him credit for this one.)

As ham radio operators, we’re naturally curious about technology and how things work. Many of us maintain blogs to share our experiences, projects, and knowledge with the community. But traditional blogging platforms can sometimes feel limiting when we want more control over how our content is presented and accessed.

That’s why I recently rebuilt my ham radio blog (WA1X) using what’s called a “headless CMS” approach. In this article, I’ll explain what this means, why I chose this architecture, and how it benefits our ham radio content.

What is a Headless CMS?

In traditional content management systems like WordPress, the backend (where you create your content) and the frontend (what visitors see) are tightly coupled together. A “headless” approach separates these two concerns:

• The Head: WordPress continues to serve as the backend where you create and manage your content.
• Headless: The frontend is completely separate, built using modern web technologies.

This separation provides greater flexibility, faster performance, and a better user experience.

Why I Rebuilt My Ham Radio Blog

Like many hams, I’ve been using WordPress for years to share station updates, antenna projects, and DX reports. It worked adequately, but I wanted:

1. Faster page loads: Critical for mobile users checking propagation reports or when someone’s looking up information during a contest or field day.
2. Better mobile experience: Many hams access blogs from their phones while in the field or at hamfests.
3. Customized organization: The ability to structure content specifically for ham radio topics (categorizing by bands, modes, equipment reviews, etc.).
4. Multiple related blogs: I wanted to host both my ham radio blog (WA1X) and a science blog (“The Apple and the Finch”) under the same system, with appropriate theming for each.

The Technical Architecture (Simplified)

Here’s how the system works in plain language:

1. Content Creation: I still use the familiar WordPress editor to write posts, upload images, categorize content, and manage comments.
2. Content Storage: WordPress stores all this information in its database.
3. Content Delivery: Instead of using WordPress themes to display content, a separate React application fetches the content using WordPress’s built-in API (Application Programming Interface).
4. User Experience: Visitors interact with the React application, which provides a faster, more responsive experience than traditional WordPress themes.

Think of it like this: WordPress becomes your “content database and management system,” while React becomes the “display and interaction layer” that visitors actually see and use.

Benefits for Ham Radio Content

This architecture offers several advantages specifically for ham radio blogs:

1. Better Organization of Technical Content

Ham radio involves many specialized categories: different bands, modes, equipment reviews, antenna projects, contests, digital modes, etc. With this setup, I’ve implemented:

• Hierarchical categories (e.g., “Antennas” → “HF” → “Wire Antennas”)
• A tag cloud that highlights popular topics
• Custom displays for equipment reviews vs. operating reports

2. Faster Access to Information

When you’re in the middle of a contest or troubleshooting an antenna, you want information quickly. This system offers:

• Near-instant page transitions after the initial load
• Optimized images that load progressively
• Content that’s available even with spotty internet connections

3. Mobile-Friendly for Field Operations

Many of us reference blogs while working in the field. This system provides:

• A responsive sidebar that collapses on mobile devices
• Touch-friendly navigation
• Reduced data usage compared to traditional WordPress

4. Easier Embedding of Technical Content

Ham radio blogs often include:

• Diagrams of antenna setups
• Propagation charts
• Equipment specifications
• Code snippets for digital modes or Arduino projects

All of these are easier to format and display with this modern frontend approach.

How You Can Try This Yourself

If you’re interested in a similar setup for your own ham radio blog, here are the key components:

1. WordPress: Continue using WordPress for content creation. Install the necessary plugins to enable the REST API.
2. React Frontend: This is the modern web application that displays your content. You don’t need to be a programmer to use a pre-built solution.
3. Hosting: WordPress remains on your hosting provider, while the React frontend can be hosted on services like Vercel, Netlify, or GitHub Pages—many with generous free tiers.

For the technically curious, the system uses:

• Material UI for the interface components
• React Router for navigation
• A responsive design that works well on everything from smartphones to desktop computers

Conclusion

While this approach requires some initial technical setup, the benefits for a ham radio blog are substantial. Content loads faster, the mobile experience is better, and you have more control over how your technical content is organized and presented.

Many hams enjoy customizing and optimizing their radio setups—this is simply extending that same spirit to how we share our radio experiences online. After all, isn’t experimentation what amateur radio is all about?

73, Claude.AI (written for WA1X)

---

Have you tried modernizing your ham radio website or blog? What challenges did you face? Share your experiences in the comments below.

A while ago I decided I would put up a blog to write about my ham radio involvement. Being a technical blog, I wanted a classic blog layout without a lot of glitz and fanfare. I tried using WordPress but found it had grown into a monster trying to be all things to all people. Being a systems programmer, I thought I might build my own simple blogging system.

The backend and database part was well within my wheelhouse. However, I have little experience with the programming and styling technology used in websites. I thought I had the perfect solution when I started a project at work in Microsoft’s Blazor, which uses the same technology in the front and back end. But it was too clunky and still requires a lot of styling expertise.

Recently, I hit on the perfect solution while experimenting with using AI to do some routine programming for me on my work projects. As I became more familiar with how to get the best work out of AI, I decided to have the AI write the entire front end of the website, including the styling. I call this an alien encounter because these AI systems are spookily brilliant but not human. You interact with them in the kind of conversational English you would use with a knowledgable colleague. But they are alien enough that you have to learn how to work with them to keep them on task and give you accurate and useful results

I set up what is called a Headless WordPress on a hosting facility. It’s called Headless because all it does is maintain the database of all your content and has the logic to serve it across the Internet to some other site via an API. (I will explain the concent in a subsequent post).

Then I hired Claude to be my $20/month hotshot front end programmer. Claude is the AI system offered by Anthropic. I had long exploratory conversations with Claude on what technologies he would use and where he would get his styling. It was so compelling that I decided to take the leap and have Claude develop the entire front end in the latest web programming technology for which I have only a passing understanding. I was to produce no code at all.

The end result is what you see now. Through a series of “chats” with Claude, we built up an extremely high quality attractive blog front end. It is a React client written in Typescript using a set of components and styling called Material UI. It is fully responsive (meaning it folds up nicely when you use a tablet or a cell phone).