Eleventy Project Setup

Steps to Set Up an Eleventy Project

Eleventy is a static site generator (SSG). The following is an opinionated setup; it goes a little bit beyond the basics of installing Eleventy.

1 — Create a directory for the project

In terminal, we can use mkdir project-directory-name to make this happen.

2 — Make sure Node.js and npm are installed

We can check this in terminal using node -v and npm -v. These check for the version of each, and can also be used like this: node --version. If either are not installed, they won't have a version to display.

3 — In that directory, create a .eleventy.js file

This is arguably the most important file for Eleventy. It tells Eleventy what to do when generating the site. Don't forget the dot at the beginning of the filename, otherwise it wont work like we expect.

Here's some code for the file:

module.exports = config => {
    return {
        markdownTemplateEngine: 'njk',
        dataTemplateEngine: 'njk',
        htmlTemplateEngine: 'njk',
        dir: {
            input: 'src',
            output: 'dist'
        }
    };
};

Note

The three lines with 'njk' make it possible for us to use Nunjucks in our files. Eleventy supports Nunjucks, but if we didn't include these three lines we'd have to use .njk files. Including this here allows us to use Nunjucks within our .html and .mk files.

This is one of those 'opinionated' parts of this setup. We don't need those three lines to make Eleventy work—it's a personal preference thing.

Also, we can call the input and output folders whatever we want.

4 — In our directory, create a package.json file

We do this by initialising npm in the terminal using npm init -y.

5 — In our directory, install Eleventy

We do this in terminal using npm install @11ty/eleventy.

6 — Make our lives easier by adding a start script to package.json

In the package.json file, add the following to the 'scripts' list:

"start": "npx eleventy --serve"

This just makes it so we can type npm start in the terminal to run Eleventy, instead of having to type out npx eleventy --serve every time. This isn't a big deal now, but once we add things like Gulp, we will make npm start do much more than just start Eleventy.