gatsby를 통해 프로젝트를 생성해주고, 깃헙에 업로드까지 진행했다.
이제 남은 것은 사이트 배포하기! 그리고 나의 깃헙페이지 주소에 접속해보면 초기 세팅이 완료된다!

배포전 npm run build 로 빌드하고 깃헙에 백날 백업해봐야 내 도메인으로 접속했을때 뜨는것은 readme.md의 모습뿐이다.
내가 작성한 index.js는, 'hello gatsby!'는 어디에 있단 말인가..!

지금 우리에게 필요한 것은 배포! 배포를 하지 않았기 때문인데, 배포는 또 뭐란말인가..(나는야 촙촙)
배포는 빌드한 파일들(product용 압축코드?와 기타 등등)을 사용자가 접근할수 있는 환경에 배치하는 것! 즉 사용자가 쓸수 있게 된단 말씀!

surge

gatsby 공식 문서의 튜토리얼로 배포하는 과정을 보면 surge가 나온다. 하지만 surge에서 제공하는 도메인을 사용해야하는데, 나는 github를 사용할 것이기에.. 방법은 적지만 .. 안쓸것!

# surge를 전역에 설치하자
$ npm install --global surge

# surge 로그인을 한다. 메일과 비밀번호를 등록하면 된다
$ surge login 

# 배포전 build를 진행하자 > public 폴더에 파일이 생성된다.
$ gatsby build

# surge로 배포하기 : build로 생성된 파일을 배포한다.
$ surge public/

# Running as tropical.kitsch@gmail.com (Student)
#
#        project: public/
#         domain: silly-mist.surge.sh <<---- 랜덤 제공 도메인
#         upload: [] 100% eta: 0.0s (15 files, 931544 bytes)
#            CDN: [====================] 100%
#
#             IP: xx.xxx.xx.xxx
#
#   Success! - Published to silly-mist.surge.sh

제공된 도메인으로 접속하면 위와같이 내가 작성한 페이지가 화면에 뜬다! 이제 배포란 것을 대~~~충 알았으니 다시 github 도메인으로 배포해보자!

gh-pages

설치에 앞서 git branch를 만들고 새로운 branch에서 작업하도록 하자

$ git branch test
$ git checkout test

install

배포(deploy)를 진행하기 위해선 모듈 설치가 필요하다. 아래명령어를 통해 gh-pages 모듈을 설치한다.

npm i -D gh-pages

package.json

{
  "homepage" : "https://<깃헙아이디>.github.io/<레포지토리명>/"
  "script" : {
    "deploy" : "gatsby build && gh-pages -d public -b master"
}

앞으로 yarn deploy 또는 npm deploy를 통해 배포가 가능하다. 위 스크립트에 빌드과정을 넣었으니 배포하면 빌드작업 을 따로 할 필요없다!

배포 에러 발생?

미처 캡처하지 못했는데 게츠비스타터를 통해 프로젝트를 생성하고 gh-pages 설치후 yarn deploy를 실행하면 에러가 나는 경우가 있다.
게츠비 이슈에서 문제를 해결했는데, 스타터의 react, react-dom, gatsby를 다시 설치하고 gatsby clean 명령어 입력하면 해결된다! 버전 문제인듯!

$ npm i react react-dom gatsby
$ gatsby clean
$ yarn deploy
# 완벽하게 배포완료!

위와 같이 아주 잘 뜨는 화면~! 이제 본격 코딩을 시작해보자!