Create an Eleventy (11ty) Site From Scratch

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

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

Apply a Filter to an Eleventy (11ty) Collection

Generate Eleventy (11ty) Pages From External Data

Build An Eleventy (11ty) Site From Scratch

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.

Instructor: [0:00] Eleventy allows us to easily pull in external data. Within our src directory, we can add the data directory, which is an expected directory in the Eleventy file system.

[0:12] Within that, we'll create cms.js. Eleventy is able to use any JavaScript or Node functions which are compiled at build time. We'll add a mark function to this demo service that will return mark post as from [inaudible] CMS.

[0:29] Next, we would like to create a page in our file system for each post return from our mark cms. In the src directory, we'll create articles.njk, or njk. We'll define some front matter data.

[0:46] Eleventy provides a special method called pagination. This will allow us to loop through any data source and create unique pages. We'll define that the data source is our cms file, and Eleventy automatically knows to look for this in the data directory.

[1:04] We'll set a size of one since we want to create one page per each article and create an alias, which is like a local variable, set to article. We'll also be wanting to use these articles as a collection. We need to define addAllPagesToCollections as true. By default, this is false. You will only get the first post returned.

[1:26] Now we can add some of the other expected front matter fields such as layout, and again we'll set this to our page layout, then we'll use the tags key to tag all of these as articles. The tags combine with addAllPagesToCollections means that we can access this in the articles collection.

[1:46] We also want to define our permalink structure. It is recommended to quote this value for proper processing. We want to define that all articles begin with the articles base, and then we'll use the alias reset of article to access the title that is found within the array returned from the cms.

[2:06] We'll pipe that through to the slug function which will turn that into a URL-friendly string. Add our trailing slash.

[2:15] We want to ensure that the content returned from the cms, which is mocked as markdown content is processed as markdown. Just like we did on the index file, to process our blog loop, we'll use a templateEngineOverride to the first process the article content is markdown, and then njk. Since we are defining the data for the entire collection, to add the equivalent front matter for each article, we need to use the special Eleventy key, eleventyComputed.

[2:47] Here we can define the title variable and pull in the article.title. Finally, we need to define what content to pass into the layout template. Pulling from our CMS available values, we'll get article.body, and pipe it in with the safe filter.

[3:05] Now we'll go to our index for our home page file and we'd like to create a loop for our articles. Much like we did for the blog loop, we'll set this within a list and use a for loop to loop through each article in collections.articles.

[3:26] For each of those, output a list item linked to the article.url, which at this point is provided by Eleventy since this are created as pages and display the article.data.title, which is the same as when we access the normal front matter for our blog markdown files. Of course, close off our for loop.

[3:49] With that, we've produced a list of our articles on our home page that are linked to the individual articles that were generated from our mark.cms.

[3:59] In review, we created a function to mark reaching out to a headless cms that was placed within the data directory. This array was access via the Eleventy pagination method where the data key pointed to the file name of our function as located in data.

[4:17] We then define that it should be added to collections and output on our page layout and create it as the collection articles.

[4:25] By making use of the eleventyComputed array, we were able to define a title for each article. On our home page, we were able to loop through each article in the collection of articles and output a link to the generated page.

Course

Build An Eleventy (11ty) Site From Scratch

Generate Eleventy (11ty) Pages From External Data

Share this video with your friends