Migrating from WordPress to Nuxt

I recently rebuilt my website—yes, the one you're currently reading—from WordPress to Nuxt. It's been about 5 years since the first version of this site was launched, so I think it's had a good run.

Here's the old site, and you're currently reading this on the new site. Let me know what you think!

Why the Change?

Before I go into the details of how I migrated from WordPress to Nuxt, it's fair to share my reasons.

1. Workflows

While it's relatively easy to set up a WordPress site, it doesn't really align with my workflow. As a predominantly backend developer, I push a lot of code to GitHub, trigger deployments via code, and prefer a bit more control. With Nuxt, I can basically write my articles in Markdown, commit, push, and be done. It's that simple.

2. Site Speed

One of the main reasons for the migration is site speed. Nuxt allows for server-side rendering and static site generation, which can significantly improve the loading times of the site. Over the years, I noticed that my WordPress site was becoming slower, even though my site has minimal content. The overhead of PHP processing, database queries, and WordPress core just wasn't worth it for a simple blog.

3. Keep It Simple

I wanted to keep my site simple and lightweight. WordPress is a powerful CMS, but it can also be bloated with unnecessary features and plugins that I don't use. For example, most of my site content is just text and images—I don't need complex features like comments, user accounts, or e-commerce functionality. Nuxt allows me to create a site that's fast and efficient without the overhead of a full CMS.

4. Reduced Attack Surface

By moving to Nuxt, I've reduced the attack surface of my website significantly. WordPress is a popular target for hackers due to its widespread use and the potential vulnerabilities in its plugins and themes. With Nuxt, I eliminate the need for a database and PHP backend, making it much harder for attackers to exploit any weaknesses. Even with server-side rendering, the attack vectors are far fewer compared to a traditional WordPress installation.

So it was finally time to make the switch. But how did I make the migration from WordPress to Nuxt?

How to Migrate Your WordPress Site to Nuxt

I won't go into details of setting up your Nuxt project, as there are plenty of excellent resources available online for that. Instead, let me walk you through the actual migration process.

1. Export Your Content

The first step in migrating from WordPress to Nuxt is to export your content. I used the built-in WordPress export tool to generate an XML file of all my content—posts, pages, media, and more. You can find this under Tools > Export in your WordPress admin panel. This gives you an XML file containing your entire site's content.

2. Set Up Your Nuxt Project

Next, you'll need to set up a new Nuxt project. To speed things up and also to have a nice UI out of the box, I used the Nuxt UI Pro package. This allowed me to quickly scaffold out the necessary components and layouts for my site without having to build everything from scratch.

3. Convert to Markdown

After exporting your content, you'll need to convert it into a format that Nuxt can work with. I chose to use Markdown for my blog posts, as it allows for easy formatting and is widely supported by static site generators.

Here, I found the wordpress-export-to-markdown package, which helped automate the conversion process. It did most of the heavy lifting, creating individual Markdown files for each post and page in my WordPress site. The tool also handles image downloads and converts WordPress-specific shortcodes to standard Markdown.

4. Publish with the Nuxt Content Module

The Nuxt Content Module is a powerful tool for working with Markdown files in Nuxt. It provides a simple way to fetch and display your content, as well as support for features like pagination, search, and syntax highlighting. Since I already had my articles as Markdown files, all I had to do was copy them to a folder within my Nuxt project, and the Content Module took care of the rest.

The Content Module also supports frontmatter, which means you can add metadata like titles, descriptions, and publication dates directly to your Markdown files.

Read more about the Nuxt Content Module here.

Important Considerations

SEO Maintenance

I already had a good SEO setup on my WordPress site, so I needed to ensure that my new Nuxt site maintained or improved upon that. This involved several key steps:

• Setting up proper meta tags for each page and article
• Ensuring that I maintained the same URL structure to avoid breaking existing links
• Implementing 301 redirects where necessary for any URLs that had to change
• Having a proper sitemap and robots.txt file in place
• Configuring Open Graph and Twitter Card metadata for social sharing

Nuxt makes this relatively straightforward with its built-in SEO features and the ability to define meta tags programmatically.

Analytics Setup

I also wanted to make sure that my analytics tracking was properly set up on the new site. This meant integrating Google Analytics and any other tracking tools I was using, and verifying that they were working correctly. Nuxt has excellent support for analytics integration through modules and plugins.

Performance Optimisation

One of the biggest advantages of moving to Nuxt was the performance improvement. However, there were still optimisations to consider:

• Image optimisation and lazy loading
• Minimising JavaScript bundle sizes
• Implementing proper caching strategies
• Optimising fonts and CSS delivery

What's Next?

Tag Management

One important aspect of my WordPress site was the use of tags to organise content. I needed to ensure that my new Nuxt site has a similar tagging system in place. I haven't yet fully implemented this, as I'm still exploring the best way to handle tags within the Nuxt Content Module framework. The good news is that the Content Module supports categories and tags through frontmatter, so it's just a matter of implementing the filtering and display logic.

Enhanced Features

Moving forward, I'm excited about the possibilities that Nuxt opens up. I can now easily implement features like:

• Advanced search functionality
• Dark/light mode toggles
• Progressive Web App features
• Better mobile experience
• Enhanced performance monitoring

Final Thoughts

That's it! My WordPress site has been successfully migrated to Nuxt, and I'm excited to take advantage of the benefits that come with this modern framework. The development experience is great, the performance improvements are noticeable, and the peace of mind from reduced security concerns is invaluable.

If you're considering a similar migration, I hope this guide has been helpful in outlining the key steps and considerations involved. While there's definitely some work involved in the migration process, the long-term benefits make it worthwhile, especially if you're comfortable with modern development workflows.