This is my 11ty starter template, with some useful plugins, scripts, and so on out of the box.
This starter / template doesn't aim to be a total one-stop-shop, but it does attempt to include an array of common and useful features out-of-the-box:
- Nunjucks (but you could easily modify it to use Liquid or something else)
- bundled and minified (S)CSS and JS, using Parcel.js
- minimized HTML in production, using
html-minifier
- image optimization with
eleventy-img
shortcode - generated OpenGraph meta and image tags
- optimized favicons using
eleventy-plugin-gen-favicons
- checking for broken links using
eleventy-plugin-broken-links
- code linting with
eslint
and formatting withprettier
- convenient
dev
andbuild
npm scripts - GitHub action for checking Lighthouse scores after build, including
caching of
yarn
dependencies and built output - dependabot pull requests for dependency updates
- Click "Use this template" above
git clone
the repo locallyyarn
to install dependenciesyarn start
to start local developmentyarn build
to build for production
- Edit the
sitemeta.json
file insrc/_data
and add your details- title
- url (production)
- twitter handle
- author
- description
- favicon
- Place your favicon in the
src/img
directory - Make sure the correct filename is specified in the
sitemeta.json
. (This filename should be relative to the project directory, e.g../src/img/favicon.svg
)
There are some useful shortcodes out of the box.
This is used for local or remote image optimiztion with eleventy-img
.
The syntax is:
{% image "src", "alt" %}
NOTE: src
is relative to ./src/img
. All images should be placed in this
directory. Sub-directories are allowed, but you must specify them when using
the image
shortcode.
E.g.:
{% image "foo/bar.jpg", "alt" %}
... will source an image located at ./src/img/foo/bar.jpg
.
All images are outputted to dist/img
, regardless of which sub-directory they
are in, if any.
Optionally, you can specify further options, including:
Option | Default | Accepted | Description |
---|---|---|---|
formats |
['webp', 'avif', 'jpg'] |
Array of formats | Specify which formats to output |
loading |
"lazy" |
"lazy" or "eager" |
whether to use lazy loading |
sizes |
["100vw"] |
Array of media query sizes | Specify sizes of media query sizes used on screen |
widths |
[600, 1200, 1800, 2400, 4200, null] |
array of pixel sizes | Sizes to output |
You can use any or all of the options by passing them after the required src
and alt
values:
{% image "example.jpg", "An example image", loading="eager", widths=[600] %}
This shortcode is used to add the OpenGraph image meta tags.
{% ogimage "src", "alt" %}
This feature can be used via variables in frontmatter or in .njk
templates:
---
layout: 'layouts/example.njk'
og_image:
src: 'example.jpg'
alt: 'The alt text'
---
width
and format
can be set in 11ty/constants/settings.js
.
OpenGraph meta tags are set using the ogimage
shortcode (as above), and by
setting the title
and description
variables in frontmatter or elsewhere.
---
layout: foo.njk
title: "Page title"
description: "An example page"
og_image:
src: example.jpg
alt: "the image alt"
---
This is an example page with OG meta tags.