πΊ
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
πΊ
11ty.Rocks on Youtube
11ty Rocks is now on YouTube! Subscribe today so you don't miss a video. Content will be in support of topics explored here on 11ty.Rocks.
Subscribe to 11ty Rocks
π
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
π±
Smol 11ty Starter
An extremely minimal Eleventy starter to kickstart a simple multi-page site that provides a nearly opinionless foundation to continue building on.
You can preview this starter or jump right to the repo.
Use Smol Starter
βοΈ
Plugin: Open in CodePen
This plugin provides an Eleventy shortcode to add "Open in CodePen" functionality for code demos.
The functionality pairs well with the result of this tutorial on creating live static code demos.
Docs for Open in CodePen
πΏ
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
π
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: 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
π©βπ»
Single-Page Setup (recorded livestream)
I joined Colby Fayock on Twitch in a slightly chaotic hour where I began building SmolCSS.dev with Eleventy.
Check out the recording and learn more about setting up Eleventy content for use in a single-page site, including advanced template and layout features using Nunjucks.
Watch Recording
β‘οΈ
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
π©
11ty CSS Houdini Worklet Generator
CSS Houdini worklets require a server to run. While there are many ways to create an envirnoment for developing and testing your worklet, as a static site generator, Eleventy provides a slim way to get setup and testing quickly so you can focus on creating your worklet!
You can preview the included worklet example on this CodePen.
Details and Template