Summary

In this chapter, we covered multiple ways of adding static and dynamic data to your 11ty site. After reviewing the structure of the 11ty Data Cascade, we added multiple types of data to our basic site project.

We started by adding page-specific data by using the frontmatter in each of our pages. We used this data to display different content for the banner on the home page and the About page with a singular include. We set up more differences in our layout by assigning a pageId inside the frontmatter to display different banner styles and active states in the navigation. We created a reusable card component to be used with data from the home page and renamed it for the include so that it could be used in multiple locations.

Once we had that, we needed to clean up the display of the data in the templates. We used template data files to accomplish this, moving the triptych data to a separate data file with the same name as the page.

We created a new directory for the About section to use directory data files to share data between the About page and the new History page, which is a subpage of About.

Finally, we added global data to display certain information in multiple templates—the site name and copyright date. We started with a JSON file but converted it into a JavaScript data file to pull the current date for the copyright year in the footer.

In the next chapter, we’ll discuss the hosting needs of 11ty and walk through deploying a site through a modern static site host.