Gatsby Github Page 배포하기

Gatsby 환경 설정

npm install gh-pages --save-dev 을 해줍니다.

이 상태로 build를 하고 Github-pages 에서 하이퍼 링크(예를들어 /about)를 누르면 username.github.io/reponame/about 으로 가지 않고 user.name.github.io/about 으로 리다이렉트가 됩니다. 이를 방지 하기 위해서
gatsby-config.js 를 수정해줘야 합니다

// gatsby-config.js

module.exports = {
  pathPrefix: "reponame",
}

만약, github page를 위와 같은 주소로 설정하지 않고 임의의 주소로 설정 하였으면 pathPrefix 를 설정하지 않아도 됩니다.

GitHub 환경 설정

Github pages 를 matser branch 에서 호스팅이 되도록 되어있는데, build와 hosting을 위해서는 브랜치를 하나 더 만들어줘야 합니다.

git checkout -b source master

를 해서 source 브랜치를 만들어주고,
package.json 에 scripts를 수정해줍니다

  "scripts": {
    "deploy": "gatsby build && gh-pages -d public -b master"
  }

npm run deploy를 실행하면 정상적으로 build 가 되는 것을 확인 할 수 있습니다.

++ 오류
만약, styled-component를 사용하는데 build를 할 때, (theme undefined)오류가 생긴다면 emotion-plugin을 없애줘야 build 할 때 오류가 사라집니다.