Start from a blank project and build up to an Eleventy site that includes a blog collection and is prepared to source content from a headless CMS. You'll also learn how to add Sass as the styling solution, complete with triggering 11ty to re-compile when the Sass changes.

These lessons will help explain key 11ty features and concepts to help you make the most of this amazing static site generator.

By the last lesson, you'll have learned how to:
- define custom `input` and `output` directories
- create a layout that accesses front matter variables
- watch for Sass changes and include CSS in the build proces
- create an 11ty collection using `tags`
- define front matter for an entire collection
- make and apply a filter to a collection
- generate pages from an external data source, such as a CMS or API

Begining from a brand new project, learn how to install Eleventy (11ty), and add `develop` and `build` scripts. Next, define a custom configuration to set preferred input and output directories. Then create a home page file and your first layout while learning how 11ty handles mixing templating languages.

Create an Eleventy (11ty) Site From Scratch

Learn how to add Sass to an Eleventy (11ty) project including directing 11ty to re-compile when Sass changes are made. This step involves adding two new functions to the `.eleventy.js` configuration: `addWatchTarget()` and `addPassthroughCopy()`. Then, define the link to the compiled CSS file within an 11ty layout.

Add Sass Compiling and Watch for Changes in Eleventy (11ty)

Create a blog directory with posts for your Eleventy (11ty) project, and learn how to define the posts as an 11ty collection using `tags`. Then make a blog index page and write a `for` loop with Nunjucks to output a list of each post linked to the post page.

Define an Eleventy (11ty) Collection to Create a Blog

Filters in Eleventy (11ty) are a way to mutate data including string variables or arrays such as collections. Learn to create a filter for use on a collection which will select a random item from the collection.

Apply a Filter to an Eleventy (11ty) Collection

Eleventy (11ty) is able to run any JavaScript or Node functions at build time. This makes it possible to source external data such as from a headless CMS or other API. Learn how to generate pages from data pulled from a mock CMS using the 11ty `pagination` method and designate the data as an 11ty collection. You'll also learn how to define variables for the page using `eleventyComputed`, and then write a `for` loop to output a link to each page.

Build An Eleventy (11ty) Site From Scratch

Instructor

Course Content