Gatsby로 블로그 만들기!

GatsbyJS란 ?

Gatsby is a free and open source framework based on React

Gatsby 공식 홈페이지에서 Gatsby를 위와 같이 설명하고 있다.

React를 기반으로 하는 꽁짜! 오픈소스! 이며, 정적 사이트 생성 프레임 워크라고 생각하면 될 듯싶다.

나는 사실 React를 해본 적이 없다… 하지만 템플릿을 가져다 쓰면서 이리저리 고생(노가다)해보면 어떻게든 만들 수 있지 않을까? 라고 생각해 시작해보았다.

어쨌든 이렇게 글을 쓸 수 있으니 나름 성공했다 (짝짝짝짝) ~

Template은 Gatsby Template사이트에서 gatsby-starter-lumen를 선택했다.

Gatsby의 ecosystem은 잘 되어있어, 다른 플랫폼 및 API들과 연동이 상당히 편리하다.

lumen은 총 74개의 ecosystem plugins를 사용했다. 하지만 지금 내가 이 중에 이해하고 쓸 수 있는 건 한 10개도 안 되는 거 같다 ㅎㅎ

Gatsby Diagram

Gatsby에서는 React의 컴포넌트를 제외한 부분의 모든 것을 Data라고 한다.

이러한 Data들을 Graphql로 감싸줘서 필요한 것들을 컴포넌트에 넣어 주는 것이다.

내 블로그 또한 미리 정의한 Graphql type에 맞추어 markDown파일을 작성한다.

그 후 Graphql을 사용하여 React 컴포넌트에 필요한 Data들을 넣어주는 방식으로 글을 띄워준다.

블로그 배포 또한 Gatsby Plugin을 사용하면 굉장히 쉽다.

하지만 나는 약 1년 전에 나중에 블로그를 만들어야지! 하고 집에 굴러다니는 Acer 노트북으로 개인 서버를 만들었던 터라 개인 서버로 배포했다.

Netlify, Github로 배포하는 방법들은 구글링을 통해 쉽게 관련 포스팅을 확인할 수 있다…(나중에 API로 배포한다면 그때 다시 포스팅해야지..)

간단한 개발 및 배포 설명

$ npm install -g gatsby-cli

위 명령을 통해 gatsby 명령어를 bash에서 사용할 수 있다.

(CLI = Command Line Interface)

그 후 package.json이 위치한 폴더에서

$ gatsby develop

위 명령을 입력하고 오류 없이 실행이 됬다면 위 화면이 뜬다.

그 다음 localhost:8000으로 접속하면 웹페이지가 잘 뜬 것을 확인할 수 있다.

localhost:8000/___graphql은 GraphiQL (개인적으론 PlayGround 선호^^)이라고 Graphql type, Query, Mutation, Subscription 등을 확인하고 test할 수 있는데, 이 부분은 Graphql 카테고리에서 나중에 포스팅하겠다.

포트는 아래 명령어를 통해 원하는 포트로 지정할 수 있다.

$ gatsby develop -p 원하는 포트 숫자

$ gatsby develop --port 원하는 포트 숫자

거의 모든 프로그램은 Dev (개발 버전), Deploy (배포 버전)이 있다.

develop 명령어를 통해 개발자는 그 환경에서 개발을 하며 작성한 코드의 결과를 실시간으로 확인할 수 있다.

그럼 배포는 뭘로 하지? $ gatsby build 로 배포 버전 만들 수 있다.

develop 또는 bulid 수행 후 .cache 폴더와 public 폴더가 만들어진다.

이전에 develop 또는 bulid를 했었다면, $ gatsby clean를 통해 .cache와 public를 삭제해준 후 develop 또는 build를 하자! (가끔 이전 결과물과 충돌이 나서 오류가 난다)

배포는 도와주는 serve는 gatsby, pm2, npx, npm 등에 있다.

여러 고생 끝에 결국 나는 pm2에서 npx serve를 사용하였다. 이유는 다음 포스팅에서… :D