Gatsby와 Netlify로 블로그를 구축하는 방법

이것은 내website's blog에서 교차 게시된 내 원본 게시물의 미리보기입니다.

개츠비 js는 무엇입니까

새로운JAM Stack(JavaScript, API 및 마크업)을 사용하여 오늘날 블로그를 구축하는 것이 훨씬 더 쉬워졌습니다. JAM 스택은
최신 아키텍처 - 웹 서버 없이 제공되는 JavaScript, API 및 미리 렌더링된 마크업을 사용하여 빠르고 안전한 사이트와 동적 앱을 만듭니다.

Gatsby는 ReactJS에 구축된 정적 사이트 생성기입니다. 가장 간단한 정의에서 정적 웹 사이트는 뷰어가 방문할 때 데이터베이스에서 데이터를 가져오지 않는 HTML 페이지 그룹입니다. 정적 사이트는 모든 방문자에게 동일하게 보입니다. 정적 사이트는 서버가 모든 방문자에게 동일한 응답을 보내므로 로드 속도도 더 빠릅니다. 그러나 방문자를 위해 콘텐츠를 사용자 지정할 수는 없습니다. Gatsby는 React 위에 구축되기 때문에 성능, 구성 요소, JSX, React 라이브러리 생태계 및 대규모 커뮤니티와 같은 React의 모든 이점을 얻을 수 있습니다. Gatsby Documentation도 매우 잘 작성되었으므로 문제가 없을 것입니다.

많은 정적 웹 사이트의 경우 빌드 프로세스 중에 외부 데이터 소스를 사용해야 합니다. Gatsby는 WordPress, API 및 Markdown과 같은 CMS를 포함하여 다양한 형태의 데이터를 지원합니다. 이 데이터에 액세스하기 위해 Gatsby는 GraphQL을 사용합니다.


개츠비 js 스키마

GraphQL을 알고 있다면 Gatsby를 사용하여 Markdown의 데이터에 쉽게 액세스할 수 있습니다. GraphQL이 처음이라면 배울 것이 또 하나 추가되지만 Gatsby와 함께 GraphQL을 사용하는 방법documentation에 많은 정보가 있습니다.

Note: GraphQL is a query language.

Gatsby js로 블로그 만들기

gatsby js로 블로그를 만들려면 몇 가지 단계를 수행해야 합니다. 아래 예에서 봅시다.

개츠비 CLI 설치

npm install -g gatsby-cli

새 사이트 만들기

gatsby new gatsby-site

디렉터리를 사이트 폴더로 변경

cd gatsby-site

개발 서버 시작

gatsby develop

네 단계 후에 gatsby 사이트가 준비되고 기본적으로 localhost:8000에서 gatsby 개발 환경에 액세스할 수 있습니다. src/pages에서 JavaScript 페이지를 편집할 수 있으며 변경 사항은 브라우저에서 자동으로 다시 로드됩니다.

프로덕션 빌드 생성

gatsby build

빌드 명령을 사용하여 Gatsby는 사이트에 대한 프로덕션 빌드를 수행합니다. 즉, 정적 HTML 페이지 생성을 의미합니다.

프로덕션 빌드를 로컬에서 제공

gatsby serve

마지막으로 쉘 명령으로 Gatsby는 빌드 사이트를 테스트하기 위해 로컬 HTML 서버를 시작합니다.

개츠비 프로젝트 구조

Gatsby 사이트를 설치하면 기본 프로젝트 구조를 얻을 수 있으며 기억해야 할 몇 가지 중요한 구성 파일이 있어 매우 간단합니다.

|-- /.cache
|-- /plugins
|-- /public
|-- /src
    |-- /pages
    |-- /templates
    |-- html.js
|-- /static
|-- gatsby-config.js
|-- gatsby-node.js
|-- gatsby-ssr.js
|-- gatsby-browser.js

Gatsby js 프로젝트 구조

gatsby 사이트에는 4개의 중요한 파일이 있습니다.

gatsby-config.js - 제목, 설명 등과 같은 메타데이터로 Gatsby에 대한 옵션 구성

gatsby-node.js - 빌드 프로세스에 대한 기본 설정을 사용자 지정하기 위한 Gatsby Node.js API입니다.

gatsby-browser.js - 브라우저의 기본 설정을 사용자 지정하기 위한 Gatsby 브라우저 API입니다.

gatsby-ssr.js - 서버 측 렌더링에 영향을 미치는 설정을 사용자 정의하기 위한 Gatsby 서버 측 렌더링 API.

나머지 게시물은 내website's blog에서 읽을 수 있습니다.