• Overview
• Features
• Getting Started
• Essential next steps
• Usage
  • Shortcodes
  • OpenGraph

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 with prettier
• convenient dev and build npm scripts
• GitHub action for checking Lighthouse scores after build, including caching of yarn dependencies and built output
• dependabot pull requests for dependency updates

1. Click "Use this template" above
2. git clone the repo locally
3. yarn to install dependencies
4. yarn start to start local development
5. yarn build to build for production

1. Edit the sitemeta.json file in src/_data and add your details
   • title
   • url (production)
   • twitter handle
   • author
   • description
   • favicon
2. Place your favicon in the src/img directory
3. 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:

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.