TIL-20210321

vuepress로 정적 페이지를 배포하는 방법을 알아보고 나서, 이제 github page에 어떻게 정적 페이지를 배포할 수 있을지 알아보자

github page에 적용하기

우리가 빌드한 파일은 dist 폴더를 root directory로 하여 배포파일이 빌드된다.
설정을 변경하면 다른 곳에 빌드 할 수도 있다.

먼저 빌드를 해서 빌드 파일이 어떻게 생성되는지 확인해보자

$ npm run build

지난번에 스크립트를 구성해 뒀기때문에 빌드 스크립트를 사용했다. 빌드에 성공하면 .vuepress에 dist라고 하는 디렉토리가 생성된다.

그렇다면 빌드 된 폴더dist을 github page의 root directory로 설정해 주어야 한다. github repository settings에서 어떤 폴더를 설정할지 정해줄 수 있다.

찾아보면 보통은 새로운 브랜치를 생성하여 dist 폴더만 커밋해 배포하는 방식을 많이 사용했다. 배포 파일을 따로 분리해 관리하는 방식이라 이 방법을 선택하기로 했다.

여러가지 방식이 있지만 다음과 같은 절차를 통해 배포본을 push하기로 했다.

[x] 1. 빌드를 한다. [] 2.dist에서 새로운 local repo를 생성한다. [] 3. 다시 원래 remote repo와 연결한다. [] 4. remote repo에 배포할 브랜치에 dist를 push 한다.

[x] dist에서 새로운 local repo를 생성한다.

$ cd docs/.vuepress/dist; git init

빌드한 파일에서 새로운 깃을 local repository를 생성한다.

[x] 원래 원격 repo와 연결한다.

$ git remote add origin # github page로 설정한 remote reop

원격 레포지토리를 연결한다.

[x] remote repo에서 배포할 브랜치에 현재 git repo를 push 한다.

$ git push origin master:gh-pages

현재 레포의 master 브랜치 (dist 폴더)를,
원격 레포지토리 (github pages repo)에서 gh-pages 브랜치에 푸시한다.

이제 github settings에서 디렉토리 설정을 해주면 배포 된다.

마치며

다음에는 github action에서 자동으로 배포본을 적용할 수 있는 방법을 알아보자 내가 만드는 페이지, sidebar등을 적용하는 방법을 알아보자