Lesson 1: Introduction

What is Eleventy?

It would be silly of me to not explain what Eleventy is and why we’re learning it today.

Eleventy is a static site generator. It’s a smart tool that does all the hard work up front by taking content from either markdown files, JSON files or remote data sources (and much more). It then smooshes them together, providing us with an API to grab that content and build templates. It’s sort of like working on a dynamic CMS site, but instead of relying on the server to work hard on each request, we do all of that up front instead.

The end result is a static website, made up of mainly HTML pages in folders. These folders and HTML pages can be hosted anywhere that allows you to put HTML pages on the internet. This makes static site generators (referred to as SSGs throughout the rest of the course) incredibly useful.

Don’t be fooled into thinking that SSGs like Eleventy limit what we can do, though. SSGs can create incredibly complex content structures and in turn, complex websites. But importantly, what they give us at the end is something very light and very fast. We get all of that performance goodness for the user (which is the most important bit), and a lovely developer experience for ourselves. That, in my books, is a win-win.

Still confused about what Eleventy is? Don’t sweat. I promise, by the end of this course, you’ll be completely confident in building your own projects with Eleventy, from scratch.

Before we start

Before we start building, let’s make sure you have the right tools for the job.

If you already have a terminal and Node.js running, you can skip this section.

You can use whatever text editor or IDE that you want to use for this course. You must however, make sure that you have a terminal installed:

1. On macOS, the default terminal app works great for our purposes. It lives in Applications > Utilities > Terminal, or you can press ⌘ + Space and search for "terminal" in Spotlight. You could also use popular emulators such as iTerm2 or Hyper if you prefer.
2. On Windows, Microsoft's own modern Windows Terminal is a fine choice.
3. Linux users: I don’t need to tell you because you’re more than likely using a terminal already!

Now that you have a terminal installed, we need to make sure you have Node.js installed. Luckily, you can find handy installers on the Node.js website. I recommend using the LTS version of Node.js.

Starting from scratch

The first thing we need to do is create a new folder. We can do this with our terminal. First of all, open your terminal and make sure you are in a directory that you want to work in.

To change directory, enter cd followed by the name of the directory you want to go to.

cd ~/Documents/Projects

Once you’re in the directory that you want to work in, run the following in your terminal:

mkdir eleventy-from-scratch

This creates an empty folder that will be the base of our project called eleventy-from-scratch. Now we need to switch into that folder:

cd eleventy-from-scratch

These are some nice basic terminal commands which will hopefully make you feel pretty cool if you haven’t used terminal before. We’re going to use the terminal a lot in this course, but don’t worry, I’ll explain what’s happening as we go.

Getting some starter files

This website is going to need some content. We’ll add all the important stuff as we go, but there are some blog posts, images and other content that we’ll add to our working folder now to get started.

Download the starter files.

Once you have the starter files downloaded unzip the folder and paste the entire contents into your eleventy-from-scratch folder.

If you haven’t already, open your eleventy-from-scratch folder in your text editor now. The folder structure should look like this:

src
├── images
├── people
├── posts
└── work

Inside each of those folders is content and content assets for our site. We don’t want to be wasting valuable time inputting those manually during this course. We’ll be looking into how the content is all intrinsically linked and how each performs a crucial part in this site’s content system.

Dotfiles

Dotfiles are pretty handy so let’s add some.

Create a file named .gitignore in your eleventy-from-scratch folder and add the following to it:

# Misc
*.log
npm-debug.*
*.scssc
*.swp
.DS_Store
.sass-cache
.env
.cache

# Node modules and output
node_modules
dist
src/_includes/css

Wrapping up

Now we’ve done the boring bit, we’re all set up and ready to dive in. Pretty straightforward, right?

Right, now we’re good to go. Let’s dive in!