Published on

Converting a Ghost Blog to Next.js and MDX Using Claude AI and JavaScript

Authors
  • avatar
    Name
    Jac Timms
    Twitter

Ghost to Next.js Migration series

This post is part of a series of posts about migrating my blog from Ghost to Next.js:

  1. Converting a Ghost Blog to Next.js and MDX Using Claude AI and JavaScript
  2. Webp Conversion and Markdown Updater Script
  3. Hosting Next.js on Azure

Introduction

Having hosted my blog on Ghost for a number of years (after migrating from Tumblr before that), but not writing much and preferring to use an IDE with AI assistance over using a CMS, I decided to migrate my Ghost blog to Next.js. This transition would allow me to write markdown directly, leverage AI for technical analysis, and use Git for version control. To facilitate this migration, I developed an open-source tool that converts Ghost blog exports to Next.js-compatible MDX files.

The Challenge

Initially, I attempted to use the ghost-to-md tool for the conversion. However, it struggled with the complexity of my blog content. I tried enhancing it with custom string manipulation, but quickly realized that nested string operations become unwieldy and error-prone. This led me to explore AI-assisted conversion as a more robust solution.

Developing the Converter

I created the ghost-to-nextjs-blog-converter using Claude 3.5 Sonnet and ChatGPT o1-mini in Cursor. The tool is designed to:

  1. Parse Ghost export JSON files
  2. Process images and update references
  3. Convert HTML content to MDX format
  4. Generate appropriate frontmatter for Next.js blog posts
  5. Handle code blocks and syntax highlighting

AI Integration

The converter leverages AI services for content processing, with support for both Claude AI and ChatGPT. During development and testing, Claude AI demonstrated superior performance, particularly in adhering to the XML-formatted instructions. This advantage likely stems from Claude's specific training in following XML instructions, whereas GPT models lack this specialized capability.

Overcoming Challenges

One significant hurdle was hitting Claude API usage limits during the conversion process. To address this, I implemented ChatGPT support as an alternative. However, I ultimately completed the entire conversion using Claude, despite the initial limitations.

The Conversion Process

Here's a screenshot of the converter in action:

Screenshot of the Ghost to Next.js converter running in a terminal

The tool processes each post, handling images, converting content, and generating MDX files with appropriate frontmatter. It also implements rate limiting and error handling to manage API constraints and ensure robust operation.

Key Features

  • Converts Ghost blog posts to MDX format
  • Downloads and processes images, updating references
  • Generates Next.js compatible frontmatter
  • Utilizes AI for intelligent content processing
  • Handles code block language detection
  • Implements rate limiting for API calls
  • Provides options for handling missing images
  • Supports both Claude AI and ChatGPT

Conclusion

This project demonstrates the potential of AI-assisted content migration, particularly for complex blog conversions. While the tool was developed for a specific Ghost to Next.js migration, its approach could be adapted for other blogging platforms and static site generators.

For developers interested in similar migrations or AI-assisted content processing, the ghost-to-nextjs-blog-converter is available as an open-source project on GitHub.