Lesson 1: Intro

Welcome aboard. Let’s take a look at what we’re making in this course and what you’ll need to get started.

Welcome to Learn Eleventy From Scratch! This course is designed to give you a really solid understanding of Eleventy—even if you’ve never used it before. Over the course of 31 lessons in 4 modules, you’ll start with a completely empty directory and finish with a fancy, fully-fledged website.

Not only will you have solid skills in Eleventy at the end of this course—you’ll also have skills in semantic HTML, progressive CSS, user experience, accessibility, progressive enhancement and performance. It’s an all-in-one course on building a badass website!

In fact, why explain what we’re building when I can just show you?

See the demo site

Pretty neat, huh? Let’s get cracking.

What is Eleventy? permalink

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 permalink

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 is more than OK. It lives in Applications > Utilities > Terminal
  2. On Windows, I recommend using a terminal emulator like Hyper
  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.

Extra setup for Windows users permalink

Unfortunately, Windows can be a bit problematic with some of the gulp stuff that we cover later in the course, so my recommendation is to use WSL (ideally WSL 2), which is available for free, as part of the Windows Operating system.

WSL allows you to run proper Linux within Windows, natively. This makes running the node-based aspects of this course much easier.

If you haven’t got WSL installed, this fantastic Video gives you a thorough, step-by-step guide and I strongly recommend that you run through it first. I also recommend reading this fantastic, in-depth article from someone who set up WSL for this course.

Starting from Scratch permalink

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.

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

Code language
bash
mkdir eleventy-from-scratch

This creates an empty folder that will be the base of our project. Now we need to get in there, so use this command:

Code language
bash
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 permalink

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:

Code language
text
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 permalink

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:

Code language
text
# Misc
*.log
npm-debug.*
*.scssc
*.swp
.DS_Store
Thumbs.db
.sass-cache
.env
.cache

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

Wrapping up permalink

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!