eleventeen 🌈📓
Eleventeen is an evolving variation of Eleventy Base Blog, a blueprint to start 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 👩🏻🎤🎶
Eleventeen boldly embraced the alpha release of Eleventy v3 canary ahead of its upstream source in PR #8 / v9.0.0-alpha.5, while Eleventy Base Blog remains on the stable v2 release as of 8 July 2024.
- Edit
_data/metadata.js
with the information for your site. - (Optional) Review
eleventy.config.js
build configuration
In addition to Base Blog’s killer features and Eleventy 3’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 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.”
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.
v9.2.3-alpha.5 added a mono
option to _data/metadata.js
that disables Rainbow Mode if you set it to true
. mono
is false
by default, on purpose, because it beats making people set an option called rainbow
to false
.
You can see mono 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
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 ⭐️🐙
If you get stuck, try the Eleventy Getting Started Guide.
- Make a directory and navigate to it.
mkdir my-blog-name
cd my-blog-name
- 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.
- Install dependencies
npm install
- 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.
- Using Eleventy
v2.03.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
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.
- 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 withsrcset
and optionalsizes
- 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
- Draft posts: use
- 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
- 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 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.
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 incontent/blog/
. They only need theposts
tag to be included in the blog posts collection, seecontent/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 oncontent/index.njk
andcontent/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 (viaaddPassthroughCopy
in theeleventy.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 intobase.njk
)_includes/layouts/post.njk
: the blog post template (wrapped intobase.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.
If your site enforces a Content Security Policy (as public-facing sites should), you should pick one:
- In
base.njk
, remove<style>{% getBundle "css" %}</style>
and uncomment<link rel="stylesheet" href="{% getBundleFileUrl "css" %}">
- Configure the server with the CSP directive
style-src: 'unsafe-inline'
(less secure).
- 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