Today I released a site that I have converted from an old WP site to Kirby. I can share the process of how it went.
WordPress to Kirby
Here is a before / after screenshot of the two CMS:es. Kirby CMS is less bloated with stuff, expecially in the left sidebar.
Plugins
In WordPress I used 22 plugins. Most of them was for security or to remove stuff that I did not need or want. In the Kirby version I use 10 plugins.
Here they are:
- core - My own plugin for custom stuff.
- GitHub - kirby-deprecated-plugins/kirby-ga: Kirby GA - Google Analytics
- GitHub - kirby-deprecated-plugins/kirby-html-minifier: Minify the html output of a site built with Kirby CMS
- GitHub - kirby-deprecated-plugins/kirby-ratings: Voting plugin for Kirby CMS.
- GitHub - kirby-deprecated-plugins/kirby-revisions: Revisions for Kirby CMS
- metaclient - Plugin to get data from another Kirby site ( http://vardagsfinans.se )
- metahelper - Helper class for the above
- punycode - Helps convert urls
- https://github.com/jenstornell/snippy
jQuery to vanilla JS
Why load 100kB extra javascript that is not needed? I removed jQuery and found alternatives for the plugins that I needed. In fact, I did not need many plugins at all.
Here they are:
LESS to SASS
Before I used LESS CSS as a preprocessor because it worked with javascript and was very easy to implement that way.
My problem with less was that I could not use normal CSS. For example, the calc
function needed to be escaped, like this:
width: ~"calc(100% - 200px)";
More infor at disable-less-css-overwriting-calc
Prepros to gulp-sass
At first I just wanted to preprocess css and javascript. Later on I had the need to to other things as well. Therefor I switched to Gulp. I use gulp-sass and gulp-cssmin for the CSS part.
HTML change
The HTML WordPress generates is not awesome. It adds many classes on menus etc. Plugins add classes, css and js. Before it was not easy to keep the HTML clean and the js and css as compressed single request assets. Now it’s much easier and it works as expected right away.
I’m aware if that I still have some inline javascript in my footer but it’s not even close to how it was before.
Speed
My cached Kirby version is almost exactly as fast as my HTML version of my WordPress installation (not the cached version but a flattened version with just HTML files).
My tool says 0.4 - 0.8 seconds now. I think that’s good enough.
Visual changes
My main goal was to convert the site from WordPress to Kirby seamlessly. No redesign. I still changed some things in the process:
- Converted the screenshots from pngs to compressed jpgs. It made a huge impact, removed over 70% data on each image.
- The stars look a little bit different because I moved over to my own ratings plugin. It was not possible to vote before. Now it is.
- I removed my contact form. Maybe I’ll add a form later, don’t know yet.
Why I moved from WP to Kirby
- Full control over the output
- I can have any url structure if I want in the future (routes)
- In the admin/panel it’s like moving from a messy apartment to a clean one
- There are more plugins that I like in Kirby than in WordPress nowdays (pointing at myself).
- It has future potential which means I can build on this project with happyness instead of pain.
- I don’t need to update the core and the plugins every day.
- Kirby should be quite secure out of the box, I hope.
- Easier to backup a flat file system. I don’t have that much pages. No need for a database here.
I build my site in WordPress in 2015 and now in 2016 it’s in Kirby and a lot of the workflow, tools, plugins, cms and almost everything has changed in just a short period of time.
That’s it. I hope you liked it.