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
  • Deploy directly to Netlify
  • 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)
• How Tailwind CSS is used here (see blog post)
• SEO basics (XML-sitemap, metadata)
• dayjs handling dates & times
• Bundling via esbuild
• RSS feed
• Links to social networks
• Mastodon domain verification snippet
• carbon.txt
• dark and light mode
• Tags
• Blog pagination

First steps

Please read the Get started docs!

Deploy directly to Netlify

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

His CSS methodology "CUBE" makes sense to me. It goes hand in hand with Every Layout (which he co-authors). He has recently published an approach that incorporates Tailwind CSS into his methodology. Also, I learned how to use Eleventy in 2020 with his (now free) course.

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

Heydon Pickering

I strongly orientate myself on Heydon's approaches and really love his books.

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

Zach Leatherman

He 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/

Aleksandr Hovhannisyan

I love order and structure. Aleksandr does this in an exemplary way, which is why I based the structure of eleventy.js on his personal site. The 301 redirect solution I'm using is from his blog.

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

Manuel Matuzović

Manuel is an accessibility expert. The menu I'm using is from one of his articles 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/