Eleventy

This post has information about how Eleventy works as well as links to all of the LinkedIn Learning course videos and our related class materials.

Eleventy Course on LinkedIn Learning

We have followed a long with the Building Serverless Apps with JamStack and Eleventy from LinkedIn Learning. This section lists all of the videos from the course along with links to any related class files like Miro boards and class recordings.

Before each video there is a number referring to the chapter and video. So the third video in the first chapter is 01_03. This is the same naming convention Ray uses his GitHub branches for the course files.

GitHub Files

Course Contents

1. Getting Started [week 5]

01_01: What exactly is the JAMstack?

General overview of JAMstack.

01_02: Installing Eleventy

This goes over installing Eleventy. It assumes you have already installed Node, Git and Visual Studio Code.

01_03: Creating a Node.js Eleventy Project

Basic configuration of Eleventy files (input and output directory) and how to start the server.

2. Organizing Your Serverless Site [weeks 6 + 7]

02_01: Creating Front Matter Data

Learn the basics of adding YAML front matter data to your Eleventy pages. This allows you to add variables that can be used in the page and templates.

02_02: Building a Template Page

Templates are a powerful tool for Eleventy. You will use them in your project. They allow you to define a single you can use to help generate your HTML pages.

This means that by adding things like the <head> and <footer> sections, CSS includes and even layout to templates you can reuse them. If you need to change something you can just change it once in the template instead of every page.

02_03: Layout Chaining

Chaining allows you to chain more than one template together. This technique allows you to have a base layout template and then to create other templates based on that template. The layouts are placed in a _layouts folder.

3. Using with Site Data [weeks 8 + 9 ]

03_01: Using a Data File

03_02: Adding Directory Data

Directory Data allows you to add a file to a directory that will make the data in the file available to all files in the directory. For example if you wanted to have all pages in the clients folder to have access to some JSON data then you could create a clients.json file in the clients folder and that data would be available when Eleventy processed the files in the clients folder.

It is important that the folder name and the data file name start the same (eg clients/clients.json, posts/posts.json …)

See the Using a Data file walkgthrough video above for when we covered this in class.

03_02 video [4m 57s]

03_03: Loading Content Dynamically with APIs

This technique allows you to load data from another site and then use it in your project. The example from LinkedIn Learning loads in a clients data file, but you could use the same technique to load files from some other API.

Note: when loading at build time like in these examples, it means the data is not dynamic and will not change until you rebuild your project. There are other techniques that can be used to load data dynamically when your users are using the site.

03_04: Using Alternative Data Formats

Up until this point most data has been in the JSON format. That is not the easiest format to write (easy to make mistakes). In this video we see how we can write data files in the YAML format (we have used this a little for the front matter data).

03_05: Building Pages from Data

With this technique you can create HTML pages from a data file (JSON, YAML etc). This is helpful because it means you don’t have to go in and create a bunch of pages. If your project has a number of listings of locations, books, movies, restaurants, etc and you want to have both a page that lists all of them and separate pages for each one, then this is a good technique. The example here shows how to have a clients page that lists all of the clients and then individual client pages for each client. Both are built from the same data file.

4. Working with Content Features [week 10]

04_01: Short Codes

Shortcodes are kind of like mini-templates. They are perhaps useful if you have a small bit of complex code that is used in multiple places on a page or site. But, I think for most of you Templates will be enough so I’m not covering this in class.

04_02: Permalinks

This is a way to change the link where the files will exist on the site (the output folder). Normally the page is the same name as the folder or file it’s created from. In this example he changes the /about/ folder to /about-ray-villalobos/. You can use the same techniques to modify the names for your files. This technique is also used to create the links for the dynamically generated clients pages in the 03_05 video above.

04_03: Filters

5. Managing Collections [week 11]

05_01: Understanding Collections

05_02: Building Collections Using Tags

05_03: Using Collection Modifiers

6. Using Pagination and Plugins [ week 12]

06_01: Understanding Pagination

06_02: Creating Post Pagination

06_03: Using Pagination Navigation

06_04: Adding a Plugin for Main Navigation

Leave a comment