Eleventy Excellent

Easy to use Eleventy starter, based on the workflow suggested by Andy Bell's buildexcellentwebsit.es.

If you end up using this starter, feel free to send me a link, I'd love to see it!

• Eleventy Excellent
  • Preview
  • Features
  • First steps
  • Development
    • Install dependencies
    • Working locally
    • Creating a production build
  • Built with Eleventy Excellent
  • Credits and Thank yous

Preview

https://eleventy-excellent.netlify.app/

Features

This starter includes:

• The whole CSS workflow as suggested by buildexcellentwebsit.es
• Accessible site navigation, editable in src/_data/navigation.js
• Image optimization with Eleventy-img (see blog post)
• Youtube embed with lite-youtube (see blog post)
• Easy resource fetching with eleventy-fetch (see blog post)
• Syntax highlighting via eleventy-plugin-syntaxhighlight (see blog post)
• Advanced markdown handling (see blog post)
• 301 redirects for Netlify (see blog post)
• Automatically generated Open Graph images for blog posts (see blog post)
• Tailwind CSS - but not how you might expect (see blog post)
• XML-sitemap
• dayjs handling dates & times
• Bundling via esbuild
• RSS feed (now you can add more than one)
• Links to platforms and social media profiles
• Mastodon domain verification snippet
• carbon.txt - to show that their digital infrastructure runs on green electricity
• Accessible dark and light mode based on user preference and custom toggle
• Tags in blog posts
• Accessible blog pagination
• A styleguide™

First steps

Read the Get started docs!

Development

Install dependencies

npm install

Working locally

Starts watch tasks to compile when changes detected

npm start

Creating a production build

Minify JS, CSS and HTML.

npm run build

Built with Eleventy Excellent

Sites that are based on / built with Eleventy Excellent. Add your site by submitting a pull request! :)

Credits and Thank yous

Andy Bell

Be the browser's mentor, not its micromanager. Give the browser some solid rules and hints, then let it make the right decisions for the people that visit it, based on their device, connection quality and capabilities.

• https://buildexcellentwebsit.es/
• https://cube.fyi/
• https://learneleventyfromscratch.com/

Heydon Pickering

Heydon creates some invaluable resources.

• https://every-layout.dev/
• https://inclusive-components.design/

Zach Leatherman

Zach is developing Eleventy and is constantly making it even better!

• https://www.11ty.dev/
• https://www.zachleat.com/

Stephanie Eckles

Stephanie provides a lot of resources for Eleventy and modern CSS.

• https://smolcss.dev/
• https://moderncss.dev/

Ryan Mulligan

I'm using Ryan's example of a breakout wrapper on this site.

Also have a look at those codepens!

• https://ryanmulligan.dev/
• https://codepen.io/hexagoncircle/

Sara Soueidan

I took a close look at Sara's recommendations for accessible theme switch and pagination in the Practical Accessibility course

• https://practical-accessibility.today/
• https://www.sarasoueidan.com/

Steven Woodson

The style guide was inspired by a great talk on the Eleventy Meetup. Steven also wrote a blog post about that.

Aleksandr Hovhannisyan

Aleksandr seems to value a well-structured project just as much as I do. It was the repo from aleksandrhovhannisyan.com that inspired me to write the article Organizing the Eleventy config file. The 301 redirect solution I'm using is from Aleksandr's article.

• https://github.com/AleksandrHovhannisyan
• https://www.aleksandrhovhannisyan.com/blog/eleventy-netlify-redirects/

Manuel Matuzović

Manuel is an accessibility expert. The menu I was using as default up to v2, is very much inspired by an article Manuel wrote on web.dev.

• https://web.dev/website-navigation/
• https://www.matuzo.at/

Bernard Nijenhuis

Bernard wrote the article on which the Open Graph Images implementation is based.

• https://bnijenhuis.nl/notes/automatically-generate-open-graph-images-in-eleventy/