Intro to Jumpstart#
This jumpstart is intended to be just enough to be a functional site/blog using 11ty, and also to introduce essential 11ty features.
Review the "Quick Start" on the home page for how to get this starter up and running for your project.
Hi, I'm Stephanie Eckles - @5t3ph on Twitter, Github, CodePen, and DEV. You may know me as the author of ModernCSS.dev or the creator of StyleStage.dev. I can also be found on egghead as an instructor.
Check out my extended collection of Eleventy resources available on 11ty.Rocks!
Global Site Data and .env#
As noted in the Quick Start, there are global site data variables in
url - should remain unchanged, reads from the single expected
.env value of
siteName - your "brand" if you will, appended to the
<title> tag, shown in the
sitenav, displayed in the "hero" for the
home layout, in the footer by the copyright, and as the identifier throughout the RSS feed
siteDescription - used in the "description" meta tag, and below the
siteName on the
authorName - Used in the RSS feed, intended to be your full name
twitterUsername - without the "@", this value is used for the Twitter meta tags, and for the URL of the icon link in the footer
.env-sample for the single expected value of
URL which should be set to your localhost. The sample uses the default 11ty port, so you can simply rename the file to
.env if you haven't changed the port.
URL value is then available via the global data described previously, and can be used in templates with
meta.url. You can see this used for the RSS feed and sitemap to create the absolute URLs.
Template Languages Used#
Page templates are created as Nunjucks (
.njk), and feature are added that expect Markdown for most page content.
The home page -
src/index.njk - is set to process first as Markdown followed by Nunjucks. This allows mixing HTML with Markdown, with benefits being code syntax highlighting and ability to include classes on HTML elements. This functionality is provided by the
templateEngineOverride: md, njk in the frontmatter.
Review the list of available templating languages in the 11ty docs.
Layout Hierarchy and Features#
There are two layouts and one partial included.
New in v1.1.0 - layouts are customized to be located in
src/index.njk template chains to the
base layout and includes a loop that will create "cards" for everything in
There are only two fields expected:
title - essentially required, by default is used in the page
<title>, and in the layout "hero".
description - optional, by default appears below the title for the
page template and is used as for the "description" meta tag.
If you want typed front matter, consider my plugin for collection schemas
The default setup expects content - using any template language - within
pages.json in that directory includes a
permalink setting so that the file name is used directly to prevent 'pages' being the base of the URL.
You can override permalinks per file.
.eleventy.js config, there are included "pass-throughs" for an
img/ directory as well as
You can replace the included favicon, and create an
img directory or remove the
addPassthroughCopy if you do not have need of images.
img directory and keeping the pass-through directive will make images available at
/img/[image-file-path] relative to the site root.
prettier config is included, with the only update being
As of v2.0.0, stylelint was removed.
Review the styling documentation for the included minimal Sass framework, particularly the theme variables, to quickly customize the starter.
The only notable differences are:
sitenav - adjust the styles for the navigation header that appears on pages
tdbc-anchor - styles for the
# anchor that appears next to page headings (or turn that feature off) can be adjusted in
article-scoped styling for typography as it appears on
- A theme for the
prism syntax highlighting for code blocks. You can adjust or replace the theme in
Additionally, the Sass in this starter is processed using LightningCSS by way of my plugin: @11tyrocks/eleventy-plugin-sass-lightningcss. This affords you access to some super modern CSS features, if you choose to use them.
The default font is Baloo 2 and is locally hosted with files in
fonts/. If you swap to a different font, be sure to remove the font files as well as the
@font-face rules at the top of
sass/_fonts.scss, and update the
$tdbc-font-family Sass variable.
Anchor links next to headings throughout Markdown content are generated by an add-on plugin for
This feature can be adjusted or removed in the
.eleventy.js config file.
sitemap.xml is generated from all available content.
To exclude non-page or non-public content from the sitemap, include
eleventyExcludeFromCollections: true in frontmatter, or create a custom filter.
An RSS feed is included, and output at
If publishing from Netlify, the included
netlify.toml file will create a redirect so that the feed becomes available at
Prism Syntax Highlighting#
Syntax highlighting of inline or code blocks found within Markdown content is provided by Prism via
You can change the theme used in
Or, remove the plugin if you are not in need of code highlighting.
.eleventy.js Config Features#
- Input directory:
- Output directory:
- Layout directory:
markdownLibrary is extended to add the
markdownItAnchor plugin for anchor links.
Returns the current
YYYY year, used by the footer copyright.
Makes the default
slug function more strict to ensure things like excluding emojis and enforcing lowercase.
If you haven't previously worked with Nunjucks, you will want a syntax highlighting extension: Nunjucks
In addition, you may want to ensure Emmet works on
.njk files by updating/adding the following in the
As noted previously, a
prettier config is included, and you may want to get the
Prettier extension and update your VSCode settings to "Format on Save".
However, to format template files Prettier doesn't recognize like
.njk, you can update the "Language Mode" on the currently open file from "Nunjucks" (or other current templating language) to "HTML" to allow formatting to be applied. Then, flip it back to re-allow the syntax highlighting if needed.
This is located in the VSCode bottom toolbar near the right-hand side and will display the value of the current file's detected language. Click the name to open the selector.