github 호스팅?

  • github page로 블로그가 있을경우 https://{사용자 git id}.github.io/{호스팅할 repo주소}으로 만든 페이지를 호스팅해준다.
  • 기본지식
    • webpack등으로 build를 할줄 알기 - 명령어 사용법
    • port설정은 중요하진 않았음
    • 깃허브 홈페이지에서 설정하는건 없었음
    • 로컬에서 빌드 및 deploy를 적용한 방식.

적용법

설치

  • gh-pages설치
    • npm install gh-pages --save-dev

package.json설정

  • hompage내용 추가
    • https://{사용자 git id}.github.io/{해당 repo 주소}
    • 아래 내용은 예시
...
"homepage":"https://deokisys.github.io/foundark-Front"
...
  • scripts에 아래 내용 추가
"scripts":{
  ...
  "build" : "NODE_ENV=development webpack", 
  "predeploy": "npm run build",
  "deploy": "gh-pages -d dist"
}
  • build
    • webpack일 경우, 빌드를 진행하는부분
    • NODE_ENV를 통해 환경설정을 추가적으로 설정해준다(옵션)
    • 실제 빌드하여 폴더로 만드는 명령어면 가능한것으로 보임
  • predeploy
    • 위의 build를 진행하며 deploy전에 실행하는 명령어를 작성
  • deploy
    • 실제로 깃 페이지에 올리는 명령
    • npm run build를 통해 만들어진 dist폴더의 내용을 페이지에 올린다는 의미

deploy 실행

  • npm run predepoy로 빌드 실행
  • npm run deploy로 깃 페이지에 빌드된 폴더 내용을 올리기
    • published가 나오면 적용 완료

특징

  • 알아서 자동으로 빌드하고 deploy하는 방식은 아니고, 직접 빌드하고 deploy하는 방식이다.

참고

  • https://hhyemi.github.io/2021/05/26/nextGit.html
  • https://velog.io/@gwak2837/GitHub-Pages-gh-pages%EB%A1%9C-%EB%AC%B4%EB%A3%8C-%EC%9B%B9-%ED%98%B8%EC%8A%A4%ED%8C%85%ED%95%98%EA%B8%B0

  • https://davidyang2149.dev/front-end/github-actions%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%98%EC%97%AC-gh-pages-%EC%9E%90%EB%8F%99-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0/

  • react관련
    • https://uiyoji-journal.tistory.com/88