Site transitioned from Jekyll to 11ty
After numerous hours / days of hacking (much more than I care to admit), I have moved the blog from Jekyll to the static site generator 11ty. All the while maintaining using the Jekyll theme Minimal Mistakes Theme.
TIP: Unless you are wed to the theme, don't try porting it. Really. Headaches await. 🤯
There was a surprising amount of hacking needed to get the
liquid calls to work properly. The main issue is that main of the required variables don't contain the data expected by
Minimal Mistakes. So this mean debugging to find what is where. For instance the
post variable doesn't contain a posts
title, that is usually a global variable. (Same with many others) HOWEVER, there are instances where the
title might actually be in a passed in variable at
post.data.title for the RSS feed file.
Not everything is in place; specifically site search is currently disabled as is the archive of posts by year, and finally comments aren't working though in theory they should (they had also stopped working on the Jekyll version of the site). All will be returned at some point.
All that said, despite the change to keep the theme ... I will ultimately be moving away from it. While I like it, I can't easily do some of the things I'd like to do and going my own way will be a way to hopefully show my improving HTML/CSS/JS skills.
Also todo: add mappings from old urls to new. Most are the same, but a handful have been fixed to remove a space.
Before I finish I should give some thanks / hat tips so various blog posts / git hub repos for bits I've cribbed.
First and foremost is a blog / repo by Quinn Dombrowski. Her post was what led me to realise that I could actually get
Minimal Mistakes theme running on 11ty. I spent a little time with her blog repo, initially mostly going through the steps to get it to build with 11ty 1.0.x or 2.0.0beta1.
Once I got it building, I started trying to port
Minimal Mistakes myself, only cribbing bits out of
.eleventy.js. I figured the best way to understand how it was to work with
11ty was to do the changes to the templates myself. Although in the end I did wholesale rip Quinn's code for pagination on the front page because I couldn't get the original
paginatior code to work.
Also of use was in no particular order:
- Xavier's post on migrating Jekyll to Eleventy. There are still some ideas I'd like to use from the post and use Xavier's method for loading the disqus comments. Also the section on "Check visual differences" was great.
- Jérôme's post "From Jekyll to Eleventy". While I didn't use anything Jérôme mentions, it was helpful to see someone else had gone through the process of moving.
- Ian's similar post "Moving this blog from Jekyll to 11ty". Again was just useful reading.
- Kitty's post "From Jekyll to 11ty". Some useful bits to be found. I sort of used Kitty's permalink, although I used
"permalink": "/2023/1/26/site-moved/". Also made use of
.eleventy.jsfrom Kitty's Github repo
- Rob's post on "Compile Sass with eleventy. While I didn't end up using this technique, I did initially start with it. The reason I didn't was that I wanted to have the initial
main.scssfile be a
liquidmarkup file, so my choice of theme was backed in before compiling. So what happens now is I build the 11ty site first, then build sass, compiling the sass files after baking.
- Dennis also had an article on "Compile Sass with Eleventy".
- Michael's "eleventy-filter-relative-url" plugin. I ended up putting the code for it directly into my
.eleventy.jsbecause the package kept causing issues with
npm install. It required using
--legacy-peer-depsevery time I wanted to install a new package. I ended up altering the code a little too. Ultimately I moved away from the
relative_urlbehaviour, function works like an absolute url.
I'm sure there might be something else I'm forgetting, and I will update the post if I remember.
Leave a comment