Connecting Sanity CMS to 11ty Frontend Tutorial or Reference

I can help you with connecting Sanity to Eleventy from scratch! While there's an official guide available, let me point you to the best resources and give you an overview of how everything connects.

The main tutorial you're looking for is the official Sanity guide on getting started with the 11ty Blog Starter by Bryan Robinson. While it starts with the template, it does a great job explaining the fundamental concepts of how the pieces fit together, which is exactly what you need to understand for building from scratch.

How Everything Connects

Here's the basic architecture you'll be working with:

1. Sanity Studio (Content Management)

• Lives in a /studio/ directory (or separate repo)
• Defines your content schemas using JavaScript objects
• Provides the editing interface for your content
• Syncs content to Sanity's hosted APIs in real-time

2. Eleventy (Static Site Generator)

• Lives in your /web/ directory (or main project folder)
• Fetches content from Sanity using the JavaScript client
• Uses 11ty's global data pattern to pull content at build time

3. The Connection Point: Global Data Files

This is the key piece! In your _data directory, you create JavaScript files that query Sanity. Here's a simplified example of what a posts.js file might look like:

const sanityClient = require('@sanity/client')
const groq = require('groq')

const client = sanityClient({
  projectId: 'your-project-id',
  dataset: 'production',
  useCdn: true
})

module.exports = async function() {
  const query = groq`*[_type == "post"]{
    title,
    slug,
    body
  }`
  
  const posts = await client.fetch(query)
  return posts
}

4. Using the Data in Templates

Once you have the data, you can use it in your Nunjucks (or Liquid/Handlebars) templates:

{% for post in posts %}
  <h2>{{ post.title }}</h2>
{% endfor %}

Building From Scratch Steps

1. Set up Sanity Studio: Run npm create sanity@latest to initialize a new Sanity project
2. Define your schemas: Create content types in /schemas/
3. Set up 11ty: Initialize an 11ty project with npm init -y and install 11ty
4. Install Sanity client: npm install @sanity/client groq
5. Create data files: Add JavaScript files to _data/ that query Sanity using GROQ
6. Build templates: Use the data in your 11ty templates
7. Handle Portable Text: Use @portabletext/to-html or similar to render rich text content

Additional Resources

The Sanity + Eleventy landing page explains the benefits of this stack. The guide walks through practical examples like adding excerpts to blog posts, which demonstrates the full data flow from schema → query → template.

For GROQ queries (Sanity's query language), check out the GROQ documentation to understand how to fetch exactly the data you need.

The beauty of this setup is that 11ty's flexibility means you can structure your project however you want - the key is just understanding that data flow from Sanity → JavaScript data files → 11ty templates. Once you grasp that pattern, you can build anything! The starter template is actually a great reference for seeing these patterns in action, even if you're building from scratch.