Eleventy Base Blog

screenshot of Eleventy Base Blog
eleventy

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
  • Per page CSS bundles via eleventy-plugin-bundle
  • Built-in syntax highlighter (zero-JavaScript output)
  • Draft posts: use draft: true to mark a blog post as a draft
  • Automated next/previous links
  • Accessible deep links to headings
  • Generated Pages: Home, Archive, and About pages
  • Feeds for Atom and JSON
  • sitemap.xml
  • Zero-maintenance tag pages
  • Content not found (404) page

Summary:

The eleventy-base-blog v8 is a starter repository that showcases the use of the Eleventy site generator to build a static blog site. It offers various features such as pre-rendered content, performance optimization, modern image format support, and automated page generation. The theme can be easily customized through configuration files and supports deployment on platforms like Netlify and GitHub Pages. With its straightforward installation process and comprehensive documentation, the eleventy-base-blog v8 is a great choice for anyone looking to build a blog using Eleventy.

eleventy
Eleventy

11ty is a static site generator that allows developers to build fast, modern websites using HTML, Markdown, and other templating languages, without the need for a complex build system.

blog
Blog

Blog websites feature posts written by one or more authors, organized by categories and tags, with a section for comments and archives sorted by date or topic. Additional features may include search bar, social media sharing, subscription or RSS feed, about and contact pages, and visual content.

prismjs
Prism JS

PrismJS is an open-source, lightweight, and extensible syntax highlighting library that supports a wide range of programming languages and markup formats.

zod
Zod

Zod is a TypeScript-first schema declaration and validation library. It allows you to define schemas that can validate data at runtime while providing excellent TypeScript inference, making it perfect for API validation, form validation, and type-safe data handling.