‘Iacta alea est’

Sanity with 11ty: Paginating Data

Yesterday I explored how to pull down a set of documents stored in Sanity into Eleventy (11ty) using 11ty’s remote data capabilities in JavaScript data files.

If you provide an asynchronous function, 11ty can treat remote data identically to static, local data. 11ty automatically exposes all data from data files to templates in the local context.

For a file _data/posts.js you can access the post data in the (Nunjucks) templates with the variable posts.

  {% for post in posts %}
      {{ post.title }}
  {% endfor %}

The above would be one way to create an “index” or archive page for all blog posts. To create one page in the static site per post in the data collection from Sanity then you need to use a key built-in feature from 11ty, pagination.

Pagination entails defining the pagination key in the YAML front matter so that 11ty can use it to generate multiple pages from a collection, in this case our posts data.

  data: posts
  size: 1
  alias: post
permalink: "/blog/{{post.slug.current}}/"

  {{ post.title }}

That’s pretty much it. This will generate a page for each post contained in my posts array which has been pulled down from Sanity in the _data/posts.js data file.

This is the skeleton that provides a simple blog with posts written in Sanity and rendered in a static site. The common approach is to set up a webhook in Sanity that triggers a build on Netlify after content has been published which then rebuilds the site and deploys.

Monday 17th May 2021.