Eleventy Base Blog v9

Full Changelog: v8.0.0...v9.0.0

The new version of Eleventy Base Blog that pairs nicely with Eleventy v3.0.0.

Features

Here’s what the base blog now offers out of the box:

• Using Eleventy v3 with zero-JavaScript output.
  • Content is exclusively pre-rendered (this is a static site).
  • Can easily deploy to a subfolder without changing any content
  • All URLs are decoupled from the content’s location on the file system.
  • Configure templates via the Eleventy Data Cascade
• Performance focused: four-hundos Lighthouse score out of the box!
  • 0 Cumulative Layout Shift
  • 0ms Total Blocking Time
• Local development live reload provided by Eleventy Dev Server.
• Content-driven navigation menu
• Fully automated Image optimization
  • Zero-JavaScript output.
  • Support for modern image formats automatically (e.g. AVIF and WebP)
  • Processes images on-request during --serve for speedy local builds.
  • Prefers <img> markup if possible (single image format) but switches automatically to <picture> for multiple image formats.
  • Automated <picture> syntax markup with srcset and optional sizes
  • Includes width/height attributes to avoid content layout shift.
  • Includes loading="lazy" for native lazy loading without JavaScript.
  • Includes decoding="async"
  • Images can be co-located with blog post files.
• Per page CSS bundles via eleventy-plugin-bundle.
• Built-in syntax highlighter (zero-JavaScript output).
• Draft content: use draft: true to mark any template as a draft. Drafts are only included during --serve/--watch and are excluded from full builds. This is driven by the addPreprocessor configuration API in eleventy.config.js. Schema validator will show an error if non-boolean value is set in data cascade.
• Blog Posts
  • Automated next/previous links
  • Accessible deep links to headings via IdAttribute plugin and <heading-anchors> Web Component.
• Generated Pages
  • Home, Archive, and About pages.
  • Atom feed included (with easy one-line swap to use RSS or JSON
  • sitemap.xml
  • Zero-maintenance tag pages (View on the Demo)
  • Content not found (404) page

Demos:

Netlify
Vercel
Cloudflare Pages

Contributions

• Tag needs to be posts not post by @saif71 in #146
• Refactors style bundling so it's easy to avoid an insecure CSP by @DougReeder in #151
• Update README.md to correct Netlify Drop link by @charliegroll in #176
• Add JSDoc (for completion) eleventy.config.js by @Zearin in #153
• Eleventy Base Blog v9 (using Eleventy v3 and ESM) by @zachleat in #184

Eleventy Base Blog v8.0.0 (BBv8)

Release notes posted on the blog: https://www.11ty.dev/blog/bbv8/

Full Changelog: v7.0.0...v8.0.0

---

Last week marked the first beta release of Eleventy’s new v2.0 version. This week we’ve spent a little time updating our eleventy-base-blog project to the latest version and added a few new features too.

Try out the new eleventy-base-blog Starter Project

---

Here’s what the base blog now offers out of the box:

• Using Eleventy v2.0 with the new Eleventy Dev Server and that same great zero-JavaScript taste.
  • Can easily deploy to a subfolder without changing any content
• Performance focused: four-hundos Lighthouse score out of the box!
  • 0 Cumulative Layout Shift and 0ms Total Blocking Time
  • View the Lighthouse report for the latest demo build courtesy of the Netlify Lighthouse plugin. Notably, the demo site fails the build if the site goes below a perfect four-hundos threshold.
• Content-driven navigation menu via the Eleventy Navigation plugin
• Automated image optimization (without client JavaScript) via the Eleventy Image utility
  • Generate modern image formats automatically (e.g. AVIF and WebP)
  • Automated swap between <img> and <picture> dependent on how many output formats you’re using.
  • Markup is generated for you with srcset and optional sizes
  • Includes width/height attributes to avoid content layout shift.
  • Includes loading="lazy" for native lazy loading without JavaScript.
  • Includes decoding="async"
  • Images can be co-located with blog post files.
  • View the Image plugin source code
• Built-in syntax highlighter (no client JavaScript)
• Blog Posts
  • Draft posts: use draft: true to mark a blog post as a draft. Drafts are only included during --serve/--watch and are excluded from full builds. View the Drafts plugin source code.
  • Automated next/previous links
  • Accessible deep links to headings
• Generated Pages
  • Home, Archive, and About pages by default (configure more as needed!)
  • Customizable content not found (404) page
  • Feeds for Atom and JSON
  • sitemap.xml
  • Zero-maintenance tag pages (View on the Demo)