Setting up a blog with Vue and Sanity: Part 1

Published at 6/21/2022, 6:34:38 PM

As I started to build my website from scratch again, I decided I want to finally set up a dev blog where I can document my mental anguish. I wanted to use a Headless CMS as I like to have free reign over the UI with any technology of my choosing. My first choice was Contentful but I’ve already used up my free tier for it for another project. Strapi is another popular Headless CMS which seemed to have a good development community behind it and lots of documentation. However, it is self-hosted which I don’t want to bother with at this time. So, I found Sanity.

The Vue facelift for my website is already live at https://joniramo.com. So all I have to do to set up the blog is…

Setup Sanity at https://www.sanity.io/get-started/create-project
Create schemas for the content
Add a view and components to render the blog content
Fetch the content with Sanity’s GROQ query language (Graph-Relational Object Queries)

I’m going to split this into two blog posts. In the first one we’ll set up Sanity and create the schemas for the content. In the second one we will create the Vue UI and fetch the data from Sanity.

Setting up Sanity

At the time of writing this the latest Sanity version is 2.30.1, so some things may have changed if you are reading this in the future. Sanity generates a setup command for you after registering.

npm install -g @sanity/cli && sanity init --template get-started --project PROJECT_ID --dataset production --provider github

Your PROJECT_ID will be unique so you will need to run the command you receive after registering. To find your project id, you can check your Sanity dashboard. After you have the command, navigate to the root directory of your app and run it in your terminal. It installs the Sanity CLI, sets up Sanity Studio and connects one of your free projects inside your existing application directory.

(There’s also a ready-made blog schema template you can run by first installing @sanity/cli globally, running sanity init in your terminal and then choosing the Blog template.)

You may be wondering about the name of the directory after setting up Sanity. It is an autogenerated name based for your project and you can rename the directory as it doesn’t matter. Let’s name it to “studio” as it contains the code and configuration for Sanity Studio.

Run yarn start inside your Sanity project folder to start up Sanity Studio. For me, it caused the following error:

BrowserslistError: Unknown browser query `dead`
at ~/Sites/personal/joniramo.com-vue/yellow-panther/node_modules/postcss-cssnext/node_modules/browserslist/index.js:164:11

This happened because my root .browserlistrc file included the option “not dead” and it was not supported by an older version of browserlist. This is an unfortunate issue but for not I just removed the line “not dead” from the .browserlistrc file and it fixed the issue, allowing me to start up Sanity Studio. Keeping dependencies updated will fix this issue later. After successfully starting the Sanity Studio you will see something like this.

$ sanity start
✔ Checking configuration files...
⠸ Compiling...webpack built b774dcae2822616c7e8d in 10728ms
✔ Compiling...
Content Studio successfully compiled! Go to http://localhost:3333

Now you can open http://localhost:3333 to view up Sanity Studio. Sanity Studio is actually only a Single-Page Application to give a local point of configuration to Sanity’s Content Lake, where the content is hosted. It is synced in real time so content is never stored locally.

In the sanity.json file you can configure your studio with options such as which project and dataset it connects to and which plugins it uses. Let’s not bother with these now.

By setting up Sanity with the preconfigured get-started template, it installs a folder called sanity-plugin-tutorial inside the plugins folder. Let’s remove this unnecessary boilerplate, leaving only the .gitkeep file inside the plugins folder.

Creating the first schemas

Next we can create our first schemas for the blog. This means configuring what kind of content can be created in Sanity Studio. I’d like to keep it simple initially, so the blog will only have three schemas: post, category and block content.

schemas/post.js

This is the content of a single blog post.

export default {
  name: "post",
  title: "Post",
  type: "document",
  fields: [
    {
      name: "title",
      title: "Title",
      type: "string",
    },
    {
      name: "slug",
      title: "Slug",
      type: "slug",
      options: {
        source: "title",
        maxLength: 96,
      },
    },
    {
      name: "mainImage",
      title: "Main image",
      type: "image",
      options: {
        hotspot: true,
      },
    },
    {
      name: "categories",
      title: "Categories",
      type: "array",
      of: [{ type: "reference", to: { type: "category" } }],
    },
    {
      name: "publishedAt",
      title: "Published at",
      type: "datetime",
    },
    {
      name: "body",
      title: "Body",
      type: "blockContent",
    },
  ],
  preview: {
    select: {
      title: "title",
      media: "mainImage",
    },
  },
};

schemas/category.js

This is a category, to find different content more easily.

export default {
  name: "category",
  title: "Category",
  type: "document",
  fields: [
    {
      name: "title",
      title: "Title",
      type: "string",
    },
    {
      name: "description",
      title: "Description",
      type: "text",
    },
  ],
};

schemas/blockContent.js

This is the block content of the rich text field.

export default {
  name: "blockContent",
  title: "Block Content",
  type: "array",
  of: [
    {
      title: "Block",
      type: "block",
      styles: [
        { title: "Normal", value: "normal" },
        { title: "H1", value: "h1" },
        { title: "H2", value: "h2" },
        { title: "H3", value: "h3" },
        { title: "Quote", value: "blockquote" },
      ],
      lists: [
        { title: "Bullet", value: "bullet" },
        { title: "Numbered", value: "number" },
      ],
      marks: {
        decorators: [
          { title: "Strong", value: "strong" },
          { title: "Emphasis", value: "em" },
        ],
        annotations: [
          {
            title: "URL",
            name: "link",
            type: "object",
            fields: [
              {
                title: "URL",
                name: "href",
                type: "url",
              },
            ],
          },
        ],
      },
    },
    {
      type: "image",
      options: { hotspot: true },
    },
    {
      title: "Code block",
      type: "code",
    },
  ],
};

These schemas are heavily influenced by the default schemas from the Sanity blog template with some minor tweaks. For example, I don’t need the Author schema as I will be the sole author of all of my blog posts.

Now I can restart the Sanity Studio server and create my first blog post, which is the one you are reading now. If you have any questions regarding this guide, please let me know on Twitter.