11ty

Fill slots in an HTML layout with chunks of Markdown content.

Add interactive HTML/CSS/JS code demos to an Eleventy site using Markdown code blocks. - GitHub - AleksandrHovhannisyan/eleventy-plugin-code-demo: Add interactive HTML/CSS/JS code demos to an Eleve...

Eleventy (11ty) Tutorial

What is Pug? Pug is a high-performance template engine heavily influenced by Haml and impl...

This article demonstrates how to build a modular landing page (like Gutenberg blocks) with in Eleventy. Featuring shared content, and multisite scenario.

My approach to building a flexible landing page in Eleventy.

Use these plugins or code snippets to make CSS a first-class templating language in Eleventy and add processing with LightningCSS and/or Sass.

Hi -- Is it possible to use page object variables inside a shortcode? I'm attempting to refactor the following njk block into a shortcode à la adamduncan/eleventy-shortcomps pattern: {%- for im...

I'm trying to create a shortcode that needs to have in input variables eleventyConfig.addShortcode("twittershare", function(canonicalUrl, textToShare, viaName, hastagName) { return `&...

Use this 11ty plugin to enforce a typed frontmatter schema for templates within an Eleventy collection.

If you've built sites using Eleventy, you're probably familiar with collections. Using the Configuration API allows for creating custom collections which can be useful to only show certain posts on your site.

Using nunjucks to get the count of the posts for a tag.

There are many great features to choose from when building websites with Eleventy. One feature in particular that I find very useful is the ability to iterate over a global data file and generate page content using a templating language of your choice.

When I first started creating my first GitHub Actions testing them wasn’t much of a thing. It mostly happened by doing some form of throwing different scenarios at it and manually looking at the result. At least that was it for me. More complicated actions had unit tests but no assertions on the workflow level. That changed when GitHub decided to change the way an action (or anything in a workflow) can set outputs. Photo by Tima Miroshnichenko from Pexels

Create complex and nested collections to handle multiple taxonomies in a site built with 11ty

Open source content management for your Git workflow. Use Static CMS with any static site generator for a faster and more flexible web project.

Let’s walk through the specifics of how to utilize the @eleventy/eleventy-fetch plugin to retrieve data from an API and use it in an Eleventy generated site.

If you've been building websites for a while, "optimize your images" probably sounds like "eat your veggies." It's good for your website's health, it'll make...

While imagery can enrich your content, it can also slow down your site if it's not used responsibly. Learn how to use the official 11ty image plugin to create optimized and responsive images.

How to use PageFind to implement search for an Eleventy site

Eleventy lets you create a file called eleventy.js to configure the SSG to your own project’s needs. This article is all about organizing your config file!

I have the following two blocks of code in my .eleventy.js file // Tags eleventyConfig.addCollection('tagList', collection => { const tagsSet = new Set(); collection.getA...

An 11ty plugin that adds classes to code elements at build time using Prism so you can highlight syntax using CSS - JKC-Codes/eleventy-plugin-code-style-hooks: An 11ty plugin that adds classes to c...

I’ve had my eye on Astro, so I thought I’d take it for a spin by re-building this here website. I stuck with 11ty in the end for a variety of reasons, but th...

11ty filter to filter a collection (array) by key:value pair - used to filter on custom taxonomies other than tags (source: https://paulrobertlloyd.com/) - 11ty_contains.js

Sample Eleventy structure using WordPress data. Contribute to joshcanhelp/wordpress-to-11ty development by creating an account on GitHub.

Adding support for code.scss/code files, complete with content hashes.

Step-by-step guide to date-based global data sorting in Eleventy, including automated by file last modified and manually via a data property