gh-pages 사용하기

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

terminal

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

npx gh-pages -d dist -b dist --dotfiles --tag \"🚀update\"

• -d dist dist 디렉터리를
• -b dist 원격 레포의 dist 브랜치에
• --dotfiles 닷 파일을 포함하고,
• --tag \"🚀update\" 태그도 지정해 줄 수 있다

• 더 많은 옵션은 -h로 확인

nextjs 배포하기

terminal

touch .nojekyll
npx gh-pages -t true -d out

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

참고

• https://github.com/tschaub/gh-pages