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.
Update 2021-04-27
I’m migrating the makzan.blog back to WordPress and keep the makzan.net as a simple index website.