Gatsby(GraphiQL/React)와Wordpress로 JAMstack의 사이트를 구축하다
방법
개요
Wordpress
Wordpress를 작성합니다.
이번에는 과거 개인이 만든 친구 밴드 사이트를 소재로 사용했다.
pure g three
사이트의 구조는 다음과 같다.
전제로 포스트의 분류는
live와blog가 있다.이 밖에 사이드바 등 부품은 Gatsby 이전 대상에 속하지 않는다.
Wordpress 플러그인
Wordpress에 다음 내용 추가
이때 액세스할 수 있어야 합니다
{Wordpress-site}/graphql.https://puregthree.com/graphql
창설
Gatsby의 초기 형태를 만들다
$ gatsby new {任意の名前} https://github.com/TylerBarnes/using-gatsby-source-wordpress-experimental
※ 2020년 10월 28일 당시의 정상적인 동작을 확인했습니다.
gatsby-config.js의 다음 내용을 변경합니다.
require("dotenv").config({
path: `.env.GATSBY_CONCURRENT_DOWNLOAD`,
})
// require .env.development or .env.production
require("dotenv").config({
path: `.env.${process.env.NODE_ENV}`,
})
module.exports = {
plugins: [
`gatsby-plugin-sharp`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/assets/images`,
},
},
{
resolve: `gatsby-source-wordpress-experimental`,
options: {
url:
process.env.WPGRAPHQL_URL ||
`https://puregthree.com/graphql`, // <--- ここをWordpress側のGraphQLのURLに設定する
verbose: true,
develop: {
hardCacheMediaFiles: true,
},
debug: {
graphql: {
writeQueriesToDisk: true,
},
},
type: {
Post: {
limit:
process.env.NODE_ENV === `development`
? // Lets just pull 50 posts in development to make it easy on ourselves.
500 // <--- デフォルトだと50ページまでしか取得しないので状況によって増やしたりする
: // and we don't actually need more than 5000 in production for this particular site
5000,
},
},
useACF: true,
},
},
`gatsby-plugin-chakra-ui`,
`gatsby-transformer-sharp`,
{
resolve: "gatsby-plugin-react-svg",
options: {
rule: {
include: /\.inline\.svg$/, // See below to configure properly
},
},
},
`gatsby-plugin-netlify-cache`,
],
}
Gatsby를 로컬에서 시작합니다.
$ yarn develop
콘서트와 블로그는 404에 열린다.
분류 페이지를 얻지 못했기 때문이다.
Gatsby 페이지 추가
범주 페이지를 만듭니다.
다음은 블로그.js, live.새 js.
WP 데이터에서 category가 축소한 post id, URL, title의 일람표를 확보했다.
import React from 'react'
import { Heading, Box } from '@chakra-ui/core';
import Layout from '../../components/layout';
export default ({data}) => (
<Layout>
<Box>
<Heading as="h1" size="xl">Live List</Heading>
<ul>
{data.allWpPost.edges.map( (edge) => (
<li key={edge.node.id}>
<a href={edge.node.uri}>
{edge.node.title}
</a>
</li>
))}
</ul>
</Box>
</Layout>
)
export const query = graphql`
{
# live / blog でフィルターをかける
allWpPost(filter: {categories: {nodes: {elemMatch: {slug: {eq: "live"}}}}}, sort: {order: DESC, fields: date}) {
edges {
node {
id
uri
title
}
}
}
}
`
이번에 무사히 표명할 수 있게 되었다.
이번에는 주로 환경을 구축하고 페이지 제작은 여기서 끝냅니다.
Deploy
Netlify 를 사용한 기사입니다.
다음과 같이 설계되었습니다.
(이것은 잠시 후 삭제됩니다.)
https://vibrant-lamport-4d47b2.netlify.app/
협력을 구축하다
술자리까지 만들었으니 다음엔 자동화할 거야.
하고 싶은 일은 워드프레스 업데이트를 트리거로 Gatsby를 구축하고 디자인하는 것이다.
Netlify
BuildHook을 미리 설정하고 URL을 확인합니다.
Wordpress 플러그인
다음 플러그인을 추가합니다.
가져온 후 설정 > Deployments 화면에서 구축 설정을 합니다.
이렇게 설정하면 완성됩니다.
Wordpress 쪽을 업데이트하면 Netlify에서 Gatsby가 재건되었다는 것을 알 수 있습니다.
이번 테스트에서는
テストpost라는 제목의 포스터가 발표됐다.나중에 삭제합니다.
변경 사항은 Netlify 에 반영됩니다.
장점
결점
총결산
아직 비즈니스 프로덕션 환경에 몰입할 수는 없지만 개인 블로그에 CMS의Wordpress를 남기고 싶지만 인코딩할 때 PHP와 직접 접촉하고 싶지 않아 js로 완성하고 싶다면 해볼 만하다고 생각한다.
또한, 이 자리를 빌려 협조를 받은 퓨어 그 더리에게 감사를 드립니다.
Reference
이 문제에 관하여(Gatsby(GraphiQL/React)와Wordpress로 JAMstack의 사이트를 구축하다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/sugiii8/articles/0ae1ffc34affb8969eff텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
