최소한의 구성에서 마이크로CMS와GatsbyJS를 연합하여 사용하는 방법

GatsbyJS와 공동으로 마이크로CMS를 사용했기 때문에 미리 방법을 공유한다.
마이크로CMS는 일본제 무두무두 무두 CMOS로 무료 틀이 충실하다는 평가를 받는다.Netlify CMS의 무료 서류와 비교해도 수지가 맞다.
대체로 CMS와 처음 작업한 사람을 가정해 해설한 것이기 때문에 경험이 있는 사람은 조금 너그럽게 읽을 수 있다.
가능한 한 필요한 통제를 최소화하고 협력에 필요한 부분만 설명한다.
성과물은 마이크로CMS에서 끌어온 보도자료 페이지로 생성된 곳이다.

차리다
① 마이크로CMS에 등록해 기사 준비
②GatsbyJS를 로컬로 설치하는 프로젝트
마이크로CMS는 무료 방안으로 사용된다.무료 테두리의 범위 등이 변경되는 경우도 있는데, 아래의 내용과 다른 경우가 있으니 양해해 주십시오.
① 마이크로CMS에 등록해 기사 준비
마이크로CMS 메일에서 맑은 곳 도해 설명으로 로그인하세요.서비스 이름과 서비스 ID는 마음에 드는 이름이니 문제없습니다.
그나저나 서비스 ID도 관리 화면 ID가 될 수 있다.'서비스 ID'는 gatsby 측에서 설정한'서비스dId'입니다. 기억하세요.

그림이 있든 없든 상관없다.계속해.

API를 생성하는 API에 기사를 넣습니다.마이크로CMS는 API 10개를 무료로 제작할 수 있다.(for-qita→qita로 수정됨)

API를 추가할 때마다 여기 있는 + 버튼을 통해 추가할 수 있습니다.

목록 형식 또는 JSON 형식을 선택할 수 있습니다.기사를 매번 늘리기 위해 리스트 형식을 채택했다.

최소한의 필수 필드만 준비했다.구성 요소처럼 문장에 필요한 요소를 추가합니다.
이번에는 최소한의 구성을 목적으로 제목과 본문 내용, 비속어 3개만 선택했다.

문장을 추가하세요.

제목, 본문, 비속어를 적당히 입력하고 공개한다.

좀 더 적당히 기사를 한 편 써라.두 편의 보도가 나왔다.

②gatsbyJS를 로컬로 설치하는 프로젝트
이니시에이터 설치 템플릿은 디렉토리를 마이크로CMS-test로 이동합니다.
※ gatsby 명령을 사용할 수 없는 사람은 gatsby-cli를 설치하세요.

gatsby new microCMS-test https://github.com/gatsbyjs/gatsby-starter-hello-world

다음은 GatsbyJS와 마이크로CMOS를 연합시키는 플러그인을 설치합시다.

# npm
$ npm install gatsby-source-microcms

# or yarn
$ yarn add gatsby-source-microcms

합작을 위해 처리하다
gatsby-config.js 편집 및 GraghQL에서 가져오기
플러그인만 설명하면 쉽게 얻을 수 있습니다.
gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-microcms',
      options: {
        apiKey: 'X-API-KEY',
        serviceId: 'gatsby',
        apis: [{
          endpoint: 'qiita',
        }],
      },
    },
  ],
};

메뉴의 기어 플래그를 클릭하면 API 키가 표시됩니다.

기술할 수 있으면 개발자.
보충적으로 마이크로CMS에서 10개 이상의 명단을 취득하면 여기에 리밋을 설정할 수 있다.

gatsby develop

그리고 빌딩이 성공하면데이터베이스에 접근하세요.
은 임의의 이름을 표시합니다.설정된 title, body, slug가 표시되는지 확인하십시오.(이곳에 표시되지 않은 경우 대체gatsby-config.js의 설정에 오류가 있을 수 있으니 다시 확인해 주십시오.)
http://localhost:8000/___graphql
얻은 모든 slug에 따라 페이지 생성
Gatsby-node.js에서createPages를 사용하면 페이지를 간단하게 만들 수 있습니다.여기에 두 편의 문장의 페이지를 생성합니다.
gatsby-node.js 파일gatsby-config를js와 같은 층에서 합니다.
gatsby-node.js

// ※http://localhost:8000/___graphql上で確認できた「allMicrocms任意の名前」に書き換えてください
const path = require("path")
exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;

  const result = await graphql(
    `
    {
      allMicrocmsQiita {
        edges {
          node {
            body
            slug
            title
          }
        }
      }
    }
    `
  );

  if (result.errors) {
    throw result.errors;
  }

  result.data.allMicrocmsQiita.edges.forEach((post, index) => {
    createPage({
      path: post.node.slug,
      component: path.resolve('./src/templates/blog-post.js'),
      context: {
        post: post.node,
      },
    });
  });
};

component: 지정한 src에templates/blog-post를 사용합니다.js, 폴더, 파일을 만듭니다.
gatsby-node.js

    createPage({
      path: post.node.slug,
      component: path.resolve('./src/templates/blog-post.js'),
      context: {
        post: post.node,
      },
    });

path: 텍스트와 같이 도메인 이름(로컬 호스트) 이후의 URL입니다.
는 지정된 페이지의 원래 구성 요소입니다.
context: 페이지에 전달되는 속성입니다.
간편한 블로그 페이지.js 편집
gatsby-node.js 생성 시 페이지를 만드는 원본 구성 요소입니다.
보충하면 프로파일로 '페이지 컨텍스트' 를 받습니다. 이것은gatsby-node입니다.js에서 context가 지정한 값을 입력하십시오.
blog-post.js

import React from "react"

export default function Post({ pageContext }) {
    const { title, body } = pageContext.post;
    console.log(pageContext)
    return (
        <>
          <h1>{title}</h1>
          <div>これはテストです</div>
          <div dangerouslySetInnerHTML={{ __html: body }} />
        </>
    )
}

페이지가 생성되었는지 확인

gatsby develop

생성됨을 확인합니다.

여기에 최소한의 구성을 그려 마이크로CMS와 GatsbyJS를 결합시킬 수 있다.
제작 사은품 링크
slug에 대한 링크를 무료로 제작합니다.pages/index.js로 만들고 싶어요.
매우 간단하여 참고만 제공합니다.
index.js

// ※http://localhost:8000/___graphql上で確認できた「allMicrocms任意の名前」に書き換えてください
import React from "react"
import { graphql, Link } from "gatsby"

export default function Home({ data }) {
  return (
    <>
      <div>Hello world!</div>
      {data.allMicrocmsQiita.edges.map(edge => <div><Link key={edge.node.slug} to={edge.node.slug}>{edge.node.title}</Link></div>)}
    </>
  )
}

export const query = graphql`
query allMicrocmsQiita {
  allMicrocmsQiita {
    edges {
      node {
        title
        slug
      }
    }
  }
}

`

결과는 index 페이지에 링크를 생성했습니다.