rdwz / eleventy-base-blog

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

eleventy-base-blog v8

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

Getting Started

• Want a more generic/detailed getting started guide?

1. Make a directory and navigate to it:

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

2. 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.

3. Install dependencies

npm install

4. 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 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
  • All URLs are decoupled from the content’s location on the file system.
  • Configure templates via the Eleventy Data Cascade
• Performance focused: four-hundos Lighthouse score out of the box!
  • View the Lighthouse report for the latest build courtesy of the Netlify Lighthouse plugin.
  • 0 Cumulative Layout Shift
  • 0ms Total Blocking Time
• Local development live reload provided by Eleventy Dev Server.
• 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.
  • View the Image plugin source code
• Per page CSS bundles via eleventy-plugin-bundle.
• Built-in syntax highlighter (zero-JavaScript output).
• Blog Posts
  • Draft posts: use draft: true to mark a blog post as a draft. Drafts are only included during --serve/--watch and are excluded from full builds. View the Drafts plugin source code.
  • 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 (View on the Demo)
  • Content not found (404) page

Demos

• Netlify
• GitHub Pages
• Remix on Glitch
• Cloudflare Pages

Deploy this to your own site

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

• Get your own Eleventy web site on Netlify
• If you run Eleventy locally you can drag your _site folder to drop.netlify.com to upload it without using git.
• Get your own Eleventy web site on Vercel
• Try it out on Stackblitz
• Read more about Deploying an Eleventy project to the web.

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.
• Provides two content feeds:
  • content/feed/feed.njk
  • content/feed/json.njk
• 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).

eleventy-base-blog's Issues

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Pending Approval

These branches will be created by Renovate only once you click their checkbox below.

• Update dependency @11ty/eleventy-img to v4
• Update dependency @11ty/eleventy-plugin-bundle to v2
• 🔐 Create all pending approval PRs at once 🔐

Detected dependencies

npm

package.json

• @11ty/eleventy ^2.0.1
• @11ty/eleventy-img ^3.1.1
• @11ty/eleventy-navigation ^0.3.5
• @11ty/eleventy-plugin-bundle ^1.0.4
• @11ty/eleventy-plugin-rss ^1.2.0
• @11ty/eleventy-plugin-syntaxhighlight ^5.0.0
• luxon ^3.3.0
• markdown-it-anchor ^8.6.7
• node >=14

nvm

.nvmrc

• node 20

---

• Check this box to trigger a request for Renovate to run again on this repository