How I Migrated from WordPress to Astro

I’ve been working on migrating my blog from WordPress to Astro for the past 3 days (really! ONLY 3 days!), and I’m excited to share the process with you - because it’s done! 🎉

As I sit here waiting for the DNS propagation to complete, I decided to write a quick post on how and why I migrated from WordPress to Astro.

Why I Decided to Migrate

I’ve been using WordPress for my blog for the past 3 years. And I’ve always wanted to migrate from it. 😁 I just didn’t get used to it but it was easy to set up, I didn’t have to build from scratch and got my blog going at the time (yay!). Recently though, I’ve been hearing a lot about Astro, and when my manager did a lunch and learn on how seamless it was to setup a blog with the tool, I got excited.

I also wanted my blog to be faster and more secure. WordPress is great, but it can be slow and vulnerable to attacks (many of which I’ve dealt with). Astro, on the other hand, is a static site generator (SSG) that generates static HTML files during the build and deploy process, which makes it so much more performant.

Old LadyDev-v1 blog

New LadyDev-v2 blog! 😍

Another reason I migrated is because I really enjoying writing blogpost in markdown. It’s simple, easy to use and I can write my posts in my code editor. WordPress has a markdown plugin, but it’s not the same. Astro allows me to write where I build, and I love that.

Astro also allows me to have more control over my blog and customize it to my liking. I can add components, use themes, and have a more flexible site. I can also use my favorite tools like React, Typescript, MDX, Netlify, and other amazing open source tools.

Aesthetics ✨

I also wanted my blog to be more aesthetic. WordPress has a lot of themes, but I never really liked any of them tbh. Astro allows me to use themes as well, and when I found this theme, I knew it was time to start building.

Old LadyDev-v1 blog

New LadyDev-v2 blog! 😍

The Migration Process

The migration process began with me forking and cloning the Astro starter blog. Once I did that, I immediately deployed it to Netlify to get the deployment out of the way. A Key lesson I learned from a good friend of mine is to deploy immediately. It’s easier to debug and fix issues when you deploy early. 💡

Once the repo was deployed, I started working on updating the content. I downloaded all my posts from WordPress to an xml file and used this handy open source project, wordpress-export-to-markdown, to immediately convert my posts to markdown, then copied the markdown files to the src/content/blog directory and updated the frontmatter.

npx wordpress-export-to-markdown

This spits out:

Learning about this script made the process SO MUCH EASIER because I didn’t have to manually convert each post 💃🏼 I also didn’t have a lot of blogposts to port over, so that made it easier as well.

Once that was done, the blog was starting to take shape, I was soo excited! Here are some additional things I added to the blog:

• added a newsletter component,
• custom linktree component,
• added a 404 component,
• a work-with-me component,
• added site analytics,
• integrated Kit (newsletter provider),
• created and updated the favicon
• updated the code block styling
• added a close button to the mobile menu

I also took some time to review SEO related stuff like ensuring that the meta tags were the same and configured url redirects.

URL Redirects

So, since my blog’s been around for 3 years, it’s got some SEO juice. I didn’t want to lose that, so I had to ensure that my URLs were redirected properly. The astro/netlify plugin made this super easy. The final redirects code looked like this in the astro.config.mjs file:

import { defineConfig } from "astro/config";
import netlify from "@astrojs/netlify";

export default defineConfig({
    output:'server',
    adapter: netlify(),
    redirects: {
        "/old-link/": "/new-link",
    }
});

Since I only had a few links to redirect, I added them manually. If you have a lot of links to redirect, you can create a _redirects file in the root of your project and add the redirects there. See more from this blog post by Cassidoo!

Code Block Improvement

I didn’t like how the code blocks looked out of the box, so I used an open source tool called astro-expressive-code to improve how code is displayed and functions on the site. The current theme is ‘material-theme-darker’ but who knows, I may change it in the future. 😄

Old LadyDev-v1 blog codeblock

New LadyDev-v2 with astro-expressive-code

I love that this tool just works and supports syntax highlighting. It’s also easy to customize and use.

Site Analytics

I used Fathom Analytics for site analytics. It’s a privacy-focused analytics tool that doesn’t track personal data. I added the script to the astro.config.mjs file and it was good to go. I did use the partytown integration for lazy loading of the analytics script.

import partytown from "@astrojs/partytown";

# Add the script to the head of the document
<script type="text/partytown" src="analytics-linky"></script>

Google analytics is also connected to my blog - from times when I used to use WordPress. I’ll be removing that soon.

A Note on the Font!

This font is AWESOME! I recently learned that it’s a variable font, which means that the MORF axis makes the glyphs dance! I’m excited to play around with it and see what I can do with it. 😄

Check out the font here.

Deployment 🚀

I previously used Bluehost for hosting which cost me $143.88/year. I’ve now moved to Netlify 💃🏼, which is free! I’m sooooooo excited to save some money and have a faster, more secure site.

let’s hope the build is successful when you see this badge! 🤞🏼

I’m still waiting for the DNS propogation to complete - but there is progress! 🎉 I just saw that the SSL/TLS certificate is now enabled - HTTPS ftw! 🫡

Wrap Up!

By the time you see this post, my blog would have been successfully migrated from WordPress to Astro.

The process wasn’t as cumbersome as I thought it would have been and I’m so happy I did it. In the end, the final tech stack is:

"dependencies": {
    "@astrojs/mdx": "^4.0.8",
    "@astrojs/netlify": "^6.1.0",
    "@astrojs/partytown": "^2.1.3",
    "@astrojs/rss": "^4.0.11",
    "@astrojs/sitemap": "^3.2.1",
    "@astrojs/tailwind": "^6.0.0",
    "@tailwindcss/vite": "^4.0.4",
    "astro": "^5.2.5",
    "astro-expressive-code": "^0.40.1",
    "astro-icon": "^1.1.5",
    "hamburgers": "^1.2.1",
    "tailwindcss": "^3.4.17"
  }

I plan to write more on here!

There’s gonna be a new post every undefined, so stay tuned! 🩷

Until next time, Happy coding! 🚀