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.