왜 게이츠비와 이성입니까?

내가 더 많은 시간을 들여 개발함에 따라, 내가 자주 하는 일은 다른 사람을 위해 개인 사이트를 만드는 것이다.이것은 간단한 방법으로 새로운 전단 기술과 기교를 끊임없이 연습하고 투자 그룹을 만들어 당신이 무엇을 할 수 있는지 보여주는 것이다.그러나 가장 화가 나는 일 중 하나는 이 사이트들을 위해 간단하고 맞춤형 콘텐츠 관리 방식을 만드는 것이다.예를 들어Word Press는 많은 선택이 있지만, 내가 가장 좋아하는 도구 중 하나는 게이츠비이다.

왜 나는 게이츠비를 좋아해?

게이츠비는 내가 본 것 중 가장 좋은 문서를 가지고 있는 초고속 정적 사이트 건설자이다.개발자로서 믿기지 않는 플랫폼이다.게이츠비는 본질적으로 데이터 불가지론자이다. 이것은 사용자가 거의 모든 데이터 형식으로 콘텐츠를 제공할 수 있음을 의미한다.그것은 아마도 WordPress API, 가격 인하, RSS 요약일 것이다. 아주 좋다.요즘 제 선택은 이성적인 상황에서 콘텐츠를 쉽게 관리하는 것입니다.

왜 난 이성을 좋아해

Sanity는 본질적으로 매우 유연한 머리 없는 CMS/백엔드 서비스이다.Sanity의 장점은 Sanity Studio가 곁들여져 있다는 데 있다. 이것은 React 응용 프로그램으로 로컬에서 실행할 수도 있고 Netlify 등 서비스에서 실행할 수도 있다.그것의 묘미는 사용자가 자신의 데이터 형식을 정의할 수 있도록 하는 데 있다.내가 그것을 어떻게 작동하는지 (왜 사용해야 하는지) 설명할 수 있는 가장 좋은 방법은 그것을 Wordpress와 같은 CMS와 비교하는 것이다.Word Press가 있으면 페이지와 댓글이 있고 탭과 클래스를 추가할 수 있지만, 이외에 사이트를 만들 때 이 유형의 데이터를 처리해야 한다.최종 사용자가 자신의 사이트를 위해 데이터를 관리해야 할 수도 있지만, 이 데이터들은 그들의 데이터를 제대로 설명하지 못하기 때문에 곤혹스럽다.예를 들어 내 아내(배우)가 Wordpress 등 플랫폼을 CMS로 사용하고 있으며 이력서에 그녀가 최근에 공연한 프로그램을 추가하고 싶다면, 그녀는 아마도 유형이 있는 새로운 '게시물'을 만들고 있을 것이다.이것은 가능하지만, 이성적인 경우, 모드에서 자신의 데이터 형식인 '쇼' 를 만들고, 그녀(최종 사용자)가 편집할 수 있는 문서 형식을 자동으로 만들 수 있습니다.다시 한 번 예를 들면, 나는 현재 목공 사이트에서 일하고 있다.그들은 독자들에게 서로 다른 유형의 목재와 목재 속성을 분류할 수 있는 구역을 자신의 사이트에 가지고 싶어 할지도 모른다.Sanity를 사용하면 이를 위해 자신의 데이터 형식을 만들 수 있습니다.Sanity의 가장 좋은 점은 사용자 정의 방식으로 데이터를 저장하고 내용을 관리할 수 있다는 것이다. (Sanity Studio 자체를 편집할 수도 있다. 그것은 단지 React 프로그램이기 때문이다.) 자신의 데이터베이스를 설정하고 모든 것을 관리할 필요가 없다.처음부터 모든 콘텐츠를 개발할 필요 없이 특정 고객을 위해 CMS를 맞춤형으로 제작할 수 있는 즐거운 공간입니다.

우리 뭐 해요?

이 글은 게이츠비에서 새로운, 깨끗한 프로젝트를 만들고 이를 주요 데이터 소스인 Sanity와 연결하는 방법을 소개할 것이다.Sanity 사이트는 실제로 몇 명의 초보자가 있습니다. 몇 번만 클릭하면 사용할 수 있지만, 이것은 대량의 미리 정의된 CSS와 제가 새로운 프로젝트를 시작할 때 반드시 처리하지 않아도 되는 모든 예시 파일을 첨부합니다.이러한 절차를 따라Sanity와Gatsby가 어떻게 협동하여 일을 하는지에 대한 기본 지식을 습득할 수 있고 이를 위해 깨끗한 설정을 구축할 수 있습니다. 그러면 당신은 개발 과정에서 당신이 원하는 모든 것, 예를 들어 스타일, 파일 구조 등을 사용할 수 있습니다!

층계

1. 디렉토리 만들기

우선 프로젝트를 위한 디렉터리를 만들어야 합니다.내가 먼저 이렇게 한 것은Gatsby와Sanity의 CLI 도구가 조금 다르기 때문이다. 나도git repo 아래에서 이 두 도구를 동시에 사용하는 것을 좋아하기 때문에 어디서든 whatever라는 디렉터리를 만들 수 있다.내가 준 이름은 게이츠비 이성 시동기야.

2. Sanity Studio 만들기

우선install the Sanity CLI이 필요하므로 npm runnpm install -g @sanity/cli을 사용하여 CLI를 전역적으로 설치합니다.다음에 루트 디렉터리에 새 디렉터리를 만들고 스튜디오로 이름을 붙입니다.스튜디오 디렉터리에서 실행 sanity init.처음에 이렇게 할 때 로그인해서 계정을 만들어야 합니다. 시스템이 항목을 입력하라고 할 때 '새 프로젝트 만들기' 를 선택하고 프로젝트 템플릿에 대해 'schamas를 정의하지 않은 깨끗한 프로젝트' 를 선택하십시오.그러면/스튜디오 디렉토리에 새 Sanity Studio가 생성됩니다.

3. 게이츠비 사이트 만들기

아직 사용하지 않은 경우install the Gatsby CLI 및 npm install -g gatsby-cli.다음에 루트 디렉터리로 이동해서 gatsby new web 실행할 것입니다./웹 디렉터리에 새 게이츠비 프로젝트를 만들 것입니다.

4. 게이츠비 사이트에서git 삭제

다음에 Gatsby 사이트의/웹 디렉터리에서git를 삭제합니다.이것은/웹 디렉터리에서 실행 rm -rf .git 을 통해 완성할 수 있습니다.나는 스튜디오(in/studio)와 실제 사이트(in/web)에 git 환매를 제공하는 것을 좋아하기 때문에 이렇게 하는 것을 더욱 좋아한다.또는,/studio 디렉터리에서 git init 를 실행하고, 스튜디오와 사이트에 두 개의 단독 리포를 만들 수 있습니다.

5 - gatsby source sanity 설치

만약 네가 게이츠비의 초보라면, 하나의 기본 원칙은 플러그인을 사용하여 각종 기능을 통합시키는 것이다.이 플러그인 gatsby-source-sanity 은 Gatbsy 프로그램에서 Sanity에서 만든 GraphQL API 루트에 따라GraphQL 조회를 실행할 수 있도록 합니다.몇 단계만 수행하면 설치가 가능합니다.

/웹 디렉터리에서 실행npm i gatsby-source-sanity --save.

플러그인 설정을 파일gatsby config에 추가합니다.js

// in your gatsby-config.js
module.exports = {
  // ...
  plugins: [
    {
      resolve: 'gatsby-source-sanity',
      options: {
        projectId: 'abc123',
        dataset: 'blog',
        // a token with read permissions is required
        // if you have a private dataset
        token: process.env.MY_SANITY_TOKEN,
      },
    },
  ],
  // ...
}

플러그인 설정에서 프로젝트 id와 데이터 집합 이름을 프로젝트 Id와 데이터 집합으로 대체해야 합니다.너는/studio/sanity에서 이것을 찾을 수 있다.json 파일.

6. 당신의 모드를 만듭니다

이 때, 게이츠비 사이트와 Sanity 사이의 연결이 정상적인지 확인하기 위해서, 기본적인 모델을 만들어야 한다.우리가 새로운Sanity 사이트를 만들 때, 100% 모드가 없기 때문에, Gatsby 사이트로 끌려가는 것을 볼 수 없습니다.우리는 두 단계로 나누어 완성할 것이다.

blogPost 파일을 만듭니다.js와 스폰서.js*는 schemas 디렉터리에 있기 때문에 */studio/schemas/blogPost가 있습니다.js와/studio/schemas/스폰서.js는 다음과 같은 내용을 제공했다.

// in blogPost.js
export default {
  name: 'blogPost',
  title: 'Blog post',
  type: 'document',
  fields: [
    // ... other fields ...
    {
      name: 'name',
      title: 'Name',
      type: 'string'
    },
    {
      name: 'sponsor',
      title: 'Sponsor',
      type: 'sponsor'
    }
  ]
}

// in sponsor.js
export default {
  name: 'sponsor',
  title: 'Sponsor',
  type: 'object',
  fields: [
    {
      name: 'name',
      title: 'Name',
      type: 'string'
    },
    {
      name: 'url',
      title: 'URL',
      type: 'url'
    }
  ]
}

블로그 포스트와 스폰서 가져오기 모드의 유형입니다.js.

import createSchema from 'part:@sanity/base/schema-creator'
import schemaTypes from 'all:part:@sanity/base/schema-type'

import blogPost from './blogPost';
import sponsor from './sponsor';

export default createSchema({
  name: 'default',
  types: schemaTypes.concat([
    /* Your types here! */
    blogPost,
    sponsor
  ])
})

Sanity에서 스키마를 만드는 방법에 대한 자세한 내용은 docs are here를 참조하십시오.

7. GraphQL API 배포

모델을 수정할 때마다 GraphQL API가 조회할 수 있는 내용을 알 수 있도록 모델을 다시 배치해야 합니다.블로그 포스트 유형과 스폰서 유형을 추가했기 때문에 API를 배치해야 합니다.우리는 명령 sanity graphql deploy 을 사용하여/studio에서 이 동작을 실행합니다.

8. 예제 블로그 게시물 만들기

/studio에서 계속 sanity start 실행하면localhost: 3000에서 스튜디오를 열 수 있습니다.여기에 있는 '블로그 글' 을 보셔야 합니다. 이 글을 클릭하고 + 단추를 누르면 첫 번째 글을 만들 수 있습니다.충전 정보를 입력하고 다음 단계로 넘어가기만 하면 됩니다.

9 - 개츠비 기지 건설

게이츠비는 정적 사이트 건설자이기 때문에 우리는 사이트를 구축해야 한다.gatsby develop를 사용하여/web에서 이 작업을 수행합니다.
사이트가 구축되면 localhost:8000에서 통용되는Gatsbystarter 페이지를 볼 수 있으나,localhost:8000/graphql로 이동하면 graphql 놀이공원을 볼 수 있습니다.만일 모든 것이 순조롭다면 왼쪽에 이성적인 조회가 있을 것이다. 예를 들어 all Sanity BlogPost 등이다.이 때 아래의 조회를 실행할 수 있습니다. 블로그 게시물 데이터를 포함하는 되돌아오는 데이터를 받을 수 있습니다.

query MyQuery {
  allSanityBlogPost {
    totalCount
    edges {
      node {
        _id
        name
      }
    }
  }
}

이렇게!

지금 당신은 깨끗한 게이츠비 사이트를 건전한 작업실로 연결하기를 바랍니다!여기서, 당신은 게이츠비 사이트를 개발할 수 있으며, 보통 이성적으로 새로운 머리 없는 CMS를 맞춤형으로 제작할 수 있다.어떻게 진행되고 있는지 나에게 말해 줘!

You can read more about Gatsby and Sanity from the source.