11ty

Maybe you've already noticed, i'm a eleventy js fan. It’s my answer to everything right now.

Rather than using static font-face declarations for web fonts, you can take advantage of global data in 11ty to create a single source of truth for fonts and reuse those values throughout your templates and CSS.

How to test a new theme in an Eleventy site

How I built a randomized placeholder service with Pipedream

This is part one of a multipart series about how I setup my personal web site using Eleventy

If you write a technical blog and use 11ty as your static site generator of choice you might run into a conundrum: How do you show Liquid or Nunjucks template code in your code blocks.

11ty started out as a static site generator, but is quickly getting into the dynamic game. Use the templates and structure you love, but use them on the server, as well!

Mit dem Kommandozeilentool Weasyprint und druckspezifischem CSS können optisch ansprechende PDF-Dokumente aus HTML-Dokumenten erzeugt werden.

How to pass parameters to an include in Nunjucks

Includes are great. But for actual reusability of code, parameters are always needed. Luckily, nunjucks makes this possible with macros!

Front matter, templates, collections, and JavaScript.

Bernard Nijenhuis • Front-end Developer • Katwijk, The Netherlands • Father of 3 kids • Husband to 1 wife • Owner of 2 cats

Setting and using data in the static site generator Eleventy

A review of 11ty, an extensible static site generator written in Node that supports a variety of template languages.

A simple workflow showing you how to use Eleventy and NPM scripts to take YAML design tokens and generate CSS custom properties and a styleguide.

Instead of using Gulp or Grunt, Eleventy can also compile Sass files directly. The players: the new beforeBuild event and Dart Sass.

Use lite-youtube-embed in Eleventy for faster and more privacy-minded video

Want to get started with Eleventy but feel overwhelmed? Try out this pared-down tutorial

I was reading an article on Serverless, this lead me to few terms/technologies/concepts that I wasn't...

While some SSGs have a standardized way of handling assets, Eleventy does not. That's a good thing! Here are a few possible approaches you can take.

Begin from a blank directory and build up your first Eleventy site. Includes gotchas along the way, why they happen, and how to resolve them. You'll create essential layouts while learn the basics of using Nunjucks and Markdown for templating. And you'll learn to work with local data and external API data. As a bonus, get setup to deploy your final site to Netlify.

A component-based Eleventy starter kit.

My notes on the Egghead course "Getting Started with Eleventy" by Khaled Garbaya.

Pack11ty is an heavily opinionated Eleventy template project created by Nicolas Hoizey.

RSS is XML with a specification, however not all RSS feeds follow the spec. In this post, we process the feed as an XML document meaning we can access the extra attributes and values

Using the Image plugin with Eleventy to build a simple gallery

I built an Eleventy plugin to do Medium-style text highlights that can be shared. It uses a webcomponent, custom properties and the Web Share API.

Create a single-page site that composites working code examples by leveraging Nunjucks templating abilities and custom collections and shortcodes.