eleventy-base-blog v8

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

Features

Using Eleventy v2.0 with zero-JavaScript output.
Content is entirely pre-rendered (this is a static site).
Four-hundos Lighthouse score out of the box!
Easily deploy to various hosting providers.
Live reload provided by Eleventy Dev Server.
Content-driven hierarchical navigation
Image optimization (including modern formats AVIF and WebP) via the {% image %} shortcode (images can be co-located with posts) (with zero-JavaScript output).
- Prefers <img> 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"
Built-in syntax highlighter (with zero-JavaScript output).
Blog post features
- 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.
- Automated next/previous links on blog posts.
- Accessible deep links to headings
Easily deploy to a subfolder without changing any content
Easily configure templates via the Eleventy Data Cascade
Output URLs are independent of content’s location on the file system.
Generated:
1. feeds for Atom and JSON
2. sitemap.xml
3. Tag pages (demo)
4. Content not found (404) page

Demos

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!
Get your own Eleventy web site on Vercel
Read more about Deploying an Eleventy project to the web.

Getting Started

1. Clone this Repository

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

2. Navigate to the directory

cd my-blog-name

Specifically have a look at eleventy.config.js to see if you want to configure any Eleventy options differently.

3. Install dependencies

npm install

4. Edit `_data/metadata.json`

5. Run Eleventy

Generate a production-ready build:

npx @11ty/eleventy

Or build and host locally on a local development server:

npx @11ty/eleventy --serve

Or in debug mode to see all the internals:

# Mac OS/Linux/etc
DEBUG=Eleventy* npx @11ty/eleventy

# Windows
set DEBUG=Eleventy* & npx @11ty/eleventy

# Windows (Powershell in VS Code)
$env:DEBUG="Eleventy*"; npx @11ty/eleventy

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 post 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.
The blog post feed template is in feed/feed.njk. This feed also uses the global data file at _data/metadata.json.
This project uses three 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. index.njk has an example of how to use it.

5.2 KiB Raw Blame History Unescape Escape