자습서: WordPress 및 Gatsby로 사이트 구축

헤드리스 WordPress를 사용하면 WordPress로 정적 웹사이트를 만들 수 있습니다. 이러한 유형의 웹사이트는 정적 파일이 서버에 저장되기 때문에 더 빠르게 로드됩니다. 문제는 WordPress로 헤드리스 웹 사이트를 어떻게 구축합니까?

이것은 Gatsby와 같은 정적 사이트 생성기가 들어오는 곳입니다. 이 생성기는 WordPress에서 기능이 풍부한 정적 웹 사이트를 구축하는 데 도움이 됩니다. 그러나 이를 최대한 활용하려면 WordPress 설치와 올바르게 통합해야 합니다. 이 통합에는 WordPress Gatsby 설치, 생성 및 구성이 포함됩니다.

이 기사에서는 Gatsby가 무엇인지, 왜 WordPress에서 Gatsby를 사용해야 하는지 살펴보겠습니다. 그런 다음 Gatsby를 사용하는 방법과 사용해야 하는지 여부를 자세히 설명합니다. 시작하자!

개츠비는 무엇입니까?

간단히 말해서 Gatsby는 정적 사이트 생성기입니다. 즉, Gatsby는 웹사이트 서버에 업로드되는 정적 HTML 파일을 생성합니다. 방문자가 사이트를 방문하면 WordPress에서 일반적으로 제공하는 동적 콘텐츠 대신 이러한 정적 파일이 브라우저에 제공됩니다.

이러한 파일을 생성하기 위해 Gatsby는 다양한 소스에서 웹 사이트에 대한 데이터를 가져옵니다. 여기에는 기존 웹 사이트, API 호출 및 GraphQL을 통한 플랫 파일이 포함됩니다. 그러면 설정한 구성을 기반으로 정적 웹사이트가 구축됩니다.

다른 정적 사이트 생성기와 비교할 때 Gatsby는 비교적 새롭습니다. 그러나 이것은 많은 회사들이 시도하는 것을 막지 못했습니다. 가장 큰 예 중 하나는 Gatsby에서 제공하는 Airbnb Engineering & Data Science 블로그입니다.

Gatsby를 WordPress와 함께 사용하는 이유는 무엇입니까?

워드프레스로 정적인 웹사이트를 만들 수 있는데 왜 워드프레스와 개츠비를 함께 사용해야 하는지 궁금할 것이다. WordPress는 그 자체로 강력하지만 Gatsby는 더 빠른 속도와 더 낮은 서버 비용을 포함하여 웹 사이트에 원하는 몇 가지 이점을 제공합니다. Gatsby의 장단점을 이해하면 현명한 결정을 내리는 데 도움이 될 수 있습니다.

개츠비 사용의 장점

Gatsby는 모든 웹사이트가 활용할 수 있는 다음과 같은 다양한 이점을 제공합니다.

• 더 빠른 로딩 속도. 정적 웹사이트는 동적 웹사이트보다 빠르게 로드되며 이는 검색 엔진 최적화(SEO)에 영향을 미칠 수 있습니다. 페이지 로딩 속도는 검색 엔진에서 사용하는 신호이며 웹사이트의 이탈률에 영향을 미칩니다.
• 서버 비용 감소. 동적 웹 사이트에는 호환되는 기술 스택과 서버가 필요합니다. 정적 웹사이트는 그렇지 않으며 모든 서버에서 호스팅할 수 있습니다. 이렇게 하면 서버 비용을 줄일 수 있습니다.
• 향상된 보안. 정적 웹 사이트는 향상된 보안을 제공합니다. 제공되는 정적 HTML 파일은 해커가 작업할 수 있는 기능을 많이 제공하지 않습니다. 이러한 파일이 어떤 이유로든 손실된 경우 Gatsby로 다시 생성할 수도 있습니다.

귀하의 웹 사이트는 이러한 모든 이점을 누릴 수 있습니다. 그러나 Gatsby 사용의 단점과 비교하여 평가해야 합니다.

개츠비 사용의 단점

완벽한 소프트웨어 시스템은 없으며 Gatsby에는 알아야 할 몇 가지 단점이 있습니다.

• 기술 지식이 필요합니다. Gatsby는 ReactJS를 기반으로 하며 GraphQL을 사용합니다. 이를 사용하려면 JavaScript에 대한 약간의 이해가 필요합니다. 또한 웹 사이트를 구축하려면 GraphQL에 대한 기본 지식이 있어야 합니다.
• 동적 콘텐츠가 없습니다. Gatsby는 정적 웹사이트만 생성합니다. 연락처 양식과 같은 동적 콘텐츠를 원하는 경우 타사 공급자를 통해 리디렉션해야 합니다.

많은 개발자들이 Gatsby의 장점이 단점보다 크다고 생각하지만 두 가지 모두 미리 이해하는 것이 중요합니다.

WordPress에서 Gatsby를 어떻게 사용합니까?

Gatsby를 설정하는 데 시간이 걸릴 수 있으며 수행해야 하는 특정 단계가 있습니다. 사이트 생성 및 구성을 시작하려면 먼저 Gatsby를 설치해야 합니다. 또한 몇 가지 초기 고려 사항이 있습니다.

1단계: 전제 조건 확인

Gatsby를 설치하기 전에 웹 사이트 환경에 NodeJS와 npm을 설치해야 합니다. Git은 코드 관리에도 필요합니다. 필수 구성 요소를 설치하는 단계는 실행하는 운영 체제에 따라 다릅니다.

Windows가 있는 경우 다운로드 페이지의 설치 프로그램을 통해 NodeJS 및 Git을 설치할 수 있습니다. Mac에서도 마찬가지입니다. 그러나 Linux를 실행하는 경우 apt와 같은 패키지 설치 프로그램이 필요합니다.

2단계: 개츠비 설치

NodeJS와 Git을 설치한 후 Gatsby 설치를 시작할 수 있습니다. 가장 쉬운 방법은 소프트웨어 터미널에서 다음 명령을 사용하는 것입니다.

 npm install -g gatsby-cli

이 명령은 설치 프로그램을 자동으로 실행합니다. Gatsby를 설치하기 전에 먼저 모든 종속성을 다운로드하고 설치합니다. 완료되면 첫 번째 Gatsby 웹사이트를 만들 수 있습니다.

3단계: 개츠비 사이트 만들기

Gatsby 웹사이트를 만들려면 다음 명령을 실행해야 합니다.

 gatsby new gatsby-site

이 명령은 Gatsby 시작 템플릿을 복제하고 /gatsby-wordpress 디렉터리에 배치합니다. 복제 및 설치가 완료되면 사이트의 개발 버전을 열 수 있습니다. 이는 다음 명령을 사용하여 수행됩니다.

 gatsby develop

개발 환경이 실행되는 동안 로컬에서 새 웹 사이트를 방문할 수 있습니다. 웹 브라우저에서 http://localhost:8000을 입력하면 기본 템플릿이 열립니다.

이 페이지가 보이면 웹 사이트 구축을 시작할 수 있습니다. 이는 해당 웹 사이트의 공개 디렉토리에 정적 파일을 생성하는 것을 의미합니다. 다음 명령은 tohse 정적 파일 생성을 자동으로 시작합니다.

 gatsby build

이 명령은 또한 웹 사이트에 대한 사전 라우팅 JavaScript 코드 번들을 생성합니다. 그런 다음 serve 명령을 사용하여 새 웹사이트를 로컬로 표시할 수 있습니다.

 gatsby serve

이 명령은 빌드 명령을 이미 실행한 경우에만 작동합니다.

4단계: Gatsby를 WordPress에 연결

이제 기본 정적 웹 사이트가 있지만 WordPress와 통합해야 합니다. 이렇게 하면 Gatsby 사이트가 WordPress 블로그 주소로 연결되어 개발 서버를 실행할 때 최신 데이터를 가져올 수 있습니다. 연결되면 Gatsby는 현재 WordPress 템플릿을 기반으로 정적 웹 사이트를 구축합니다.

둘을 연결하려면 WordPress용 Gatsby 플러그인을 설치해야 합니다. 다음 명령이 이를 처리합니다.

 npm install gatsby-source-wordpress

플러그인을 설치한 후 Gatsby 구성을 시작할 수 있습니다.

5단계: 개츠비 구성

Gatsby를 구성하려면 gatsby-config.js 파일로 작업해야 합니다. 해당 파일에 다음 코드를 추가합니다.

 module.exports = { ... plugins: [ ..., { resolve: `gatsby-source-wordpress`, options: { // your WordPress source baseUrl: `wpexample.com`, protocol: `https`, // is it hosted on wordpress.com, or self-hosted? hostingWPCOM: false, // does your site use the Advanced Custom Fields Plugin? useACF: false } }, ] }

WordPress 웹사이트를 가리키도록 이 코드를 업데이트합니다. 웹사이트가 로컬에서 호스팅되는 경우 baseUrl 다음에 웹사이트 URL 대신 localhost:8888/wordpress를 사용할 수 있습니다. 파일을 저장한 후 페이지 템플릿을 빌드해야 합니다.

6단계: 페이지 템플릿 구축

페이지 템플릿 작성을 통해 Gatsby는 WordPress 웹사이트의 모든 페이지에 대한 게시물을 생성할 수 있습니다. 소스 플러그인은 이러한 페이지에 대해 WordPress에서 필요한 데이터를 가져오지만 디자인 템플릿을 만들어야 합니다.

gatsby-node.js 파일에 다음 코드를 추가합니다.

 const path = require(`path`) const { slash } = require(`gatsby-core-utils`) exports.createPages = async ({ graphql, actions }) => { const { createPage } = actions // query content for WordPress posts const result = await graphql(` query { allWordpressPost { edges { node { id slug } } } } `) const postTemplate = path.resolve(`./src/templates/post.js`) result.data.allWordpressPost.edges.forEach(edge => { createPage({ // will be the url for the page path: edge.node.slug, // specify the component template of your choice component: slash(postTemplate), // In the ^template's GraphQL query, 'id' will be available // as a GraphQL variable to query for this posts's data. context: { id: edge.node.id, }, }) }) }

WordPress에서 모든 데이터를 호출한 후 Gatsby는 각 게시물에 대한 페이지를 생성합니다. 개발 명령을 사용하면 생성된 URL을 사용하여 각각의 새 페이지로 이동할 수 있습니다.

Gatsby를 WordPress에 사용해야 합니까?

Gatsby는 웹 사이트의 속도와 보안을 향상시킬 수 있지만 모든 사람에게 올바른 선택은 아닙니다. 웹 사이트에 자주 변경되지 않는 정적 콘텐츠가 있는 경우 Gatsby가 도움이 될 수 있습니다. 그러나 웹 사이트에 동적 콘텐츠가 필요한 경우 기존 WordPress가 더 나은 선택일 수 있습니다.

WP 엔진에서 귀하의 사이트를 최대한 활용하십시오

Gatsby는 WordPress와 쉽게 통합할 수 있는 효과적인 정적 웹 사이트 생성기입니다. 시스템을 설치하고 구성하기 위해 따라야 할 단계가 있습니다. 또한 시작하기 전에 Gatsby 및 GraphQL에 대한 지식이 어느 정도 있어야 합니다.

정적 콘텐츠는 웹 사이트의 속도와 보안을 향상시킬 수 있지만 올바른 호스트도 필요합니다. WP 엔진은 귀하의 웹사이트에 최상의 디지털 경험을 제공할 수 있는 최고의 리소스를 제공합니다. 따라서 개발에 집중할 수 있는 시간이 더 많아집니다!