Eleventy is probably the closest to my needs, but it still hasn't migrated to ES modules ; its documentation is complete but somehow, I find it confusing and messy and can hardly find what I'm looking for ; and you still have to configure a lot of stuff for the assets processing, thus are stuck in the fabulous world of the JavaScript ecosystem.
I was disappointed for a few weeks, until I saw Baldur talk about its experience with Deno. Deno is a JavaScript runtime equivalent to Node, but with several differences that instantly satisfied my laziness:
It has its own shell to run scripts which makes it environment independent.
There's no package manager, just imports using URLs, so no node_modules madness (but you can store your modules for offline use if you want).
Its JavaScript API is the closest as it can be to the browser JavaScript API, which is good to me as a front-end developer.
It's a full tool chain that comes with a linter, a test runner, a formater, so there's no time wasted on this.
It has a no-dependency external stdlib for more complex needs.
And it turned out that Óscar Otero, who really enjoys Eleventy, made its own version of it for Deno, called Lume. It follows Deno principles of being near zero configuration, non-opinionated about the source of data, and comes with a set of official, easy to use plugins, and a clear, concise documentation.
I grabbed my modules, made them even more modular and oriented towards data processing, and connected them to Lume through the config file, and it... worked. There isn't a lot to say, I just imported the modules I needed, configured the process and copy for the assets ; created a for loop into a template file ; split my template into layout partials for more clarity ; and the website was generated.
Simplifying the project
Seeing this tooling part was done, I could then go back to what I wanted: fixing stuff in my static site processor, ease the writing and modifying of the website.
Here's a list of changes for the data processing:
The builder can now take several content files instead of one, which should allow me to group content in separated files. For example, I could group all the journal entries into a single file, or use a file per page if I wanted. I really like this flexibility.
I added creation date to all posts. With my website in this current form turning 4 years old, I felt some pages needed time contextualization. Some information could be outdated, and dates help to make sense of what you read. I did not have any dates prior to this, so I used the git history to catch the oldest commit for each page, and updated the content files.
I also added a generation date, updated when the content changes. This part isn't perfect, as it uses the live RSS file as a source of truth and compare markups, not the content itself. Inline markup changes (for example image sizes) can then trigger a date change, but that's a sacrifice I'm OK with. This part was the trickiest to get right.
Added the ability to exclude pages from the RSS Feed. Since some pages are just automatic listings of other pages, they did not provide any value for RSS users and polluted their feeds without giving anything valuable when updated.
Redid the whole RSS feed in ATOM, as I felt its specs made more sense to me.
For the design and tooling:
The design system powering this website was a different project in a different repository. Each time I changed something I had to open it, make a change, then move the processed file into the SSG. It made me mad every time, so I imported all the CSS files inside Lume, it processed them without trouble, and I can now experiment live with my CSS in a single place. I'm also porting the design system documentation on the website.
The templating that was done in my modules is now almost entirely done using nunjucks files. I like nunjucks, it's an easy to use and understand syntax.
I removed the icons from the footer. We are so used to use basic icons for everything that I never questioned the fact they did not fit in the style of the website. And text is more clear for readers.
I moved the configuration panel to the footer instead of the main menu. I felt it was out of place, as the other elements of the menu are navigation links.
In the configuration panel, I removed the ability to change fonts. I initially added them for accessibility purposes, but this effort was misguided. You can read more about fonts and accessibility in this research.
Drastically reduced the size of fonts from 300kb to 65kb using sub-setting. It's the only thing I could not fully automate as it takes a lot of time to scan the site.
Fixed image generation sizes to only three: mobile, desktop, full-size. Visitors on mobile should have a better experience now. Also I don't have to run a separate script and it takes way less time after caching.
Fixed a lot of small visual annoyances and bugs, most you probably never noticed.
I'm probably forgetting a lot of stuff, and I still have many things left to do.
I'm happy to be in a place where it's now possible to just open my code editor, write or code, save and publish without stressing about something breaking.
Again, many thanks to all the people who created the tools I'm now using, especially to Óscar Otero who created lume.
Initially published: March 5th, 2023 Generated: March 6th, 2023