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?
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:
- 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
- Linux users: I don’t need to tell you because you’re more than likely using a terminal already
For all platforms, Microsoft Visual Studio Code 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.
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 which will replace your current version.
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.
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:
- Code language
~ 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:
- Code language
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
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.
Once you have the starter files downloaded unzip the folder and paste the entire contents into your
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
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 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
# Misc *.log npm-debug.* *.scssc *.swp .DS_Store Thumbs.db .sass-cache .env .cache # Node modules and output node_modules dist src/_includes/css
When we use a pattern like this:
*.js to the
.gitignore file. This is all handy for if you decide to use Git while you complete this course.
Wrapping up permalink
Now we’ve done the boring bit, we’re all set up and ready to dive in. Pretty straightforward, right?
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!