Migrating to Eleventy

Last week, I migrated my blog from WordPress to Eleventy (11ty). The migration took around 8 hours, but with less tinkering I could have migrated everything in under 2 hours. Impressive considering I've never used 11ty before. The docs are great and it feels intuitive to use.

Why move to 11ty? I've wanted to move my blog back to a static file site for a while (there's something intangibly pleasing about static site generators). The recent WordPress drama gave me a push to try something new and since I had a few days between projects, I thought I'd give 11ty a whirl.

I installed 11ty and quickly poked around before stumbling on the eleventy-base-blog starter kit. It includes a bunch of useful defaults, such as archive pages, sitemap.xml, atom feed, etc., which saved me a lot of time.

Next was the bit I dreaded: importing my WordPress posts into 11ty. I followed the Migrating from WordPress to Eleventy guide. One terminal command later and I had all my posts (including images) in 11ty. To say I'm impressed is an understatement. I see this being useful in the future; it's a great way of exporting WordPress posts to markdown.

After the import, I noticed the permalinks didn't match my previous setup (blog/my-post instead of /my-post). After asking for some help, I found that permalinks can be changed by editing JavaScript Data Files. I added the following to blog.11tydata.js:

permalink: function ({ title }) {
	return '/${this.slugify(title)}/';
｝，

This wasn't quite what I wanted. Since this was using the title to generate the permalink, a post such as "Thoughts on the recent WordPress drama" had the permalink thoughts-on-the-recent-wordpress-drama rather than the original URL wordpress-drama. So instead of using the title to create the slug, I used the directory instead:

permalink: function (data) {
	const directoryName = path.basename(path.dirname(data.page.filePathStem));
	return `/${directoryName}/`;
},

Job done.

Once the posts were imported, I messed around with the CSS and added custom typefaces. Plenty more work to be done here.

The next task was to migrate my reading list page. In WordPress, books were added to a Custom Post Type with data stored in custom fields. I decided I wanted to store them in JSON. I used WP All Import to export the data to XML and asked ChatGPT to convert the XML to JSON. That worked great. After that, I just wrote a simple loop to display the JSON content.

One downside of a static site generator is that creating a new post can be time-consuming (opening an existing post, copying the content, creating a new markdown file, pasting the content, etc.). A quick Google search led me to the post Generate Eleventy Blog Posts with an NPM Script. I modified the code to fit my site paths, so I can now run npm run new post my-new-post, and voila, I have an empty markdown with some pre-filled front matter ready to start writing.

Overall, I'm pleased with the new setup. 11ty is a great tool that provides plenty of flexibility for people who like to tinker. And there's a lot of tinkering I plan to do:

• Improve the blog theme (improved responsive and typography styling, accessibility fixes, etc)
• Add PostCSS support
• Migrate to a new (static site friendly) host
• Redesign the reading list page
• And of course, write and publish more blog posts