Learn the basics of Eleventy in this six-part tutorial series.
Welcome to this Eleventy for Beginners tutorial. In this series we’ll go through the basics of Eleventy from learning how to install the framework, creating layouts, pages, and blog posts, and an introduction to using data files. We’ll build everything from scratch and explain eleventy concepts as we go so no previous eleventy knowledge is necessary. By the end of this tutorial you’ll be able to build your very own Eleventy website.
Let’s get into it!
Eleventy is a static site generator. It’s a piece of software that takes a directory of source files — content Markdown files, layouts, images, and CSS — and builds an entirely static website.
You may have heard of some of the high profile websites using Eleventy — EsLint, Foursquare, Web.dev, and V8.dev to name a few.
If both return a version and node is at least version 8.0.0, you’re good to go. If not, head over to the Node.js/npm installation instructions.
In your terminal, create a directory for where your Eleventy site will live:
Next we need to add a
package.json to contain the dependencies for our site. Fortunately, npm can do this for us:
npm init -y
Now we can install Eleventy and add it as a development dependency to our
npm install --save-dev @11ty/eleventy
Let’s check that all went to plan:
npx @11ty/eleventy --version
Running this command should output the version number of Eleventy installed. If this command errored, refer to the Eleventy documentation or get help from the community on the 11ty Discord.
The directory structure of an Eleventy site is entirely configurable. As you gain confidence in the framework you may want to tweak the structure for your own preferences.
For this tutorial, we’ll be using the default directory structure which I’ll explain below. We’ll be creating these directories and files over the course of this series, so you don’t need to understand them at this stage.
.jsfiles (which can fetch data at build time) that can be accessed across the site.
In our next lesson, we’ll learn the basics of Eleventy layouts.
Eleventy Beginner Tutorial Series