mikkonen.com

I have been running various iterations of websites operated by me, most often with WordPress. However, there were some issues that made me move away from WordPress. The reasons were mainly related to how heavy WordPress is to operate compared to how little of its functionality I actually use. By default, optimizing WordPress for speed requires disabling many features that are enabled by default.

From a privacy perspective too, many plugins use random third-party resources that slow down the site. For example, Google Fonts are not hosted by the website if used, and WordPress often suffers from a bulk of JavaScript. That requires a lot of manual work for micromanagement, and I thought that I should do the opposite: go for a small static website that has only the features I want to use.

So I started a quest to look into various static site generators like Hugo or Hexo but decided to settle with Pelican because I'm more than familiar with using Python and managing Python apps. It was really easy to follow Pelican's quickstart guide on their main website to give a spin to writing a simple article that's locally hosted. I also looked into how easy it is to theme Pelican to make the site look the way I want. Most of the theme base I use comes from the 'simple' theme, which in my case is just 10 pieces of HTML files and 4 CSS files, as I decided to scrap JavaScript from my site as well.

After I more or less concluded that I wanted to continue development, I started working on looking at my previous WordPress site, its layout, and color palettes. This began mostly with creating the main CSS layout and working with the base.html and index.html template files to get at least the bare minimum parts of the website to look functional before adding extra functionality. I settled for a grid layout with columns because it looked nice to me, both on desktop and mobile devices. Eventually, I replicated the entire layout of my previous WordPress website in Pelican.

Some official Pelican plugins were used to provide more functionality too, like pelican-sitemap for search engines, pelican-read-more to provide "Read More" links, and pelican-neighbors to show the "next/previous article" buttons properly.

My previous WordPress content was exported using the Jekyll Exporter to produce markdown files that Pelican accepted. Only the content URLs and some custom HTML had to be removed and tuned manually per each file, but because I don't write much, that didn't bother me at all. I used the previous WordPress site's sitemap files to ensure that all my previous URLs continued to exist as they should, so I didn't need to implement custom 301 redirects.

After roughly 12 hours, the migration was a complete success, and the resulting website looked fine on various devices I tested in BrowserStack to weed out some mobile device-specific issues, like fitting two images side by side on the page. The footprint of a loaded page is roughly just 120 KB, and after caching, it turns to roughly 7-8 KB, which I think is a massive difference compared to websites these days.