Sanity.io: 정말 좋은 CMS

몇 주 전에 개인 웹 사이트에 동적 콘텐츠를 제공하는 방법을 파악해야 했습니다. 조사를 하던 중 CMS(Content Management System)라는 개념을 접하게 되었습니다. 대부분의 CMS에는 프런트엔드와 백엔드가 모두 포함되어 있다는 개념이 있지만 이미 프런트엔드를 실행하고 있기 때문에 내 사용 사례에서는 작동하지 않습니다.

헤드리스 CMS

여기에서 Headless CMS의 개념에 대해 배웠습니다. 헤드리스 CMS의 개념은 백엔드만 가져오고 대신 데이터에 대한 API를 ping하는 것입니다.

좋은 Headless CMS 목록을 찾기 시작했지만 그 중 어느 것도 내가 예상한 것만큼 빠르게 설정되지 않았습니다. 그들 중 대부분은 당신이 어딘가에 그것들을 호스팅할 것을 요구했고, 나는 확실히 서버에서 내 물건을 호스팅하기 위해 돈을 쓰고 싶지 않았습니다.

온전성 소개

내 웹 사이트에 적합한 CMS를 검색하는 동안 Benjamin Ashbaugh Slack 작업 공간의 특정 Hack Club's (예, 그가 암소임을 확인할 수 있습니다)이 Sanity라는 특정 CMS에 대해 알려주었습니다. 어디에서든 내 인스턴스를 호스팅할 필요가 없었고 Sanity Studio라는 도구를 통해 정말 쉽게 편집할 수 있었습니다.

그래서 나는 그것을 시도하기로 결정했습니다. 일어날 수 있는 더 나쁜 것은 좋은 경험이 없고 내 인생의 시간을 낭비하는 것입니다 ¯_(ツ)_/¯

가자!

Sanity는 기술을 소개하기에 정말 좋은 자료starter guide를 가지고 있으므로 기본 리포지토리 설정을 위해 다음을 권장합니다.

Sanity Studio와 Content Lake의 차이점

Sanity Studio는 Sanity 자체에서 데이터를 조작하는 데 사용되는 정말 직관적인 도구입니다(Prisma Studio와 유사). Content Lake는 Sanity Studio에서 데이터를 처리하는 데서 오는 데이터 자체입니다. 클라이언트는 Sanity가 제공하는 API에서 Content Lake에 액세스할 수 있습니다.

개요

Sanity Studio를 작동시킨 후에는 아마도 스키마를 생성해야 할 것입니다.

하나의 파일은 schema.js 레이블이 지정되며 스키마의 게이트웨이가 됩니다. 다음은 그 예입니다.

// First, we must import the schema creator
import createSchema from "part:@sanity/base/schema-creator";

// Then import schema types from any plugins that might expose them
import schemaTypes from "all:part:@sanity/base/schema-type";
import project from "./project";

// Then we give our schema to the builder and provide the result to Sanity
export default createSchema({
  // We name our schema
  name: "default",
  // Then proceed to concatenate our document type
  // to the ones provided by any plugins that are installed
  types: schemaTypes.concat([
    /* Your types here! */
    project,
  ]),
});

project 가져오기가 정확히 무엇을 하는지 궁금할 수 있습니다. 이것이 우리의 두 번째 파일인 문제의 엔티티의 실제 스키마인 project.js 입니다. 다음은 해당 파일의 예입니다.

export default {
  name: "project",
  type: "document",
  title: "Project",
  fields: [
    {
      name: "name",
      type: "string",
      title: "Name",
    },
    {
      name: "description",
      type: "string",
      title: "Description",
    },
    {
      name: "demo",
      type: "string",
      title: "Demo",
    },
    {
      name: "github",
      type: "string",
      title: "Github",
    },
    {
      title: "Technologies",
      name: "technologies",
      type: "array",
      of: [{ type: "string" }],
    },
    {
      title: "Image",
      name: "image",
      type: "image",
    }
  ],
};

여기서는 우선 기본 내보내기로 개체를 가져옵니다. 그런 다음 name , type 및 title 를 정의합니다. project.js 파일에서 "document" 임을 지정합니다. 이제 name 와 title 의 차이점이 궁금할 것입니다. 이름은 Sanity가 내부적으로 데이터를 참조하는 방식일 가능성이 높으며 title는 사용자에게 표시되는 방식일 뿐입니다.
fields 배열에는 스키마의 여러 ​​필드를 지정하는 여러 개체가 포함되어 있습니다. 스키마 유형에 대한 자세한 내용을 찾을 수 있습니다here.

새너티 클라이언트

Content Lake의 데이터에 액세스하기 위해 Sanity용 클라이언트를 사용하겠습니다. 또는 HTTP API 을 사용할 수 있습니다.

Node.js API를 사용할 예정이므로 간단히 설치할 수 있습니다.

npm install @sanity/client

또는

yarn install @sanity/client

그런 다음 원하는 이름으로 원하는 위치에 새 파일을 만들 것입니다(client.js를 사용하겠습니다).

그런 다음 코드를 사용하십시오.

import sanityClient from "@sanity/client";

export const client = sanityClient({
  projectId: "PROJECT_ID_PROVIDED_IN_SANITY.JSON",
  dataset: "DATASET_PROVIDED_IN_SANITY.JSON"
  useCdn: true,
});

여기서는 useCdn:true 를 사용하고 있습니다. 왜냐하면 CDN이 응답 속도가 훨씬 빠르고 무료 계층에서 더 많은 API 호출을 제공하기 때문입니다. 하지만 CDN이 없을 때만큼 빠르게 콘텐츠를 업데이트하지는 않으므로 이 점을 염두에 두시기 바랍니다.

그런 다음 콘텐츠를 얻기 위해 다음을 사용할 수 있습니다.

const projects = await client.fetch(
    `
    *[_type == "project"]
  `
);

이것은 기본적으로 "프로젝트"유형을 가진 모든 문서를 선택합니다(예: 이전 예제에서 project.js의 스키마를 따르는 모든 콘텐츠. 그런데 이것을 async 함수에서 실행해야 합니다.

Sanity에서 사용하는 쿼리 언어가 궁금하시다면 가이드here와 cheatsheet을 확인하세요.

끝

그래서 그것은 꽤 많이입니다. 왼쪽의 아름다운 패널에 반응을 남겨주세요(또는 아래 댓글)!

트위터에서 나를 팔로우하세요:
GitHub에서 팔로우: https://github.com/ShubhamPatilsd