How to Migrate From Wordpress to Astro

How to Migrate From Wordpress to Astro

Until recently, I self-hosted my website using WordPress on a Digital Ocean droplet. My journey with WordPress was filled with constant learning and challenges, but having had some free time recently, I decided to migrate to a static solution - Astro.

Why did I make this switch, you might ask? Well, the answer lies in four words - maintenance, speed, security and cost.

Reasons to go static

• Maintenance was my primary concern. The constant need to handle Operating System updates, software updates (such as Apache, PHP), WordPress plugins, and so forth, was becoming too much hassle. As a cybersecurity professional, I believe in streamlining processes, and this was a step towards it.

• Speed was another crucial factor. Although WordPress can be fast if you use the right themes and caching plugins, optimize images, JavaScript, CSS, and so forth, it requires a certain level of expertise and time to research these elements. Sadly, I didn’t have the luxury of time or the necessary skills to delve into these technicalities.

• The final and a significant factor was, of course, security. Every now and then, a WordPress CVE (Common Vulnerabilities and Exposures) appears that can potentially compromise your website. While the WordPress developers are quick to address these issues, and I trust them for that, the problem arises with the additional plugins. I had about 12 additional plugins that could potentially introduce vulnerabilities. Coupled with the fact that the firewall was constantly blocking hundreds of hacking attempts each day, the situation started to look a lot more worrying.

• Moreover, the cherry on top was the ability to host my static website for free using Cloudflare (plus the security features it brings)! While costs weren’t a significant concern since I had a pretty cheap droplet, I won’t deny that free is always better. Adding to the cost factor, is that most good plugins or their best features, are pay-walled. So even thought WordPress is open-source, you either end up coding your own stuff or paying for premium plugins.

Be careful where you decide to host your website. See the story of a blogger that received a $104k bill from hosting his static site on a different provider.

Moving to a static website seemed to be a great solution to these problems. Static websites are not only easier to maintain but also offer enhanced speed and security as they don’t rely on database queries or processing on the server’s side.

The speed of my website is now unparalleled, something I was unable to achieve while using WordPress. Lighthouse scores, which were a constant struggle in the past, are now near perfection across the board with Astro.

SSG vs SSR

Astro can generate pages in different modes:

• SSG (Static Site Generation)
• SSR (Server-Side Rendering)
• hybrid (using both)

I went with SSG, the default config, since my website is just static content. I don’t need session management, dynamic content, etc. In this mode, Astro builds and saves every page as HTML during the build process. These HTML pages are easily cached by Cloudflare’s world-wide CDN, ensuring fast delivery wherever you might be.

How to Add New Content?

Writing new content is also as easy as can be. I just write everything in markdown in Visual Code, commit and push to GitHub. This also means I can benefit from git’s awesome version control. Markdown is an easy markup language for creating formatted text using a plain-text editor. It’s widely used for blogging, but also in online forums, collaborative software, readme files and more.

After the markdown files are pushed to GitHub, Cloudflare Pages takes over. It automatically detects the new files, pulls the project, builds it and then deploys it to its CDN. And that’s it, the website is updated. So no hosting fees, no web server, no plugins. Fast, cheap and secure!

How to Start With Astro?

You could write something from scratch, but why do that when there are plenty of great starter themes out there. I went with the AstroWind, which has over 2000 stars on GitHub at time of writing, making it one of the highest rated Astro themes. Here’s why:

• It supports the latest version of Astro
• Has Tailwind so you get simple and clean CSS styling, while limiting the amount of CSS sent over the network
• Supports Markdown and MDX
• Optimizes images for you
• Generates the sitemap
• And much more. Checkout its GitHub page for a complete list of features.

To get started, it’s as easy as:

1. Cloning the GitHub repository
2. Run npm install
3. Edit the src/config.yaml configuration file to match your website and desires
4. And finally npm run dev to start a local development server.

How to Migrate Content from WordPress to Astro?

Once the local instance is ready, you can bring your existing content over to Astro. A few things to know before you start:

• src/content/post/ - Add here blog posts in .md or .mdx format. File name will be the actual slug.
• src/pages/ - Add your pages here
• src/assets/images/ - Add images that will be optimized by Astro
• public/ - Any static assets, like images that don’t need transformations

Exporting Content from Wordpress

1. Login as Admin
2. Go to Tools -> Export
3. Select “All content”
4. Finally, click the “Download Export File” button

Now that you have your data in .xml format, you can use a converter like this to transform it into markdown. The tool can also extract images and store it neatly as it was on WordPress. Depending on what theme or builder you use in WordPress, you might have to clean up the content a bit. I had some left over HTML structures which I had to prune, but nothing that can’t be solved using your favorite editing tool.

Copy all the things

Next, copy the markdown files in src/content/post/ for your blog posts and place images in src/assets/images/.

Front matter data

Each Astro file has a section delimited by --- that holds front matter data. Make sure to read the documentation to learn more.

You have to fix the date here, the cover image, title, etc. Here’s an example from this post:

---
title: "How to Migrate From Wordpress to Astro"
author: Alex
excerpt: "Insert excerpt here"
publishDate: 2024-02-20T09:51:50.000Z
image: "~/assets/images/image.jpg"
category: Software Engineering
tags:
  - wordpress
  - astro
---

Notice you can use ~ to match your src folder. The rest is self-explanatory.

How to Deploy to Cloudflare Pages

Once you finish your content and customizations, push the project to a GitHub repo. This can be public or private.

Then login into your Cloudflare dashboard. In Account Home, select Workers & Pages -> Create application -> Pages -> Connect to Git.

You will be asked to authorize access to your GitHub account if you have not already done so, so that Cloudflare can monitor and deploy your projects from the source. You can narrow access to specific repositories if you prefer.

Select the new GitHub repository that you created and, in the “Set up builds and deployments” section, provide the following information:

Production branch: main
Build command: npm run build
Build directory: dist

You can customize the project name (which will be used as your *.pages.dev subdomain).

Next, select “Save and Deploy”.

You can now monitor how the deployment progresses. Cloudflare Pages will now build the project, installs dependencies and so on.

After it’s finished, you can configure a custom domain for your deployment. And that’s it! Cloudflare Pages will automatically rebuild your project and deploy it on every pushed commit.

Conclusion

Migrating to Astro not only eased the maintenance process but also enhanced the speed and security of my website. And all with 0 cost! Well, except for some time. But the learning curve is very gentle. It only took me a couple of weeks of working one hour a day. And a lot of that was related to content, rather than Astro itself. I recommend considering Astro for your blog, especially if you are juggling with similar concerns.