26 Oct 2020
Getting started with Eleventy
The last couple of days I have been playing a bit with Eleventy.
I really like the concept of static website generators, especially for the sites I build at this moment. Thus far I have been creating a couple of website with Jekyll, including this site. At this moment I don’t have plans to move away from Jekyll for my existing sites, but it is always a good idea to investigate other options. One of the downsides of Jekyll is its build speed and the dependency of Ruby and the ecosystem like bundler.
What I need
My wife Caroline has been drawing and painting for quite some time and wants to create a portfolio website. I decided to play a bit with Eleventy so I can make a substantiated decision when that site really needs to be build.
What I need to maintain such a website, apart from a decent design, are a couple of things:
- It must support data file, preferably in JSON, to generate various pages with the artwork. Adding a new image and description should be little work.
- It must support SCSS to generate the CSS for me.
- It must run within a Docker image so I can use that for development and GitLab CI based building and releasing.
- The template system should be at least as powerful as Liquid is in Jekyll.
- I really like the
linktag of Jekyll. It would be great to be able to keep having a build time feature like that.
The new static site generator at best should have all these features, but I can live with not having the
The very first steps to play with Eleventy is to go through the getting started steps and create a Hello World! like site. That worked within a couple of minutes.
The first thing I like is that they use
npx and discourage the use of installing Eleventy as a global tool.
This makes it easier to install and allows you to simply run a
docker run command using the
node:lts image and you are ready to get started.
The first wish fulfilled.
Next step will be adding a template and some basic styling. According to the docs there are several options for templating. Let’s dive in that a next post.