Jamming with Gatsby and Sanity

Ria Carmin

@riacarmin

J

A

M

JavaScript

APIs

Markup

Fast and secure sites and apps delivered by pre-rendering files and serving them directly from a CDN, removing the requirement to manage or run web servers.

— jamstack.org

STATIC SITE GENERATOR

Assemble a static site using a templating engine and serve through a CDN.

1

CONTENT

Write content in using markdown or a headless CMS.

2

HEADLESS CMS

SERVER LESS FUNCTIONS

Add computation and third party APIs.

3

  • Amazon Lambda
  • Microsoft Azure Functions
  • Vercel

OPTIONS

👀

(1)
(2)
(3)

Static site generator

Markup / Headless CMS

Serverless functions

1

GATSBY

Quick 101

Follow along

github.com/AkimaLunar/gatsby-sanity

gatsby new my-website https://github.com/gatsbyjs/gatsby-starter-hello-world

in your Terminal

├── .cache
│   ├── [...]
├── node_modules
│   ├── [...]
├── package.json
├── public
│   ├── [...]
├── src
│   ├── components
│   │   ├── Nav.js
│   │   └── Shell.js
│   ├── images
│   │   └── dwarf.png
│   ├── pages
│   │   ├── about-me.js
│   │   └── index.js
│   └── styles
│       ├── layout.css
│       └── main.css
├── static
│   └── favicon.ico
└── yarn.lock

in your project

import React from 'react';
import { useStaticQuery, graphql } from 'gatsby';

import Shell from '../components/Shell';

export default function Home() {
  const image = useStaticQuery(graphql`
    query ImageQuery {
      file(relativePath: { eq: "dwarf.png" }) {
        publicURL
        relativePath
      }
    }
  `);

  return (
    <Shell>
      <div className="container">
        <img
          className="dwarf"
          src={image?.file?.publicURL}
          alt={image?.file?.relativePath}
        />

        <h1>Jamming with Gatsby and Sanity</h1>
        <p>HOLA</p>
      </div>
    </Shell>
  );
}

src/pages/index.js

2

SANITY

What about the CMS?

npm install -g @sanity/cli
sanity init
sanity start

in your terminal

├── config
│   ├── [...]
├── dist
│   ├── [...]
├── node_modules
│   ├── [...]
├── package.json
├── plugins
├── sanity.json
├── schemas
│   ├── blockContent.js
│   ├── category.js
│   ├── figure.js
│   ├── info.js
│   └── schema.js
├── static
│   └── favicon.ico
├── tsconfig.json
└── yarn.lock

in your project

export default {
  title: 'Info',
  name: 'info',
  type: 'document',
  fields: [
    {
      title: 'Title',
      name: 'title',
      type: 'string',
      validation: (Rule) => Rule.required(),
    },
    {
      title: 'Description',
      name: 'description',
      type: 'string',
      validation: (Rule) => Rule.required(),
    },
  preview: {
    // Custom preview config
  },
};

schemas/info.js

import info from './info';

export default createSchema({
  name: 'default',
  types: schemaTypes.concat([
    blockContent,
    post,
    author,
    category,
    info // << Add here
  ]),
});

schemas/schema.js

sanity deploy
sanity graphql deploy

in your terminal

3

TOGETHER

Gatsby & Sanity

yarn add gatsby-source-sanity

in your terminal

module.exports = {
  // ... other config stuff
  plugins: [
		// ... other plugins
    {
      resolve: 'gatsby-source-sanity',
      options: {
        projectId: process.env.SANITY_PROJECT_ID,
        dataset: process.env.SANITY_DATASET,
        token: process.env.SANITY_TOKEN,
        watchMode: true,
        overlayDrafts: true,
      },
    },
  ],
};

gatsby-config.js

import React from 'react';
import Shell from '../components/Shell';

export default function AboutMe({ data }) {
  const { title, description } = data?.sanityInfo;
  return (
    <Shell>
      <div className="container about-me">
        <h1>{title}</h1>
        <p>{description}</p>
      </div>
    </Shell>
  );
}

export const query = graphql`
  query AboutMeQuery {
    sanityInfo(_id: { eq: "info" }) {
      title
      description
    }
  }
`;

schemas/info.js

THE END.

Ria Carmin

@riacarmin

Jamming with Gatsby and Sanity

By Ria Carmin

Made with Slides.com

Jamming with Gatsby and Sanity

A demo of a JAM (JS, API, Markup) Stack with Gatsby static site generator and Sanity CMS.

  • 592

More from Ria Carmin