pebblepark
개발계발
pebblepark
전체 방문자
오늘
어제
  • 분류 전체보기 (24)
    • Frontend (7)
    • Backend (7)
    • 인프라 (1)
    • CS (0)
      • Design Pattern (0)
    • 정리용 (9)
    • 회고 (0)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • redux
  • typescript
  • debounce
  • springboot
  • github
  • react-query
  • Context API
  • 호이스팅
  • 무한스크롤
  • wsl
  • ERR_UNSAFE_PORT
  • 스프링 빈
  • SpringMVC
  • Github Pages
  • vite
  • hoisting
  • TDZ
  • javascript
  • 리액트쿼리
  • useLayoutEffect
  • CORS
  • @ModelAttribute
  • 스프링
  • react
  • React Query
  • Git
  • spring
  • 스프링 의존관계
  • Docker
  • 스프링 컨테이너

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
pebblepark

개발계발

Github pages 배포하기
정리용

Github pages 배포하기

2022. 5. 19. 15:16

1. 깃허브 Repository 생성

깃허브에서 레파지토리를 하나 생성한다. 이후 프로젝트에서 깃허브 레파지토리 생성 첫화면에 나오는 명령어를 참고해서 소스를 push한다.

git init
git add *
git commit -m 'first commit'
git remote add origin https://github.com/JIHYE-P/react-github-pages.git
git push -u origin master

2. gh-pages 패키지 설치

깃허브에 배포하기 위해 아래 명령어를 통해 gh-pages 패키지를 설치한다.

npm install gh-pages --save-dev

3. package.json 수정

패키지 설치 후에 package.json을 열고 아래 항목들을 수정한다.

  • homepage를 추가한다.
//... 
"homepage": "http://{깃허브아이디}.github.io/{레파지토리명}"
  • scripts 부분에 해당 명령어를 추가한다.
"scripts": { 
    //... 
    "predeploy": "npm run build", 
    "deploy": "gh-pages -d build" 
}

저장 후 npm run deploy 명령어를 실행하면 배포할 수 있다.

4. 확인

hompage의 값으로 준 url을 타고 들어가면 배포된 페이지를 확인할 수 있다.

또는 깃허브 레파지토리의 Settings > Pages 메뉴로 들어가면 아래와 같이 정상적으로 배포된 것을 확인할 수 있다.

caution은 private 레파지토리지만 해당 배포 페이지는 public으로 접근할 수 있어서 뜨는 것이다. 무시해도 된다.

참고

[React] 프로젝트 GitHub Pages 배포하기

저작자표시 (새창열림)

'정리용' 카테고리의 다른 글

크롬에서 막혀있는 포트  (0) 2022.07.01
Proxy 서버로 CORS 해결하기  (0) 2022.06.24
Docker 명령어 정리  (0) 2022.05.25
Github 특정 파일 커밋 기록 삭제  (0) 2022.05.17
AWS EC2에 Vite 애플리케이션 Docker로 배포하기  (0) 2022.05.12
    '정리용' 카테고리의 다른 글
    • Proxy 서버로 CORS 해결하기
    • Docker 명령어 정리
    • Github 특정 파일 커밋 기록 삭제
    • AWS EC2에 Vite 애플리케이션 Docker로 배포하기
    pebblepark
    pebblepark
    프론트엔드 개발자입니다. 피드백은 언제나 환영입니다:)

    티스토리툴바