Using Sanity for an 11ty Blog

I started a new job at Sanity this month and I wanted to try out the product to learn about it. I decided to take on a small project and add a blog to my personal website.

Setting Up Sanity

First I had to setup an account. So I went to sanity.io and clicked "Get started" and then signed up with my Github account. From there I created my "Blog" project but I didn't setup any content just yet.

From there I just wanted to get started with a Studio. This part was a bit different for me since I was kind of expecting to do it all at sanity.io but with Sanity you make your own Studio that you can customize if you want to. You can run it locally or if you are sharing it you can deploy it to a cloud provider to host it.

When I ran `npm create sanity@latest` it asked me if I wanted to create a new project or use an existing one. Since I already had the empty Blog project started I chose that. Then it asked me to select a project template. There was a Blog so I picked that one and it setup my schema for me. Then after a few more choices it setup my project.

I started my IDE in the new project folder to take a look around and see how it works. There's a folder with my generated schema in it. One interesting one was `blockContent.ts` which defines the content that I can put into a blog post.

It was time to give it a try so I ran `npm run dev` to start my local Studio and opened http://localhost:3333 in my browser. In the Studio I could see three types of Content: Post, Author, and Category. In the Post section there was an example "My first post" already there.

Updating My 11ty Site

At that point I turned my attention back to my website. Up until then I had only done hand-written static content as a small portfolio/bio website. I had to do some research on how to add data-driven content. At first I started on Sanity's site but since I already had an 11ty site I wanted to figure out how to put it into my site rather than building a new one from a template.

The 11ty docs are a bit overwhelming at first, but there was a bunch of pages that stood out to me as worthwhile reads: Create Pages From Data and then a whole section on Using Data. At first I just wanted to make it do something so I made a `blog` folder and inside that I made a `blog.pug` page and `blog.js` to try to make it load some data. After re-reading the Computed Data page I realized my filename was wrong and it had to be `blog.11tydata.js` instead. Using the dummy example I was able to cause the build to load in the computed data and then display it in my new, empty blog page.

Next I wanted to hook sanity into my computed data so I could grab a list of blog posts and display them on the main blog page. A bit of digging and I found I had to install the Sanity client which would let me interact with my data in Sanity.

npm install @sanity/client

Initially I dropped the login into the computed data but I later realized that since I needed the content of all my blog posts for the build it made sense to just make the posts data a Global Data File in 11ty. I moved what I had into a "_data" folder and reorganized it into something like this:

const sanity = require("@sanity/client");

const client = sanity.createClient({
  projectId: "abcdefg",
  dataset: "production",
  useCdn: false, // set to `false` to bypass the edge cache
  apiVersion: "2025-02-06",
});

module.exports = async function () {
  const posts = await client.fetch('*[_type == "post"]');
  return posts;
}

Now I had the data to create a menu on the main Blog page:

.box 
  h3.is-size-3 Blog
  div.menu
    p.menu-label Posts
    ul.menu-list
      each post in posts 
        - var slug = post.slug.current
        li 
          a(href=slug) #{post.title}

Here's a sample of the result:

Not bad for now, maybe I could add a date or some other information later. I will eventually need to add pagination but that's a problem for another day.

The next step was to display a post in a different page. This is where I read the Create Pages From Data document on the 11ty site. I made a posts.pug page and used the examples to make something like this:

---
pagination:
  data: posts
  size: 1
  alias: post
permalink: "| blog/#{ post.slug.current }/"
layout: layouts/post.pug
---
.box 
  h1.is-size-1 #{post.title}
  div !{post.body}

The pagination section is the part that says which data to pull from and how many items to pull per page. Since this page is for a single post, we just want 1. The permalink tells 11ty what to call the file during the build process. It also makes it easy to figure out the link for the list on the main blog page. I also has to do a slightly different layout because I couldn't figure out how to pass along the title to the layout. I ended up breaking the layout into parts and making it reusable.

So I tried the page and realized that the body was in a strange structure I had never seen before. In it's raw form, the content is stored in a structure of blocks with different types that can be rendered however you like. This makes it easy to put content into HTML or any other output format, but it means you have to do some processing. Luckily Sanity provides a package to do just that:

npm install @sanity/block-content-to-html

Then I plugged this into my global data file to do the processing like this:

return posts.map((post) => ({
  ...post,
  body: blocksToHtml({blocks: post.body})
})

This was much better but looked awful. I'm using Bulma for my CSS framework and most things needs classes on them just to look normal. Luckily blocksToHtml has serializers that let you do extra processing on blocks of content. For example, here's how I'm processing a basic test block:

block: (props) => {
  const style = props.node.style || "normal";

  if (/^h\d/.test(style)) {
    const level = style.replace(/[^\d]/g, "");
    return h(
      style,
      { className: `is-size-${level}` },
      props.children
    );
  }

  return h("p", { className: "block" }, props.children);
},

This checks the style, which will map to the dropdown values I can see when I'm writing my blog post in Studio. For now I'm just using headers (h1, h2, etc) and normal text (p).

So far so good, everything was looking much better but I wanted to add code examples to my blog since I'm a developer and this will often be part of my content. In my studio project, I added a new package:

npm install @sanity/code-input

Per the instructions I also added a new section to my blockContent.ts in my studio project:

defineArrayMember({
  type: 'code',
}),

This configures my studio to allow me to add code blocks inline in my blog posts. On the 11ty site, I needed to add some processing to handle code blocks as well.

code: (props) =>
  h(
    "pre",
    { className: `${props.node.language} block` },
    h("code", props.node.code)
  ),

This gives me a really basic code block but it works and it's good enough for now. The great thing is when I update the processor, all of my blog posts will automatically get upgraded along the way. For example, I might add syntax highlighting as a progressive enhancement and it would be applied across all my posts.

I also wanted to add images, like a screenshot. In order to get images working I had to go and modify the query. Currently I was just pulling down the information on the posts, but GROQ lets you join other documents as well and images (or really metadata about images) are also just documents. Here's the new query:

*[_type == "post"]{
  title,
  body[]{
    ...,
    asset->{
      ...,
      "_key": _id
    }
  },
  slug
}

That covers all the content I needed for now. Time to figure out how to make publishing automatically do a build and deploy of my site. I'll leave that for my next post as it's part of the brand new stuff my team is working on and it's not quite ready yet.