# Lesson 1: Intro
Welcome to Learn Eleventy From Scratch! This course is designed to give you a really solid understanding of Eleventy (opens new window)—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?
Pretty neat, huh? Let’s get cracking.
# 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:
- On macOS, the default terminal app is more than OK. It lives in Applications > Utilities > Terminal
- On Windows, I recommend using a terminal emulator like Hyper (opens new window)
- Linux users: I don’t need to tell you because you’re more than likely using a terminal already
TIP
For all platforms, Microsoft Visual Studio Code (opens new window) is a really decent text editor with a built in terminal. It’s also 100% free.
If you’ve never used a terminal before, I strongly recommend using this software to complete this course.
Now that you have a terminal installed, we need to make sure you have Node.js (opens new window) installed. Luckily, you can find handy installers on the Node.js website (opens new window). I recommend using the LTS version of Node.js.
TIP
You can check to see if you already have Node.js installed by running node -v in your terminal. If it shows a version number, you’ve got it, but if it throws an error, you need to go ahead and install it.
If you have a version of Node.js older than version 10, I would recommend that you upgrade. You can download an installer (opens new window) which will replace your current version.
# Extra setup for Windows users
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) (opens new window), which is available for free, as part of the Windows Operating system.
WSL (opens new window) 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 (opens new window) 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 (opens new window) from someone who set up WSL for this course.
# 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.
TIP
I keep all of my projects in one folder called "Projects" which lives in my documents folder.
Every time I open my terminal, I run this command, which takes me there:
cd ~/Documents/Projects
The ~ is a shortcut to the home directory.
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. Now we need to get in there, so use this command:
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.
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
Thumbs.db
.sass-cache
.env
.cache
# Node modules and output
node_modules
dist
src/_includes/css
TIP
When we use a pattern like this: *.log, we’re telling Git to ignore any file that ends with that extension. For example, if I wanted to ignore all JavaScript files, I would add *.js to the .gitignore file. This is all handy for if you decide to use Git while you complete this course.
# Wrapping up
Now we’ve done the boring bit, we’re all set up and ready to dive in. Pretty straightforward, right?
TIP
Last point before we get stuck in to the course.
At the end of each lesson, there will be a link to a ZIP of a snapshot of the course project where it is at the end of the lesson that you’re on.
This means that if something is broken and you don’t know how to fix it: grab that zip archive and replace your project folder with its contents.
Don’t forget to run npm install if you do this though!
Right, now we’re good to go. Let’s dive in!