Github Page 종류
- User Site : 계정 1개에 대응되는 사이트 1개
- 계정이 Hanalia라고 한다면, Site URL은 hanalia.github.io
- 계정 1개당 사이트는 무조건 1개
- User Site의 Repository 이름은 hanalia.github.io
계정 1개당 Site를 하나만 만들 수 있기 때문에 일반적으로 권장되는 방법은 아님
- Project Site : Repository 1개에 대응되는 사이트 1개
- 만약 repo 이름이 test-project이면, site는 자동으로 hanalia.github.io/test-project
Github Page Hosting 방법
1) 그냥 css, js, html로만 되어 있는 파일의 경우 → 그냥 repo에 드래그하면 자동으로 사이트에 반영이 되어있음
2) React, Gatsby같이 한번 build를 거쳐야 하는 파일의 경우 (React로 짠 코드는 실제로 웹페이지 상에서 표시되는 코드와 다름)
- npm build를 통해서 static site를 위한 코드 (html, js 등등)을 만들어주고
- 그렇게 만들어진 코드를 github repo의 별도 branch (보통 gh-pages라는 branch)에 올려줌
- branch 이름을 gh-pages라고 하는 이유는, 이렇게 branch 이름을 만들어두면 github가 알아서 이 페이지의 코드를 호스팅해야 한다는 것을 인지하고 호스팅해줌
- 만약에 다른 이름의 branch로 올렸으면 그 branch가 호스팅 용 branch라는 것을 별도로 설정해줘야 함
→ 이 과정 전체가 번거로우니까 gh-pages라는 패키지가 존재함
1) npm install gh-pages로 해당 패키지를 다운로드한 후
2) package.json에서 아래와 같이 추가해주고
"deploy": "gatsby build --prefix-paths && gh-pages -d public”
3) npm run deploy를 하면 (deploy라는 명령어에서 정의된 작업을 수행)
자동으로 이 작업이 모두 이루어짐
- 결론적으로 이렇게 해주면 a) master branch에는 원본 코드가 있고, b) gh-pages branch에는 실제 사이트에서 표시되는 html, css, js가 있음
master branch의 코드가 조리 메뉴얼이고, gh-pages branch가 조리한 결과물이라고 보면 됨
github pages 호스팅과 관련된 npm script 이해하기
1) gatsby 프레임워크 이용할 때
"deploy": "gatsby build --prefix-paths && gh-pages -d public"
- 먼저 gatsby 페이지를 빌드하고 gh-pages 명령어로 gh-pages에 배포할 것인데 그 배포대상 폴더는 public이다! (-d : distribution directory)
2) React를 직접 이용할 때
"predeploy": "npm run build", "deploy": "gh-pages -d build"
- npm script에서는 pre,또는 post 를 앞에 붙여서 연쇄 작업을 설정할 수 있음
- npm run deploy라고 치면, 사실은 predeploy를 먼저 실행하고, 그 다음 deploy를 실행함
- predeploy에서 build가 되었고, 실제로 표시되는 사이트는 build 폴더에 생겼음
- 그래서 그 build 폴더를 gh-pages branch로 푸쉬하라는 뜻
Loading Comments...