Git에 React 페이지 배포하기(포트폴리오 만들기 (GitHub Desktop)

++ 요즘은 Netlify나 Vercel이 쉽고 잘 되어있으므로 그걸 이용하길 추천드립니다.

---

react를 사용 가능하다는 전제하에 작성합니다.

 

1. 원하는 폴더에 react 프로젝트 생성

npx create-react-app portfolio

 

2. GitHub Desktop에서 레퍼지토리 생성

File -> Add Local Repository -> 생성한 프로젝트 경로 선택

 

3. Publish repository 클릭

Keep this code private 체크 해제

 

4. github 페이지에 레퍼지토리 생성된것 확인, 만약 private로 레퍼지토리 생성했다면 public으로 변경

https://github.com/

GitHub: Let’s build from here

레퍼지토리 public으로 변경방법

Settings -> Danger Zone -> Change repository visibility

 

5. gh-pages 설치

생성한 프로젝트 폴더로 이동 후

npm i gh-pages

 

6. package.json 수정

제일 위에 homepage 내용 추가하고 (자신의 내용으로 변경), scripts에 predeploy, depoly 추가

homepage 내용 예시) "homepage": "https://SpringDream0406.github.io/portfolio",

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

{

"homepage": "https://username.github.io/repository-name",

"name": "portfolio",

"version": "0.1.0",

"private": true,

"dependencies": {

"@testing-library/jest-dom": "^5.17.0",

"@testing-library/react": "^13.4.0",

"@testing-library/user-event": "^13.5.0",

"gh-pages": "^6.1.0",

"react": "^18.2.0",

"react-dom": "^18.2.0",

"react-scripts": "5.0.1",

"web-vitals": "^2.1.4"

},

"scripts": {

"start": "react-scripts start",

"build": "react-scripts build",

"test": "react-scripts test",

"eject": "react-scripts eject",

"predeploy": "npm run build",

"deploy": "gh-pages -d build"

},

"eslintConfig": {

"extends": [

"react-app",

"react-app/jest"

]

},

"browserslist": {

"production": [

">0.2%",

"not dead",

"not op_mini all"

],

"development": [

"last 1 chrome version",

"last 1 firefox version",

"last 1 safari version"

]

}

}

 

7. 배포

npm run deploy

 

8. 홈페이지 주소로 적었던 주소로 접속해보기

배포의 경우 딜레이가 있을 수 있으니 조금 있다 접속해보기

홈페이지 주소를 직접 입력하는 방법 말고도

github 홈페이지 -> Settings -> Pages

에 가보면 상단에 배포 주소와 언제 배포했는지가 나오며, 배포한 사이트 방문하기 버튼역시 있음.