Eleventy Base Blog

screenshot of Eleventy Base Blog

Eleventy Base Blog

A starter repository for a blog web site using the Eleventy static site generator.

Overview:

The eleventy-base-blog v8 is a starter repository that demonstrates how to build a blog using the Eleventy site generator, specifically utilizing the v2.0 release. It allows for the creation of a static site with pre-rendered content and offers various features and options for customization. The theme is performance-focused, achieving a high Lighthouse score out of the box, and supports modern image formats. The blog posts can be easily organized, and additional pages like home, archive, and about are automatically generated. The repository provides deployment options for services like Netlify and GitHub Pages.

Features:

  • Using Eleventy v2.0 with zero-JavaScript output
  • Content is exclusively pre-rendered (this is a static site)
  • Can easily deploy to a subfolder without changing any content
  • Configure templates via the Eleventy Data Cascade
  • Performance focused: achieves a high Lighthouse score out of the box
  • View the Lighthouse report for the latest build courtesy of the Netlify Lighthouse plugin
  • Content-driven navigation menu
  • Image optimization via the {% image %} shortcode
  • Zero-JavaScript output
  • Support for modern image formats automatically (e.g. AVIF and WebP)
  • 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