Three Ways to Migrate Your WordPress Site

I started web development back in 2012 using the WordPress platform, and while it really breaks my heart to see Matt Mullenweg canabalize such an incredible piece of software it is his right to burn the house down. That doesn't mean that you have to stand in the burning houses and die with it. Locate the front or the back door and get the fuck out of there. As software developers, we have the knowledge, experience, and the abilities to migrate a project away from this childishness. I am going to go over a few options that you can use to migrate away from WP.

Squarespace

I know that the WordPress community is not dominated by developers specifically. Squarespace is great for those without the technical knowledge to develop their own websites and plugins. While a bit manual in nature, you don't have to write a single line of code or have much technical knowledge. You will still need to have some knowledge of things like SEO, Web Accessibility, and Content Creation to make something that really grabs people's attention.

11ty (Eleventy)

Eleventy is a static site generation tool that can use the JAMstack (JavaScript, APIs, and Markdown) to serialize content into the static HTML files. This makes it very easy to migrate away in phases, but also requires a little bit of technical knowledge to execute. This option is best for those that know how to build websites and don't want to spend a lot of time and energy migrating that particular website content.

Migrating Your Frontend

Migrating your frontend code is easy as a developer. Eleventy uses nunjucks with liquid templating to create a layout based frontend that allows for some great customization. You just need to move your page types into their own templates (posts, post, page, etc).

Migrating Your Backend

Migrating your posts is going to take a bit more time. A great stop-gap for migrating your backend is to use the code below to pull your posts into your static site from WordPress when you build your site. Just make sure you change the wpUrl variable to point to your wordpress website's URL. Meanwhile you can figure out a more permanant migration to another CMS or Markdown files.

import { eleventyConfig } from '@11ty/eleventy';

const config = eleventyConfig();

async function getPosts() {
  const wpUrl = 'https://your-wordpress-site.com/wp-json';
  const response = await fetch(`${wpUrl}/posts?_embed&per_page=100`);
  return response.data;
}

eleventyConfig.addFilter('post', async (context) => {
  const posts = await getPosts();

  return posts.map((post) => ({
    title: post.title.rendered,
    date: new Date(post.date).toISOString(),
    content: post.content.rendered,
  }));
});

The code above uses the eleventyConfig.addFilter() function to add the data that was fetched from your WordPress backend and adds it to the data you display in your layout files.

Sveltekit

I saved the most technical option for last. Developing a Custom App will require the most technical knowledge, but it can be done with some patience. I highly recommend Sveltekit for this type of application. It has a lot of great features for content heavy websites due to how composable it is compared to React, allowing multiple slot child components. The WordPress headless API supports serving HTML content which also favors Svelte. Svelte has first-class support for inlining HTML content with the @html directive. This method is similar to the Eleventy migration method where you can migrate your frontend first and then your backend later. Using the WordPress headless API as a stop-gap between those bodies of work to be efficient with our time and planning.