#100일 소피츠비-스퍼트1

10445 단어 contentful react graphql codenewbie

이 블로그 시리즈에서 나는 나의 100일간의 소피츠비 여행을 기록할 것이다.나는 가능한 한 그것의 흥미를 유지할 것이다.
더 이상 귀찮게 하지 말고 우리 시작합시다.

다음은 저희가 첫 번째 스퍼트에 필요한 것들.

개념 검증(POC) 게이츠비 사이트를 구축하여 그들의 루트 API를 테스트하고 서비스, 위탁 관리와 내용 통합을 구축한다

게이츠비의 내용 플러그인을 사용하여 테스트 내용 사이트에 연결

다음 페이지를 만듭니다.

개

개츠비 설치:

npm init gatsby

너는 이런 물건을 보아야 한다

사이트 이름을 audio-core로 지정합니다. 이 이름은 컨텍스트에 더 적합합니다.너는 마음대로 어떤 이름을 지어도 된다.

웹 사이트를 만들 폴더를 선택합니다.

CMS에 연결할 것을 요청받았으니 목록의 옵션 2를 사용하겠습니다.

스타일을 잠시 무시하고 enter키

를 누르겠습니다.

플러그 인에 대해 동일한 작업을 수행한 후 Contentful를 눌러 다음 단계로 진행

현재 콘텐츠 플러그인 설정에 대해 enter 키를 누르십시오. API 키와 공간 id를 추가하지 마십시오. 콘텐츠 플러그인에 새 공간을 만들 때 이렇게 합니다.

설치가 진행됨에 따라, Google 게이츠비 사이트를 연결하기 위해 콘텐츠ful에 API 키와 공간 id를 만듭니다.

만족감 형성:

이 link에 액세스하여 컨텐츠 계정을 생성합니다.

프로젝트를 위한 공간을 만듭니다.

클릭done은 자유 평면을 사용하여 두 개의 프로젝트 공간을 만들 수 있도록 허용하는 마지막 화면에 들어갑니다.너는 그들의 사이트 official website 를 방문하여 그들의 가격 구조를 이해할 수 있다.

마지막으로 공간 화면을 환영합니다.

컨텐트 모델 및 유형을 추가하려면 다음과 같이 하십시오.

현재 내용 모형을 클릭하여 첫 번째 내용 유형을 만듭니다.내용 모형은 당신의 내용을 구성하고 조직합니다.그것은 내용 유형으로 구성되어 있다.
첫 번째 내용 형식을 색인으로 명명하면 홈 페이지와 관련된 데이터를 제공할 수 있습니다.

현재 홈페이지에서 두 개의 필드 create Space 와 Title 를 만들고 save를 누르십시오.

about us 페이지에 다른 내용 형식 Description 을 추가합니다. About 과 같은 두 필드 Index 와 Title 를 포함합니다.
내가 CMS에서 제목과 설명을 만든 이유는 정적 상태를 유지하기 때문이다. 코드를 통해 변경할 때마다 CMS를 업데이트하면 자동으로 업데이트된 내용을 응용 프로그램에 발표할 필요가 없기 때문이다.우리는 이 시리즈의 두 번째 부분에서 그것이 어떻게 발생할지 볼 것이다.
locations 페이지에 다음 세 필드를 추가합니다.

slug

주

국가

라우팅 목적의 Slug입니다.국가 이름을 입력하면 자동으로 생성됩니다.별도의 위치 페이지에 표시되는 주 및 국가에 사용됩니다.
창설 후, 그것은 반드시 이렇게 해야 한다.

당신의 내용 모델 계기판은 아래와 같아야 합니다.

개츠와 비교하기 전에 가상 내용을 추가합니다.

컨텐츠로 이동하여 Description를 선택한 다음 컨텐츠 유형을 인덱스로 선택하고 add entry를 클릭합니다.

클릭Add New index하고 대시보드로 돌아갑니다.

about us와 Location에 대해 동일한 과정을 반복하고 정적 데이터를 추가합니다. 이 데이터를 사용하여 프로그램의 앞부분에 렌더링할 것입니다.

설치 과정은 이제 끝났을 겁니다.게이츠비 사이트와 콘텐츠풀을 연결합시다.

게이츠비와 만족도를 연결하는 방법:

설정을 클릭하고 API 키로 이동한 후 publish

API 키와 공간 id를 만들었기 때문입니다. 저희 사이트와 연결하겠습니다.Add API key를 열고 액세스 토큰의 공간 id와 API 키를 추가합니다.

🚨 API 키를 일반 텍스트로 추가하지 마십시오.
환경 변수를 만들기 위해 아래 명령을 실행하여 설치gatsby-config.js합니다.환경 변수를 관리하는 데 도움이 됩니다.

yarn add dotenv

이후 프로젝트 폴더의 루트 디렉터리에 dotenv 파일을 만들고 변수를 만들고 contentful access token 값을 추가합니다..env 파일에 env 변수를 추가합니다.

const dotenv = require('dotenv')

dotenv.config()

module.exports = {
  siteMetadata: {
    title: "Audio core",
  },
  plugins: [
    {
      resolve: "gatsby-source-contentful",
      options: {
        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
        spaceId: process.env.CONTENTFUL_SPACE_ID,
      },
    },
  ],
};