Getting Started with Eleventy

Install Node and npm with Homebrew using brew install node

mkdir eleventy-sample
cd eleventy-sample

npm init -y

npm install --save-dev @11ty/eleventy

npx @11ty/eleventy --serve --watch

http://localhost:8080/

For Netlify, the minimum deploy code is index.html, package.json, package-lock.json and .gitignore. The .gitignore should include /_site, /node_modules and .DS_Store for us Mac users.

When configuring Netlify, the Build command is just eleventy as it is installed globally on the Netlify servers.

Differences with Jekyll

  • Variables share the same namespace so the order of precedence is important
    • Lose the site.data from datafile references
    • Don't prefix namespace in variables like ``
  • You can't use variables in include paths like {% include {{ season }}/content/teams.html %}
  • YAML datafile support isn't standard

Add support for YAML with npm install js-yaml --save-dev

Update your .eleventy.js file.

const yaml = require( 'js-yaml' );

module.exports = function( eleventyConfig ) {
	eleventyConfig.addDataExtension( 'yml', contents => yaml.safeLoad( contents ) );
};

Eleventy looks for layouts in the _includes folder by default. To add support for the _layouts folder add the following to your .eleventy.js in the web root of your site.

module.exports = function( eleventyConfig ) {
	return {
		dir: {
			layouts: '_layouts'
		}
	};
};

To distingush between your production and development environments, use a .env environment file placed in the web root of your site. Install the dotenv package with npm install dotenv from the command line. If you code to assume that your site is being rendered from production by default, you can set development variable names in the _date/site.js file.

let baseURL = 'https://www.richardherbert.co.uk/';

require( 'dotenv' ).config();

switch ( process.env.ELEVENTY_ENV ) {
	case 'development':
		baseURL = 'http://localhost:8080/';
	break;
}

module.exports = {
	title: 'Richard Herbert'
	,description: 'I help people to get a computer to do what they want it to do'
	,author: 'Richard Herbert'
	,baseURL: baseURL
	,twitter_username: 'richardherbert'
	,github_username: 'richardherbert'
}

Then you can use <base href="{{ site.baseURL }}"> in your HTML <head></head> section.

Also you can add site secrets, like a Google Maps API key, to the .env file add them to production using Netlify secrets. Remember to add .env to your Git ignore list.