Using 711ty

  • 3 minutes to read

There’s a little bit of housekeeping to do in order to make this template your own.

Update configuration data

711ty uses a config file to store project specific values. This file can be found in .seven11ty.js. You’ll want to update the following values to suit your project:

module.exports = {
	// Directory structure
	dir: {
		input: 'src',
		output: 'www',
		includes: 'views',
		layouts: 'views/layouts',
		data: 'data',
		// ⬇ only 711ty uses these
		assets: 'assets',
		styles: 'assets/styles',
		images: 'assets/images',
	},

	// Control which files Eleventy will process
	// e.g.: *.md, *.njk, *.html, *.liquid
	templateFormats: ['md', 'njk'],

	// Pre-process files with: (default: `liquid`)
	templateEngine: 'njk',

	// Image formats and quality to generate
	// Pass `same` to generate responsive images in the input format
	// Documentation: https://sharp.pixelplumbing.com/api-output
	imageFormats: {
		// Uncomment AVIF for smaller images but longer build times
		// avif: 30,
		webp: 60,
		same: 75,
	},
};

Update template metadata

Eleventy uses global data files to conveniently expose data to every template in an Eleventy project. In this template global data files can be found under src/data.

This template uses site.js to pull in useful default global values. These of course can be overridden in your content frontmatter thanks to Eleventys data cascade.

// Required. The name of your project.
title: '711ty, an Eleventy Starter',

// Required. A brief description of your project.
description: 'A mildly opinionated Eleventy starter.',

// Required. A short name used exclusively in webmanifest.njk. Keep it under 12 characters to minimize the possibility of truncation. Can be safely deleted if you delete webmanifest.njk.
shortName: '711ty',

// Required. SEO indexing behaviour.
robots: 'index, follow',

// Required. Used exclusively in webmanifest.njk. This sometimes affects how an OS displays your site. Can be safely deleted if you delete webmanifest.njk.
themeColor: '#00e2e6',

// Required. Used exclusively in webmanifest.njk. Recommend using the same value as body background color in your CSS. Can be safely deleted if you delete webmanifest.njk.
backgroundColor: '#ffffff',

// Required. lang attribute for the <html> tag. Used by screen readers and search engines to determine the language of a page. Can be safely deleted if you delete webmanifest.njk.
lang: 'en',

// Optional. locale attribute for the <html> tag. Used by screen readers and search engines to determine the language of a page. Can be safely deleted if you delete webmanifest.njk.
locale: 'en_US',

// Optional. Delete block if not used. Author values for project.
author: {
	name: "Author Name",
	email: "author@email.com",
	url: 'https://example.com/about-me/',
	github: 'https://github.com/your-name-here',
	handle: 'your-name-here',
},

// Optional. Pagination values for project.
paginate: 6,

// Optional. Delete block if you don't require link tags related to your idenity. Duplicate as many objects as you need!
identity: [
	{
		rel: 'me',
		url: 'URL-GOES-HERE',
	},
	{
		rel: 'pgpkey',
		url: 'URL-GOES-HERE',
	},
],

// Optional. Delete block if you don't require Opengraph.
og: {
	locale: 'en_US',
	type: 'website',
	image: {
		rel: '/og-default.jpg',
		alt: 'Default OG image displayed here',
	},
},

You’ll also need to update development and production urls to your project requirements. These can be found in src/data/env.js:

const devUrl = 'http://localhost:8080';
const prodUrl = 'https://example.com';

Favicons and Opengraph

Favicons

Favicons are stored under src/static/favicons and are automatically passed through to their relevant directories on build. All you need to do is create the images for your project.

Opengraph

A default Opengraph image can be found under src/static and is named og-default.jpg. Much like the favicons all you need to do is create a relevant default image to be used.

You can of course delete this file if you don’t require Opengraph in your project. Please also update ./11ty/passthroughs.js and remove this line:

eleventyConfig.addPassthroughCopy({ "src/static/og-default.jpg": "/og-default.jpg" });

Responsive images

This template uses Eleventy Image to generate responsive images and handles this all in /11ty/shortcodes/. You will want to adapt widths, sizes and formats to suit your projects needs:

const image = async function (src, alt, sizes = '90vw, (min-width: 1280px) 1152px') {
	let metadata = await Image(src, {
		widths: [320, 640, 960, 1280, 1600, 1920],
		formats: ['avif', 'jpeg'],
	});

	let imageAttributes = {
		alt,
		sizes,
		loading: 'lazy',
		decoding: 'async',
	};

	return Image.generateHTML(metadata, imageAttributes);
};

You can of course use this markup to create a new shortcode for other use cases. Be sure to import this in /11ty/shortcodes/index.js though.

And now you’re ready to go!

Previous post → Markdown Demo