Makzan / I share what I learned

Migrating from Wordpress to Eleventy and Netlify

Today I migrated 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({ "_misc_root_files": "/" });

Handling 404 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

Want productive tips and web technologies links like this in your inbox each week? Sign up for weekly dispatch each week. No spam ever. Just useful content: