Lesson 1 - Intro

Course
Learn Eleventy From Scratch
Module
Let’s build a website

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

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.

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.

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
bash
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:

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

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 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!


Comments

Next up: Lesson 2 - Hello world

Time to get your site up and running in the browser with a good old-fashioned “Hello, world”.

Get started

Help! My version of this lesson isn’t working.

Don’t panic, you can download the working project here! Once they are downloaded: replace your project with these files and run npm install. You can read more information here.

Download project files

Hello, I’m Andy and I’ll help you build fast, accessible websites & design systems.

I’m a freelance CSS and design systems consultant, based in the UK. I specialise in design systems and creative web design, such as landing pages and campaign work.

I’m currently helping Google by refactoring the CSS and creating a design system for web.dev, but I have availability for projects such as small websites, landing pages and consultancy. I will have full availability for larger projects in January 2022.

Hire me