gatsby 정적 사이트 생성 & nginx 배포

1. 관련 모듈 설치

• 관련 모듈 최신 업데이트 : npm, node, yarn

$ node -v //node 버전 확인
$ npm cache clean -f //캐시 삭제
$ npm install -g n //nodejs 버전관리 플러그인
$ n latest //최신버전
$ n lts //lts 버전
$ n stable //안정버전
$ npm -v //npm 버전 확인
$ npm i -g npm //npm 업데이트(global 경로)
$ yarn upgrade //yarn 업그레이드(필수는 아님)

2. gatsby 설치

$ npm install -g gatsby-cli

3. gatsby 프로젝트 생성

• default 프로젝트 생성

$ gatsby new [프로젝트명]

4. 실행

• 아래의 방법 모두 가능

$ npm start
$ yarn start
$ gatsby develop 
$ gatsby develop -H 127.0.0.1 -p 3000

5. default 프로젝트가 아닌 스타터팩으로 생성

• https://www.gatsbyjs.com/starters/
• 위의 스타터팩 사이트에서 원하는 레이아웃 선택

$ gatsby new [프로젝트명] https://github.com/hasura/gatsby-gitbook-starter

6. 생성 후 수정

• content 폴더에 md 파일 추가/삭제/수정 하여 내용 변경
• 레이아웃은 react 수정해서 변경

7. build

• 아래 명령어로 build
• [프로젝트명]/public 에 배포용 파일들이 생성됨, 이 파일들 전부를 nginx 다큐머트 루트 폴더에 이동시켜야 함

$ gatsby build

8. nginx 배포

• build 된 파일들을 이동 시키고 nginx.conf 파일 수정
• build 된 파일의 경로를 root에 지정 후 nginx 재시작

$ vi nginx.conf
server {
        listen       8000;
        server_name  localhost;
        charset      utf-8;
        index        index.htm index.html;
        root         /gatsby-document/public;
    }