Lab Notes

Things I want to remember how to do.

Moving to Eleventy From Jekyll

April 19, 2021

After upgrading to Fedora 34, my Jekyll environment was broken again. So it was time to find another solution that didn't require so much attention. Enter Eleventy, a static site generator that runs in the Node.js environment.

I started by following https://stedman.dev/2020/04/29/make-the-jump-from-jekyll-to-javascript/, but in the end I decided to forgo GitHub Actions and just generate the site myself and check it in under the docs/ directory. You can look at the history of the raydecampo.github.io repository, in particular the eleventy branch, for all the gritty details.

The steps went something like this (links to the appropriate commits follow the description):

  1. Following the Install and Configure section of the stedman.dev document, get Eleventy installed and running. (64a6dac)

  2. At this point, influenced by https://github.com/andeersg/andeers.com, I restructured so that the source of the blog contents were kept under the src/ directory. (51a2666, 66dbf6b)

  3. Added permalink metadata to the blogs so that the files end up in the same place as they did when jekyll was creating the site (and blogger before that). (77e6af5)

  4. Next, the jekyll built-in site.posts variable is no longer available under Eleventy. So I defined some collections and used them to fix the pages with lists of posts. (7a7e5b5)

  5. Next up was fixing CSS. Eleventy has no built in support for SASS (kind of strange), so I added a node script entry to run SASS. I also downloaded a copy of the CSS for the jekyll theme I had been using. (db0d7ac, 1b1433f)

  6. Next up was installing the Eleventy RSS plugin to restore RSS functionality. (4ef3cd9, a6a09f8)

  7. Next we get tags working the way they did before. Stole a code snippet from philhawksworth (H/T). (3121301)

  8. Add some metadata and fix up the parameterized data in the default.html template. (4233afc)

  9. Install and configure the Eleventy syntax highlighting plugin. Don't forget to download a Prism CSS file. (14c89fe)

  10. Finally it was time to get things working on GitHub Pages. GitHub Pages will let you use either the root directory or the docs/ directory of the repository as web root. So I changed the output directory for Eleventy to the docs/ directory. I also needed a passthrough for the CNAME file. Then I just needed to change the configuration in GitHub (Settings -> Pages) and I was all set. (1aa4e97, 5410778, 6f2d68b)