Eleventy Base Blog

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

Installation:

To install the eleventy-base-blog v8 theme, you can follow these steps:

1. Make a directory and navigate to it:

mkdir my-blog
cd my-blog

2. Clone the eleventy-base-blog v8 repository:

git clone <repository-url>

3. Optional: Review the eleventy.config.js and _data/metadata.js files to configure the site’s options and data.

4. Install the dependencies:

npm install

5. Run Eleventy to generate a production-ready build to the _site folder:

npx eleventy

Alternatively, you can build and host the site on a local development server using the following command:

npx eleventy --serve

You can also run Eleventy in debug mode to see all the internals:

npx eleventy --debug

After the installation and generation, your blog site will be ready for deployment or further customization.

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.