Trouble querying content with 11ty

Great to hear you're getting started with Sanity and Eleventy! There's actually a really helpful official guide from Sanity specifically for this combination.

Official Eleventy + Sanity Guide

Sanity has an official guide for getting started with the 11ty (Eleventy) Blog Starter. This guide walks you through:

• Setting up the starter template from sanity.io/create
• Getting both 11ty and Sanity Studio running locally
• Understanding the anatomy of an 11ty site with Sanity
• Querying content using GROQ (Sanity's query language)
• Working with data files in the _data directory

How to Query Content from Sanity

The key to pulling content from Sanity into Eleventy is using 11ty's global data pattern. In the starter template, you'll find JavaScript files in the _data directory that fetch content from Sanity's API using GROQ queries.

Here's the basic approach:

1. Create a data file in /web/_data/ (like posts.js)
2. Write a GROQ query to fetch the content you need
3. Use the data in your templates - the data will be available as a variable named after your file

For example, if you have posts.js in your _data folder, you can access that data in your Nunjucks templates as {{ posts }}.

The guide includes practical examples of:

• Modifying GROQ queries to get specific fields (like adding an excerpt field)
• Working with Portable Text (Sanity's rich text format)
• Converting Sanity data into formats Eleventy can use

Additional Resources

There's also a follow-up guide on adding promotional images to extend your site further.

The combination of Eleventy and Sanity gives you a lot of flexibility - Eleventy handles your static site generation with minimal dependencies, while Sanity provides structured content with collaborative features and a global CDN for assets. Good luck with your first site!