Since last week you may have noticed something different about the website.
Maybe it seems to load quicker, or it looks a tiny bit different, or perhaps you've noticed that the footer is much slimmer.
The reason is: KidsIL has once again been transformed!

After 5 years (felt longer) of having a WordPress blog, I've moved the blog to Jekyll!
This transformation is much more subtle than some previous phases this website has gone through, since the blog looks and acts almost the same as before.

What is Jekyll?

Jekyll is a Ruby based static website generator, that lets one have a well organized website structure (to keep one's sanity), which is then converted into normal HTML, CSS & JavaScript files.

It supports (among others):

• Splitting layouts - So you can have header.html, footer.html, _layouts/post.html and those will be combined and used wherever they're included.
• Variables - To define layouts, post titles, tags, categories.
• Plugins - A pretty big plugin selection for things such as social media integration, category page generator, author archives generation, and many others.
• Native SASS support - SASS files are supported out of the box.

Why move to Jekyll?

From my perspective, Jekyll had some major advantages over WordPress:

• Back End Speed - I've been using a shared hosting environment for the past 6 years (January 2010!).
  Shared hosting is quite cheap and easy to use, but it's pretty slow too.
  There's a delay of about 3 seconds until the server responded, and that wasn't something I had control over.
  With a static website, however, you can load all your files on an AWS S3 bucket (much cheaper than shared hosting) or GitHub Pages (Free!).
  
  
• Front End Speed - WordPress has a lot of clutter in its HTML structure (a lot of unnecessary wrapper divs), CSS (especially for child themes, where the base CSS is attached so you have to load the entire CSS of the parent theme with your customizations), and JS (jQuery is everywhere, needed or not).
  With Jekyll I took the bare minimum of what's needed for the website to function and look like the original design.
  
  
• Security - Looking at my access logs, I was getting 5000 visible hacking attempts a day (think of the none-visible attempts!). Of course nothing is 100% secured, but with a static website there's no admin panel OR database, which are the major ways through which websites get hacked (90%+ of cases if I had to guess).
  
  
• No more Updates - I don't need to worry about updating my plugins or WordPress core, everything is either 3rd party (like Disqus comments and AddThis), or static!

How to move from WordPress to Jekyll?

I've divided the plan into 4 parts:

• Backup EVERYTHING
  Before even starting to work, I've backed up the entire website & database, so I'll have the final version of the original site. Images, galleries, misc. plugins that I've used, anything that can be forgotten. Imagine 2 months after the move you realize that all your previous galleries are not working!
  
• Import Posts
  Importing Posts is pretty straightforward, following Jekyll's docs, I wrote a ruby script to import all my posts.
  There were a few WordPress shortcodes being used for plugins, I had to search for those and replace them.
  Each plugin can be replaced with either hardcoded static html (like gallery plugins), or just a different syntax (like when using Jekyll's syntax highlight instead of WP's highlight plugin).
• Rebuild the design
  This one probably took the longest. It would've been easier to simply copy & paste the entire CSS of the original website, of course, but after looking into the code there was just too much junk CSS, and unnecessary HTML tags, so I decided to rebuild the entire thing from scratch.
  It took about a weekend of intensive work, but the result is much lighter than the original.
• Export All Media
  I decided to split the website from its photos. The reason is that this way I could better control caching, analytics, as well as know how much space I'm using for Media and for the Website seaprately.
  Luckily my theme only used 2 images (background and social icons), the rest was under wp-content/uploads.
  It was as simple as copying that folder's contents to an S3 bucket.

Results?

It's a bit early to talk about exact numbers but I can say the following:

• Faster loading
  Loading time can't even be compared, KidsIL used to take 6-7 seconds and now it's 0.8 seconds!
  This is also due to the fact that caching is much easier for a CDN with static HTML files.
• Lowered Cost
  Shared hosting costs me about $11.5 a month. It used to be much cheaper,
  but once the 1st & 2nd year discounts are gone, you pay the full price.
  The expected amount to be paid for static hosting is about $0.55 (that's not a typo) a month!