2021년도판 Wordpress × Gatsby.js로 고속 블로그 작성

Wordpress × Gatsby.js에서 블로그 작성!

Wordpress를 헤드리스 CMS로, Gatsby.js로 스타일링하고 블로그를 만들고 싶다 ~라고 생각 (이전에는 contentful을 사용하고있었습니다 만, 지금은 플랜 등이 상당히 바뀌어 유료가 아니면 사용할 수 없거나 해 버렸습니다. 그래서), 조속히 해 보았습니다.

이 Wordpress와 Gatsby.js를 결합하는 방법은 드물지 않기 때문에 검색하면 블로그와 튜토리얼도 많이 나옵니다만, 공식 설정 등이 1년 정도로 상당히 바뀌고 있어 조금 번거롭게 되었기 때문에 여기 에 기록이 남겨두고 싶습니다.

첫째, Wordpress에서 자신의 블로그 만들기

이것은 로컬 호스트에서 자신의 PC에서 호스팅하는 Wordpress이어도 좋고, 기존의 Wordpress 도메인의 블로그를 만들어도 좋고, 나는 우선 엑스 서버를 계약하고 여기에 Wordpress를 넣어 보았습니다. .

Wordpress에 플러그인 도입

Gatsby.js에서 Wordpress를 사용하려면 두 개의 플러그인을 설치해야합니다.
관리 계정의 '플러그인'에서 1. WP Gatsby 및 2. WP GraphQL을 추가하고 이를 '활성화'합니다.

Gatsby.js의 프로젝트 폴더 만들기

여기서는 Gatsby.js를 시작하는 방법을 자세히 설명하지는 않지만 다음 디렉토리에서 임의의 디렉토리에 스타터 폴더를 만듭니다. (Gatsby.js 공식적으로는 표준 스타터 폴더 이외에 다양한 것이 준비되어 있으므로 거기에서 DL 해 오는 것도있을 것입니다.)

gatsby new 任意のプロジェクト名 

Gatsby 폴더에 Wordpress 플러그인 설치

프로젝트 폴더에서 다음 명령을 두드리면됩니다.

npm install gatsby-source-wordpress

gatsby-config.js에 Wordpress 정보를 입력하십시오.

gatsby-config.js에 {resolve} 다음을 추가합니다.

gatsby-config.js

module.exports = {
  ...
  plugins: [
    ...,
    {
      resolve: `gatsby-source-wordpress`,
      options: {
        url:
        // allows a fallback url if WPGRAPHQL_URL is not set in the env, this may be a local or remote WP instance.
          process.env.WPGRAPHQL_URL ||
          `https://localhost/graphql`,
        schema: {
          //Prefixes all WP Types with "Wp" so "Post and allPost" become "WpPost and allWpPost".
          typePrefix: `Wp`,
        },
        develop: {
          //caches media files outside of Gatsby's default cache an thus allows them to persist through a cache reset.
          hardCacheMediaFiles: true,
        },
        type: {
          Post: {
            limit:
              process.env.NODE_ENV === `development`
                ? // Lets just pull 50 posts in development to make it easy on ourselves (aka. faster).
                  50
                : // and we don't actually need more than 5000 in production for this particular site
                  5000,
          },
        },
      },
    },
  ]
}

이것은 공식에서 가져온 것입니다만, url 에 自分のWPのURL+/graphql 를 붙여 넣습니다.

이 상태에서 npm start 그러면 localhost:8000/__graphql에 액세스한 상태에서 블로그 게시물 정보를 얻을 수 있습니다.

Top 페이지 편집

이대로라면 아무것도 Gatsby에게는 표시되지 않으므로 index.js
index.js

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"

const Index = 
({ data }) => {
  return (
    <Layout>
      <SEO title="home" />
      <h4>Posts</h4>
      {data.allWpPost.edges.map(({ node }) => (
        <div>
          <p>{node.title}</p>
          <div dangerouslySetInnerHTML={{ __html: node.excerpt }} />
        </div>
      ))}
    </Layout>
  )
}

export const pageQuery = graphql`
  query {
    allWpPost(sort: { fields: [date] }) {
      edges {
        node {
          title
          excerpt
        }
      }
    }
  }`

export default Index

이제 localhost:8000를 시작합니다.


할 수 있었습니다! 사쿠토 여기까지 비교적 간단하게 할 수 있었습니다.
그리고는 자신을 위해서 여러가지 커스터마이즈 하는 것뿐입니다.