DEV Community

Cover image for Migrating a WordPress Blog with Claude Code
Isaac Lee
Isaac Lee

Posted on • Originally published at crunchingnumbers.live

Migrating a WordPress Blog with Claude Code

#llm #nextjs

With the help of Claude Code, I finished a task that I had pushed aside for years in two days: To move away from WordPress for my blog.

1. Background

WordPress had served well between 2016 and 2019, when I was still learning how to write apps with a framework like Ember. Over time, however, the annual cost of $48 (plus $28 for the domain, excluding taxes) felt overpriced, given the lack of features (e.g. no syntax highlighting for *.{gjs,gts}) and many paywalls for customization.

Reposting a blog post on dev.to was also tedious, since I need to write the content on WordPress using a proprietary, interactive editor, while in Markdown on dev.to. I would copy the output text from WordPress, then convert the output to Markdown.

I finally had enough when WordPress broke the styles for code blocks again: Once after I had migrated from the classic editor to the current one, and the second time recently while playing with the admin dashboard.

2. Move to Next.js

I decided to rebuild my blog in Next.js, a framework suited for blogs and in demand. The app is to be deployed on Netlify, and the domain stays with WordPress through a DNS configuration. I saw the opportunity to use Claude Code for the first time, as I had little experience with Next.js and wanted to see how far I can get with unknown technologies in two days.

Thanks to prior experience in blogging on different platforms, I had a good idea of how to store blog content and metadata (front matter) in a Markdown file and what users should be able to do when they visit my blog. I also studied the current URLs so that (1) I can tell Claude how to structure the project in Next.js and (2) URLs won't be broken after the migration.

Elements that I want to keep are highlighted in green.

What I knew would take the most time and delegated to Claude Code:

  • Create components and routes to provide a similar functionality.
  • Generate Markdown files for blog posts that I didn't repost on dev.to. Many of these were related to math and engineering and included LaTeX in inline and block forms. LaTeX also needed to be converted to KaTeX.
  • Configure remark and rehype so that Markdown is correctly transformed into HTML for all existing blog posts (over 70).
  • Standardize indentations in code blocks to 2 spaces. Convert WordPress' syntax for specifying the language and which lines to highlight.
  • Extract the timestamps of last modification from WordPress' sitemap and append the timestamp to the front matter, so that Next.js can create the sitemap instead. If a blog post is missing from WordPress' sitemap (published on dev.to only), use the current timestamp to fill the front matter.

Sitemap from WordPress.

I found the experience with Claude Code to be overall positive. What impressed me the most was, how Claude visited the URLs that I had provided and did its thing to create Markdown files:

Please convert the blog posts from the following sites into Markdown files in the folder /content/posts.

These blog posts contain LaTeX code in inline and block forms. The blog project uses rehype-katex (uses the delimiter $$) to render such code.

For an example, refer to https://crunchingnumbers.live/2019/07/07/topics-in-computational-mechanics-part-4/ and the corresponding Markdown file /content/posts/topics-in-computational-mechanics-part-4.md.

However, we must note that most of my tasks involved migration. In other words, the approximate solution was already close to the correct one. In addition, Claude Code had many correct examples of Markdown files (training data) needed for "thinking," since I already had 32 blog posts in Markdown on dev.to. Claude struggled more when it had to create things like components, routes, and utilities, sometimes taking 20 minutes on an M5 Pro and often writing more code than necessary.

3. What Next? (pun intended)

I was quite happy with finishing the migration in two days and saving $48/year from now on. (Perfect time to plug in my GitHub Sponsors page.)

Other than writing tests and refactoring utilities to ease maintenance, the remaining tasks are of low priority. Things like providing a search (or some way to quickly find blog posts by title), allowing a few types of images as input while creating WebP in dist as output, exploring configuration options in Next.js, and improving the look of code in KaTeX. I expect to work on these in the upcoming weeks.

Top comments (0)