Migrating makzan.net from Wordpress to Eleventy and Netlify

Today I migrated makzan.net from Wordpress to static site by using Eleventy and hosting on Netlify.

Setting up the blog structure

The starter 11ty blog repository provides a good starting point.

I copy the existing Wordpress theme into 11ty layout. I copy existing pages HTML into individual file. Then I create the category list and /category/ page by following the 11ty starter repository.

Export existing Wordpress posts into Eleventy posts

I use Python to scrap my own Wordpress website.

Before running the web scraper, I turned off image hosting on Jetpack option in Wordpress. I also add some spans and classes to the theme file for easier web scraping.

I had an archive page listing all the posts. From this list, the Python script can then scrap each individual post page. For each page, of course I scrap the content. Furthermore, I scrap the page slug for the file name and prepare for the redirection. I also scrap the published date and the categories.

I also post-process the content to replace Wordpress image tags into cleaner image tag.

I save the content as HTML inside the posts folder. Thanks to the flexibility Eleventy gives, I can mix content type by having these old posts in HTML and writing new posts in Markdown.

Moving the media files

I download the wp-content/upload folder. I also have some static files to move from original hosting to new files structure. I create a folder named _misc_root_files to organize these files. Here is my pass-through configuration in .eleventy.js.

eleventyConfig.addPassthroughCopy("wp-content");
eleventyConfig.addPassthroughCopy({ "_misc_root_files": "/" });

Handling 404

Makzan.net had been around since 2005. It is almost 15 years ago. I had changed from Wordpress to static site to Wordpress again and now back to a static site. I try my best to keep all the URLs during migrations.

I generate _redirects file to keep all existing URL from Wordpress. They are in format /YYYY/MM/post-slug and in 11ty I use /posts/YYYY-MM-DD-post-slug. I also keep the /YYYY/MM/DD/post-slug as well for backward compatibility.

Also I export the existing 301 redirections into the _redirects file as well, to keep the very old URLs.

I’m still seeking a sustainable way to capture 404 and handle any missing URL redirections. More on that later.

Published on 2020-05-27. More articles like this:
- Highlighted
- Web Technologies
- Personal
- Eleventy
- Netlify

Previous <- Quick Sketch: My Workspace
Next -> Capturing 404 URL by using Netlify function and Airtable