Eleventy starter

Opiniated but 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! Let me know if you miss any features. Currently in planning are automatically generated OpenGraph images (as fallback) and mode.

• Eleventy starter
  • Preview
  • Features
  • First steps
  • Deploy directly to Netlify
  • Development
    • Install dependencies
    • Working locally
    • Creating a production build
  • Logbook
    • 22-11-24
    • 22-11-04
    • 22-10-30
    • 22-10-04
    • 22-10-03
  • 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)
• SEO basics (XML-sitemap, metadata)
• dayjs handling dates & times
• 301 redirects for netlify
• Advanced markdown handling
• Bundling via esbuild
• RSS feed
• Links to social networks in footer
• Mastodon domain verification snippet

First steps

• Important: edit meta data in src/_data/meta.js, it's being used all over the template.
• Search for 'eleventy-excellent.netlify.app'. You'll find an entry in src/assets/css/global/global-styles.css. Replace with your own domain.
• Edit your social media in src/_data/social.js and src/_includes/icons. If you add new icons they must be prefixed with "social-". By default you have rss, mastodon, twitter, ko-fi, linkedin and github. Great resource: https://lucide.dev/
• Not required, but recommended: Delete github.js in src/_data/github.js and the blog posts, as these serve only as an example.
• Edit your preferences (colors, fluid text sizes etc.) in src/assets/css/design-tokens.
• Optional: set your (favicon) icons in src/assets/images/favicon.

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, inline and minify CSS.

npm run build

Logbook

22-11-24

• updated required node version in package.json
• meta.js now controls most of the templates defaults
• added RSS feed, because of course!!
• made twitter and other meta data OPTIONAL
• added Mastodon verification and more social icon defaults
• focus-within for the cards

22-11-04

• added blog posts for feature explanation

22-10-30

• WebC in own branch
• simplify main branch

22-10-04

• all markdown syntax set

22-10-03

• first commit. Updated

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://cube.fyi/
• https://buildexcellentwebsit.es/
• 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/