Change to use Eleventy

2023-07-06

I thought to update this blog. First I tried to update the existing Next.js logic that I had implemented. So much breaking changes here and there and was not happy with the end result AND wanted to try something new.

After little investigating I landed on the Eleventy's homepage and it seemed interesting.

Learning

I read through the instructions and watched some short videos from their site. Fair enough, it seemed simple and interesting ride ahead.

Cleanup

First I removed the old Next.js stuff by deleting most of the files. I just left a handful of files, .gitignore and package.json.

I also cleared the scripts, dependencies and devDependencies out of the package.json.

Dependencies

Eleventy

I added the Eleventy as dev-dependency to the package.json and decided to use exact version numbers for all the dependencies. Have had so many problems when developers have not used the semantic versioning correctly and would like to have the control what gets run when Netlify builds this site automatically.

 yarn add --dev @11ty/eleventy@2.0.1

sass

I wanted to have support for the sass, so I needede to install some dependencies to enable support for it.

yarn add @grimlink/eleventy-plugin-sass@1.0.3
yarn add sass@1.63.6

Syntax highlighting

I wanted to still have syntax highlighting for my code blocks and luckily Eleventy had official plugin for that purpose.

yarn add --dev @11ty/eleventy-plugin-syntaxhighlight@5.0.0

As a bonus it can show changes using diff syntax.

- It is okay!
+ It is great!

It is great feature to have and highlighting the line needed.

Dark & light theme

I decided to still have some kind of dark & light theme support on the site, but not using the same tri-switch that I used back then (light/automatic/dark).

It is now using the user's system's preferred scheme setting.

Support for syntax higlight

I also like to have the code blocks to have different colors based on the scheme.

a11y theme with changes and using css variables preferred scheme of the system automatically. No selector like previously

I made a single file that changes the colors based on the selected scheme, using the structure and colors from the following files. They are created by Eric Bailey.

Node version

After creating the PR with the changes to be ready to use the Eleventy and Netlify launched the deploy preview, or tried to, I got the following error.

Error:

2:01:02 PM: Failed during stage 'Install dependencies': dependency_installation script returned non-zero exit code: 1
2:01:02 PM: error sass@1.63.6: The engine node is incompatible with this module. Expected version >=14.0.0. Got 10.24.1
2:01:02 PM: error Found incompatible module.
2:01:02 PM: info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
2:01:02 PM: Error during Yarn install
2:01:02 PM: Build was terminated: dependency_installation script returned non-zero exit code: 1
2:01:02 PM: Failing build: Failed to install dependencies

It was because of at the time I have set up Netlify for the site previously (May 2020) it used the LTS version of the Node.js. Netlify do not automatically update the used Node version, which is logical.

Specifying the Node version

I created the .node-version file on the project root as instructed on the Netlify's docs. It is now looking like this:

By giving just a major version, it will automatically use minor and patch versions of the Node.js. At the time of writing it should have picked the current latest version of 18.16.1.

Final thoughts

After the change to Eleventy, the codebase seems to be a lot simpler as there is no so much bulk to do stuff. Of course the previous version was not perfect nor is this.

But I like it now and it managed to get me to write this post. Maybe I do write some other posts also before it is yet again time to change the framework used under the hood.