From WordPress to Astro

Introduction

A time ago I have started a personal blog. Because I had a quite big experience with WordPress I have decided to use it. It was also a time when WordPress released Gutenberg (block editor).

WordPress solution

I started from creating custom, very simple theme. When theme was ready, the first step was writing the first article… and then the problems with WordPress has started. WordPress does not have build-in Gutenberg’s block to highlight a code. To resolve this problem I wrote a new block and used highlight.php as a code highlighter. It worked. There were some small issues but is was not a big deal.

I also needed to create blocks to show iframe to demo app, note block, custom excerpt and more. For someone who knows PHP it was not a problem but for someone who is FrontEnd developer and every day writes code in Angular it was a little frustrating.

Moreover, I wanted to do everything right, like caching, SEO, spam protection, loading time etc. I had to balance between writing from scratch and installing ready-to-use plugin. In spite of all I saw the future in it.

Breaking decision

Each time when I had read blogs, watched YouTube videos and searched GitHub repositories I was seeing that a lot of developers do not use WordPress (or other CMS) to write articles but they used Markdown with Hugo/Jekyll/NextJS (what a great discovery, right?). Having this in mind and seeing that I have to improve next feature in my theme… I said NO! There are frameworks where those problems do not exists. I do not have to take care about caching because NextJS has built-in Static-Site Generating (SSG) so all pages are generated once, during the deploy. Formatting? Highlighting? JS and CSS optimization? It not a problem also.

First step with NextJS

My first try was to rewrite articles to NextJS and react. I created a new project, first react component. I even rewrote the first article to MDX. Moreover NextJS has possibility to run React component in MDX. It was a great news. I could finally add component to the page to show how something works without using iframe. Something almost impossible to do in WordPress.

1
import TicTacToe from "./tic-tac-toe";
2

3
<TicTacToe client:visible />;

But then… what about other frameworks? What if I would like to write a demo to show something in Angular or Vue? It is not possible to do in NextJS… It was a problem because I mostly write about Angular, not React.

Astro

After a searching I decided to try Astro (I had heard about it before). Astro is very similar to NextJS but is framework agnostic and that means you can run React, Vue, Solid and much more or even Angular (thanks to AnalogJS)!

1
import { ExampleComponent } from "./angular.component";
2

3
<ExampleComponent client:visible />;

After rewriting some components and articles to Astro and MDX I loved it. No more taking care about caching, no more taking care about optimization. Everything is done automatically:

• thanks to Tailwind I do not need to take care about CSS
• thanks to @tailwindcss/typography I have beautiful typographic defaults
• thanks to @astrojs/sitemap I have sitemap based on content
• thanks to @astrojs/netlify (and GitHub) I can rebuild project after each changes
• thanks to @astrojs/partytown I can lazy-loaded third-party scripts

Migration process

Rewriting articles

Rewriting articles was the task which takes most of the time. In WordPress I used Gutenberg blocks to render components. That meant I had to rewrite each article individually, but thanks to that I could fix typos. I had thought about writing a script but after a while I realized that I would spent more time writing the script than rewriting the articles by hand.

URL compatibility

I did not want to break any URL (for SEO reason) so I needed to write a “plugin” to redirect from an old URL to the new one. Because in WordPress based page I used autogenerated post ID to recognize an article I have provided a similar behavior to the Astro based page. Instead of autogenerated ID I have provided manually created ID (something similar like YouTube does about videos)

1
https://codegen.studio/909/...
2
// 👇 redirect to
3
https://codegen.studio/blog/xRWLGo/...

Assign old ID to the article

To concat old ID with the new old I have added two fields: oldID and ID for each article.

1
---
2
id: xRWLGo
3
oldId: 909
4
<!-- ...  -->
5
---
6

7
<!-- Content -->

Redirector

The last step is to write a function to read ID from an URL if exists and redirect to the new one.

1
const url = Astro.url;
2
const firstPathName = url.pathname.split("/")[1];
3
const asNumber = +firstPathName;
4

5
if (asNumber !== 0) {
6
  const blogs = await getCollection("blog");
7
  const perhapsEntry = blogs.find((entry) => entry.data.oldId === asNumber);
8

9
  if (perhapsEntry !== undefined) {
10
    const path = getBlogPostPath(perhapsEntry);
11
    return Astro.redirect(path, 301);
12
  }
13
}

Summary

What every you use always remember to choose technology based on your requirements

I didn’t follow this statement and lost a quite a lot time fighting with technology which wasn’t adapted for my requirements. I just wanted to do it simple but WordPress is expensive when you want do it right.