gh-pages 사용하기

열심히 만든 웹을 Github Pages를 통해 자랑해보자
이때 사용할 수 있는 간편한 패키지가 있다

terminal
1
2
3
4
5
6
npm i -D gh-pages
gh-pages -d dist

# or

npx gh-pages -d dist

gh-pages

  • Github Pages 기능을 통해 정적 웹을 호스팅 할 수 있다
  • gh-pages라는 패키지를 사용하면 간편하게 배포할 수 있다
  • gh-pages를 설치하고 gh-pages -d {빌드 디렉터리} 명령을 하면,
  • gh-pages라는 브랜치가 자동으로 생성되고 빌드 디렉터리의 내용이 깃헙 저장소에 올라간다
  • github pages 세팅도 자동으로 된다
  • package.json이 프로젝트 루트 디렉터리에 존재해야 한다
  • 바닐라 웹 프로젝트를 진행한 경우에도 gh-pages를 사용하고 싶다면,
  • npm init -y 명령으로 임시로 package.json을 생성하고
  • npx로 gh-pages를 실행하면 된다

옵션 사용하기

terminal
1
npx gh-pages -d dist -b dist --dotfiles --tag \"🚀update\"
  • -d dist dist 디렉터리를
  • -b dist 원격 레포의 dist 브랜치에
  • --dotfiles 닷 파일을 포함하고,
  • --tag \"🚀update\" 태그도 지정해 줄 수 있다
  • 더 많은 옵션은 -h로 확인

nextjs 배포하기

terminal
1
2
touch .nojekyll
npx gh-pages -t true -d out
  • .nojekyll 파일을 생성해 줘야 한다
  • gh-pages는 기본적으로 지킬 기반으로 동작한다
  • 그러면 _로 시작하는 파일들을 제대로 동작하지 않는다
  • 그래서 지킬을 사용하지 않는다는 것을 .nojekyll파일을 생성하여 알릴 수 있다
  • gh-pages로 배포할 때 -t true 옵션을 사용하는데,
  • .(dot)으로 시작하는 파일을 포함하여 배포하라는 뜻이다
  • 옵션을 사용하지 않는 다면 .nojekyll이 제외된다

참고

Author

chinsung

Posted on

2021-07-16

Updated on

2022-01-09

Licensed under

댓글