npm을 이용해서 gh-pages 배포하기

gh-pages로 호스팅을 하는 방법에는 여러가지가 있다.

 

GitHub Desktop을 사용해도 되고 직접 gh-pages 브랜치를 만들어도 된다.

 

물론, 모듈을 이용해 VSCode에서 직접 올리는 방법도 있다.

---

 

npm i gh-pages

우선 위의 명령어를 통해 배포하고자 하는 프로젝트에 gh-pages 모듈을 설치한다.

 

 

설치된 후

npm run build

명령어를 입력하면 작성한 코드들이 build라는 폴더 안에 압축되어 빌드되는 것을 확인할 수 있다.

 

 

추가적으로 package.json의 하단에 아래 코드를 추가한다

"homepage": "https://사용자이름.github.io/레포지토리이름"

예시는 아래와 같다.

{
  "name": "어쩌구",
  "version": "0.1.0",
  "private": true,
  "dependencies": { (...) },
  "scripts": { (...) },
  "devDependencies": { (...) },
  "homepage": "https://HBSPS.github.io/레포지토리이름"
}

hompage로 설정한 주소로 gh-pages가 만들어질 것이다.

 

 

빌드 후 배포까지 자동으로 되도록 설정하기 위해 아래와 같이 script를 추가한다.

"deploy": "gh-pages -d build",
"predeploy": "npm run build"

예시는 아래와 같다.

(...)
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "gh-pages -d build",
    "predeploy": "npm run build"
},
(...)

 

 

마지막으로 아래 명령어를 입력하면 배포가 완료된다.

npm run deploy

predeloy script를 추가했기 때문에 deploy script가 실행되기 전에 자동으로 먼저 실행된다.

 

따라서, npm run deploy를 입력하면 predeploy가 먼저 실행되어 프로젝트가 빌드되고 deploy가 실행되어 gh-pages에 배포된다.

 

 

해당 모듈에는 gh-pages로 배포하는 것 뿐만 아니라 다양한 기능들이 있으며 아래 GitHub를 참고하여 사용할 수 있다.

tschaub/gh-pages: General purpose task for publishing files to a gh-pages branch on GitHub

GitHub - tschaub/gh-pages: General purpose task for publishing files to a gh-pages branch on GitHub

---

GitHub Desktop을 사용하는 방법은 아래 글을 참고하면 된다.

2022.04.01 - [IT/GitHub] - (GitHub Desktop 이용)GitHub gh-pages로 호스팅하기

(GitHub Desktop 이용)GitHub gh-pages로 호스팅하기