Introduction

Eleventy Base Blog is a starter repository for building a blog website using the Eleventy static site generator. It provides a solid foundation for creating fast, efficient, and customizable static websites with a focus on blogging. This project showcases Eleventy's capabilities and best practices for modern web development.

Main Features

• Built with Eleventy v2.0, generating zero-JavaScript output
• Pre-rendered content for optimal performance
• Customizable templates and layouts
• Content-driven navigation menu
• Image optimization with support for modern formats (AVIF, WebP)
• Per-page CSS bundles for efficient styling
• Built-in syntax highlighting
• Draft post support
• Automated next/previous links for blog posts
• Generated tag pages and sitemap
• Atom and JSON feeds

Installation Steps

1. Create a new directory for your blog:

   mkdir my-blog-name
   cd my-blog-name
   

2. Clone the repository:

   git clone https://github.com/11ty/eleventy-base-blog.git .
   

3. Install dependencies:

   npm install
   

4. Run Eleventy:

   • For production build:

     npx @11ty/eleventy
     

   • For development with local server:

     npx @11ty/eleventy --serve
     

Usage Instructions

1. Customize site options and metadata:

   • Review and modify eleventy.config.js and _data/metadata.js

2. Create blog posts:

   • Add Markdown files to the content/blog/ directory
   • Use draft: true in front matter to mark posts as drafts

3. Customize pages:

   • Edit existing pages in the content/ directory
   • Create new pages as needed

4. Add images:

   • Use the {% image %} shortcode for optimized images
   • Place images in the same directory as your content for easy reference

5. Customize navigation:

   • Use the eleventyNavigation key in front matter to add pages to the main navigation

6. Customize styles:

   • Modify CSS in the public/css/ directory

7. Build for production:

   npx @11ty/eleventy
   

Important Notes

1. The project uses a zero-JavaScript approach for optimal performance.

2. Content is exclusively pre-rendered, making it a true static site.

3. URLs are decoupled from the file system structure, allowing for flexible content organization.

4. The project achieves high performance scores out of the box, with a perfect Lighthouse score.

5. Image optimization is built-in, supporting modern formats and providing responsive image markup.

6. Draft posts are only included during development (--serve or --watch) and excluded from production builds.

7. The public folder contents are copied directly to the output folder.

8. The project includes three main layouts: base, home, and post. Customize these in the _includes/layouts/ directory.

9. Content Security Policy (CSP) considerations are provided if your site enforces CSP.

10. The project is actively maintained and can be easily deployed to various platforms like Netlify, Vercel, and GitHub Pages.