Jason Chafin

Listen… do you smell something?

On Building with Eleventy

Home » On Building with Eleventy

Note: Since writing this post, I have moved back to WordPress. The sentiments expressed here are still valid. I still love Markdown. But WordPress provides a better content creation and editing experience. I love writing code. But I also like being able to “develop from the Dashboard” which I can do with WordPress.

I’m intrigued by Static Site Generators (SSGs). Plain text has become my favorite way to write anything — meeting notes, to-do lists, goals and aspirations, whatever. Plain text is universally readable and very portable.

My favorite flavor of plain text is Markdown. Markdown can be used for many types of writing. It can be used in Github comments, it can be used in Slack (although, they call it Markup), it can even be used for creating WordPress posts. I currently use Obsidian as my primary note taking app, which is based on Markdown.

I’m a WordPress developer from way back. But SSG’s such as Jekyll and Eleventy (11ty) can take your plain text files and turn them into <html>. As much as I love WordPress, a SSG‘s ability to parse plain text such as Markdown makes it very easy to work into my existing workflow. .

In the past, I’ve developed several sites in Jekyll. But then I discovered Eleventy (11ty), which is like Jekyll on steroids.

As I progress on this website, I thought I’d note some of the interesting challenges I’ve met (thus far) as I learn and build:

  • Template language: I’m used to straight Liquid with Jekyll. Eleventy is based on a similar-but-different templating language called Nunjucks. I know many Liquid calls by heart but they sometimes don’t translate straight across, so I get hung up. Thankfully the Eleventy documentation provides examples for the many template languages that Eleventy can parse. It’s both challenging and fun to explore this variety.
  • Javascript: Javascript is not my strongest suit. As a WordPress developer (since pre-Gutenberg), I’m used to PHP. But I’m on a quest to learn JavaScript deeply. This is helping. (also helpful: creating a WordPress block, exploring Vue and React).
  • Building from scratch: Semantics. As a WordPress Developer, I certainly could build a site from scratch. I probably did back in the olden days. But WordPress does an excellent job of abstracting out content creation from theme development. Theme developers can start with a parent theme and make a child of it, or use a framework such as StudioPress Genesis. In these cases, all the nitty-gritty like proper <head> tags and aria-labels are taken care of for you. To be sure, Eleventy even has a base blog that can be used as a template and also has much of that nitty-gritty (much of which I have borrowed from). As an exercise, though, I’m building this site from “scratch” (notwithstanding the borrowing mentioned above), which has given me an opportunity to refresh my knowledge of these aspects of building a proper website.

Finally, while builiding this site, it has been very helpful to engage my beginner’s mind, to “forget” my pre-conceived notions about web development in order to learn anew. I find I am taking this new knowledge and applying it to the work I do in my day job, which ultimately improves my overall skill set.