GatsbyJS and Sanity.IO: Creating a Static Blog for Free

GatsbyJS и Sanity.io являются двумя отличными инструментами для создания статических веб-сайтов и блогов. GatsbyJS – это генератор статических сайтов на основе React, который позволяет создавать быстрые и оптимизированные веб-сайты. Sanity.io, с другой стороны, является гибкой платформой управления контентом, которая позволяет легко создавать и редактировать контент для вашего сайта.

В этом учебном пособии мы научимся создавать статический блог с использованием GatsbyJS и Sanity.io. Мы будем использовать GatsbyJS для создания фронтенда нашего сайта, а Sanity.io для управления контентом нашего блога.

Шаг 1: Установка GatsbyJS

Первым шагом на пути создания нашего статического блога будет установка GatsbyJS. Для этого нам потребуется Node.js и npm. Установите их, если они у вас еще не установлены.

Затем устанавливаем Gatsby CLI с помощью следующей команды:

npm install -g gatsby-cli

После того, как Gatsby CLI установлен, создайте новый проект Gatsby:

gatsby new my-blog

Перейдите в папку с вашим проектом:

cd my-blog

Запустите ваш проект Gatsby:

gatsby develop

Теперь вы можете открыть ваш сайт по адресу http://localhost:8000 и увидеть начальную страницу GatsbyJS.

Шаг 2: Установка Sanity.io

Следующим шагом будет установка Sanity.io. Вы можете создать учетную запись на сайте https://www.sanity.io и следовать инструкциям для создания нового проекта.

После создания проекта вам будет предоставлен projectId и dataset. Для использования Sanity.io в вашем проекте Gatsby вам нужно установить gatsby-source-sanity:

npm install gatsby-source-sanity @sanity/client

Затем добавьте конфигурацию для gatsby-source-sanity в gatsby-config.js:

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-sanity',
      options: {
        projectId: 'ваш projectId',
        dataset: 'ваш dataset',
        token: '', // опционально
      },
    },
  ],
}

Шаг 3: Создание контента в Sanity.io

Теперь у нас есть настроенная интеграция с Sanity.io в нашем проекте Gatsby. Чтобы добавить контент в наш блог, мы должны создать схемы данных в Sanity.io.

Создайте новый тип документа для постов блога:

export default {
  name: 'post',
  type: 'document',
  title: 'Post',
  fields: [
    {
      name: 'title',
      type: 'string',
      title: 'Title',
    },
    {
      name: 'body',
      type: 'text',
      title: 'Body',
    },
  ],
}

После создания схемы данных для постов блога, вы можете начать добавлять контент в свой проект Sanity.io.

Шаг 4: Использование данных Sanity в Gatsby

Теперь у нас есть настроенная интеграция с Sanity.io и созданный контент для нашего блога. Чтобы использовать этот контент в нашем проекте Gatsby, мы можем запросить его с помощью GraphQL.

Создайте новую страницу для вывода всех постов блога:

// src/pages/index.js
import React from 'react'
import { graphql } from 'gatsby'

export const query = graphql`
  query {
    allSanityPost {
      nodes {
        title
        body
      }
    }
  }
`

const IndexPage = ({ data }) => {
  const posts = data.allSanityPost.nodes

  return (
    <div>
      {posts.map(post => (
        <div key={post.title}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  )
}

export default IndexPage

Теперь, когда вы обновите ваш сайт, вы увидите все посты из вашего проекта Sanity.io на главной странице вашего блога.

Это был длинный и подробный обзор процесса создания статического блога с использованием GatsbyJS и Sanity.io. Надеюсь, этот учебник был полезен для вас, и вы сможете создать свой собственный статический блог с нуля, не потратив на него ни копейки. Удачи!