Skip to content
/ eleventy-base-blog Public template

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

License

Notifications You must be signed in to change notification settings

11ty/eleventy-base-blog

Folders and files

NameName
Last commit message
Last commit date

Latest commit

9baac5c · Feb 5, 2025
Oct 3, 2024
Feb 5, 2025
Sep 24, 2024
Jan 22, 2025
Feb 5, 2025
Jan 30, 2025
Jan 23, 2023
Feb 12, 2024
Jun 29, 2022
Aug 4, 2024
Nov 15, 2024
Feb 5, 2025
Jan 14, 2025
Sep 11, 2024
Feb 5, 2025
Sep 27, 2024

Repository files navigation

eleventy-base-blog v9

A starter repository showing how to build a blog with the Eleventy site generator (using the v3.0 release).

Getting Started

  1. Make a directory and navigate to it:
mkdir my-blog-name
cd my-blog-name
  1. Clone this Repository
git clone https://github.com/11ty/eleventy-base-blog.git .

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

  1. Install dependencies
npm install
  1. Run Eleventy

Generate a production-ready build to the _site folder:

npx @11ty/eleventy

Or build and host on a local development server:

npx @11ty/eleventy --serve

Or you can run debug mode to see all the internals.

Features

  • Using Eleventy v3 with zero-JavaScript output.
  • 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
  • Generated Pages

Demos

Deploy this to your own site

Deploy this Eleventy site in just a few clicks on these services:

Implementation Notes

  • content/about/index.md is an example of a content page.
  • content/blog/ has the blog posts but really they can live in any directory. They need only the posts tag to be included in the blog posts collection.
  • Use the eleventyNavigation key (via the Eleventy Navigation plugin) in your front matter to add a template to the top level site navigation. This is in use on content/index.njk and content/about/index.md.
  • Content can be in any template format (blog posts needn’t exclusively be markdown, for example). Configure your project’s supported templates in eleventy.config.js -> templateFormats.
  • The public folder in your input directory will be copied to the output folder (via addPassthroughCopy in the eleventy.config.js file). This means ./public/css/* will live at ./_site/css/* after your build completes.
  • This project uses three Eleventy Layouts:
    • _includes/layouts/base.njk: the top level HTML structure
    • _includes/layouts/home.njk: the home page template (wrapped into base.njk)
    • _includes/layouts/post.njk: the blog post template (wrapped into base.njk)
  • _includes/postslist.njk is a Nunjucks include and is a reusable component used to display a list of all the posts. content/index.njk has an example of how to use it.

Content Security Policy

If your site enforces a Content Security Policy (as public-facing sites should), you have a few choices (pick one):

  1. In base.njk, remove <style>{% getBundle "css" %}</style> and uncomment <link rel="stylesheet" href="{% getBundleFileUrl "css" %}">
  2. Configure the server with the CSP directive style-src: 'unsafe-inline' (less secure).