An 11ty starter using Parcel.js, image optimization and more
MIT License
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:
html-minifier
eleventy-img
shortcodeeleventy-plugin-gen-favicons
eleventy-plugin-broken-links
eslint
and formatting with prettier
dev
and build
npm scriptsyarn
dependencies and built outputgit clone
the repo locallyyarn
to install dependenciesyarn start
to start local developmentyarn build
to build for productionsitemeta.json
file in src/_data
and add your details
src/img
directorysitemeta.json
../src/img/favicon.svg
)There are some useful shortcodes out of the box.
image
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] %}
ogimage
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.