eleventeen 🌈📓

Eleventeen is an evolving variation of Eleventy Base Blog, a starter repository showing how to build a blog with Eleventy (11ty), the award-winning open source site generator created and maintained by Zach Leatherman, who blogs about Eleventy often.

Ricky de Laveaga builds eleventeen on GitHub for web projects by Famebot and Artist Activist. Famebot is the micro movie studio Ricky runs with Laramie Dennis, and Artist Activist is a creative agency advocating for positive change Ricky co-founded with Clifford J. Tasner.

The name eleventeen is an homage to the Daisy Chainsaw album 👩🏻‍🎤🎶

Rainbow Mode™

In addition to Eleventy Base Blog’s killer features and our upgraded Eleventy v3 beta’s bundler-free ESM support, eleventeen sports a novel new visual experience we call Rainbow Mode, powered by Chromagen, the color scheme generator we publish on GitHub under the Famebot organization. Our homegrown Rainbow Mode is wholly distinct from and not to be confused with Emacs rainbow-mode, which “sets background color to strings that match color names.”

prefers-color-scheme: rainbow

We posit a third color scheme preference in addition to light and dark “modes,” rainbow. And here in the world of eleventeen, rainbow is the default. But we acknowledge not all sites are a match for Rainbow Mode, and still want those sites to enjoy the rest of what eleventeen has to offer.

Mono Mode 📓🏁

Setting the mono option in _data/metadata.js to true disables Rainbow Mode. mono is false by default, on purpose, because it beats making people set an option called rainbow to false.

Show Me the Mono

You can see Mono Mode enabled at mono.eleventeen.blog

Try toggling light and dark mode using devtools, there are links to how at the bottom to chromagen.io

The rainbow eleventeen demo still lives (happily ever after) at eleventeen.blog

Other Additions to and Divergences from Eleventy Base Blog

Rejoicing and rainbows aside, eleventeen also adds post images, and makes some more subtle adjustments to Eleventy Base Blog. There are various changes in public/css/index.css, and in _includes/postslist.njk:

<ol reversed class="postlist" style="counter-reset: start-from {{ (postslistCounter or postslist.length) + 1 }}">

becomes:

<ul reversed class="postlist">

The example About page content/about/index.md tells the story as well.

Please remember to star eleventeen on GitHub ⭐️🐙

Getting Started

If you get stuck, try the Eleventy Getting Started Guide.

1. Make a directory and navigate to it.

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

2. Clone this Repository to your new directory.

git clone https://github.com/rdela/eleventeen.git .

Edit _data/metadata.js to configure the site’s details.

Optional: Review eleventy.config.js to customize the Eleventy build configuration.

3. Install dependencies

npm install

4. Run Eleventy

Develop:

npm run d

Or

npm run start

Generate a production-ready build:

npm run build

Or

npx @11ty/eleventy

Or build and host on a local development server:

npx @11ty/eleventy --serve

You can run debug mode to see all the internals.

Key Features

• Using Eleventy v2.0 3.0 alpha 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 eleventeen build courtesy of the Netlify Lighthouse plugin.
  • 0 Cumulative Layout Shift
  • 0ms Total Blocking Time

We Work Hard for These Hundies

Like Eleventy Base Blog, eleventeen scores a perfect 400 on Lighthouse audits, 100 in accessibility, best-practices, performance, and SEO.

If you deploy eleventeen to Netlify as is with its included netlify.toml build config file, eleventeen expects netlify-plugin-lighthouse to be installed at v6 or higher, so it can monitor Lighthouse audit performance thresholds in the onPostBuild event. v5 changed @netlify/plugin-lighthouse’s default behavior to running during the onSuccess build step in PR #588. Running the plugin in onPostBuild now requires fail_deploy_on_score_thresholds to be set to true in netlify.toml.

If the plugin is not installed or installed at a version older than 5.0.0, particularly 4.1.1 or lower, you will get a “failed due to plugin error” during the build. The deploy log shows “Deploy failed due to an error in @netlify/plugin-lighthouse plugin,” and more specifically:

Plugin "@netlify/plugin-lighthouse" invalid/unknown input(s) "fail_deploy_on_score_thresholds"

You can install the plugin through the Netlify UI: “from the Integrations Hub, the Plugins directory, or through this direct installation link.” One tricky part of installing it through the UI is making sure you are on version 6 or higher. v6 is the latest version as of 2024-05-01. To check you can visit your site’s Enabled integrations and select Options > Change version to make sure you are on a major version greater than or equal to 6.0.0.

Alternatively, you can install the plugin manually with:

npm i -D @netlify/plugin-lighthouse

Some versions below v6 can exhibit an issue where the presence of a x-robots-tag: noindex header on deploy previews lowers the SEO score to 92, but even then production builds still score 100. The solution is to update the plugin, and this is what led to discovering the issues detailed here, in PR #16 / commit 5172fb3, and on Mastodon. Note netlify-plugin-lighthouse is now in maintenance(-only) mode.

More Features

• 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

• eleventeen on Netlify, Rainbow Mode (default): https://eleventeen.blog or https://eleventeen.netlify.app (Latest Lighthouse report)
• eleventeen on Netlify, Mono Mode: https://mono.eleventeen.blog (Latest Lighthouse report)
• eleventy-base-blog on Netlify
• eleventy-base-blog on GitHub Pages
• Remix eleventy-base-blog on Glitch
• eleventy-base-blog on Cloudflare Pages

Deploy This to Your Own Site

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

• Deploy eleventeen to Netlify
• Deploy eleventeen to Vercel
• Look in .github/workflows/gh-pages.yml.sample for information on Deploying to GitHub Pages.
• 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/archive/ has the blog posts but really they can live in any directory, in eleventy-base-blog they are in content/blog/. They only need the posts tag to be included in the blog posts collection, see content/archive/archive.11tydata.js.
• 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 should 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).

Other Eleventy Resources

• The 11ty Bundle, an ever-expanding collection of Eleventy news and resources curated by Bob Monsour
• Eleventy Community Discord Server
• Eleventy YouTube channel
• CloudCannon YouTube channel