Skip to content

11ty Rocks!

A collection of Eleventy (11ty) starters, projects, plugins, and resources created by Stephanie Eckles (@5t3ph)

Create Your First Basic 11ty Website

🍿🍿🍿 17 min. read β€’ Posted on: Nov 26, 2020

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...

Read Post View Post Archive

Resources

Starters, plugins, and externally hosted articles and tutorials

Build an Eleventy Site from Scratch

Build a site in 20 mins! Start from a blank project and build up to an 11ty site that includes Sass, a blog collection, and is prepared to source content from a headless CMS.

Watch the Collection

.eleventy.js Config Samples

A growing collection of filters, shortcodes, and other tips for extending 11ty.

Review samples such as for working with dates or to extend built-in filters.

View All Samples

11ty Netlify Jumpstart

Quickly launch an 11ty-generated static site. Includes a minimal Sass framework, and generated sitemap, RSS feed, and social share preview images.

Test Drive the Jumpstart

11ty Sass Skeleton Starter

Featuring absolutely nothing beyond a base HTML5 template and the essential setup to watch and compile your Sass alongside 11ty.

Includes minifiying and autoprefixing of styles postbuild.

Get the Starter

Plugin: Social Images

Based on my tutorial, this package creates dynamic images sized for social media tags (particularly Twitter and Facebook) based on your available pages. Use one of the predefined color themes, or define your own style, template, or both to customize the layout (like the ones in use on 11ty Rocks).

Configure the CLI script to run after your Eleventy build, and by default images will be created in _site/previews/ as png images. Use the CLI options to define a custom outputDir and/or a custom imageDir.

Docs and Install

Eleventy Plugin Template

Kickstart your 11ty plugin project with this template that includes a barebones 11ty build to test your functionality, and docs on how to test your plugin locally.

Also includes a boilerplate for your plugin README, and demonstrates setting up plugin config defaults.

Build Your Plugin

Plugin: Emoji Read Time

This plugin provides a filter that displays an estimated read time for Eleventy content, optionally with an emoji visual indicator.

The plugin offers config options to change or remove the emoji, update the word-per-minute, and alter the label. A simple string is returned, so the text formatting is up to you.

The default appearance displays one 🍿 per rounded 5 minutes of estimated reading time, ex: 🍿 7 min. read

Docs for Emoji Read Time

11ty Web Component Generator

Eleventy makes it possible to mix templating languages. More importantly to this generator is that we can customize the output file type and composite a file from includes.

This generator works with the inherent features of 11ty. Web components are generated within a Nunjucks (.njk) template that outputs the final .js file.

Demo the Generator

Email Generator

Generate simple, responsive email templates, with inlined CSS on build.

Use the Sass theme setup to re-brand the default template, and use the frontmatter keys for flexibilty in the layout. Check out the README for additional tips on creating emails.

Create Your Emails

Build a Community Site With Eleventy

Based on my experience building StyleStage.dev, this tutorial will cover how to create a full-featured 11ty site including:

  • How to initialize Eleventy and create useful develop and build scripts
  • Recommended setup customizations
  • How to define custom data and combine multiple data sources
  • Creating layouts with Nunjucks and Eleventy layout chaining
  • Deploying to Netlify
Build Your Community