[Portfolio] Github 으로 React 프로젝트 호스팅하기

현재 포트폴리오 진행상황은 웹(PC) 버전만 일단 구현 완료한 상황이다!

아직 반응형은 진행하지 못했고,, 일단 바빠질 다음주를 대비하여 웹 버전만 완벽하게 해두기로,,

무료로 웹 프로젝트를 호스팅하기 위해 많이들 사용하는 Github Pages를 사용한 것을 기록해보겠다!

 

---

1️⃣ Repository > Settings > Pages 이동

• 호스팅을 하고자 하는 프로젝트가 담긴 Repository에서 Settings로 이동한다.
• Settings의 사이드 바를 보면 Pages탭이 있는데 그곳으로 들어간다!

  

 

• 여기서 master 혹은 main 브랜치로 설정한 후, save 버튼을 눌러준다.
• 이때 생성되는 초록색 바탕의 url을 복사한다!!

 

2️⃣ 프로젝트의 package.json파일에 homepage 프로퍼티 설정하기

복사해뒀던 url로 homepage 프로퍼티 설정

3️⃣ 프로젝트 내에 gh-pages 모듈 설치

yarn add gh-pages

4️⃣ 프로젝트의 package.json파일에 script 프로퍼티 추가하기

predeploy와 deploy를 추가한 코드

5️⃣ 프로젝트에서 yarn deploy 실행

yarn deploy 코드 실행 terminal 화면

6️⃣ 다시 github 페이지로 이동

• deploy가 문제없이 처리되었다면 gh-pages 브랜치가 자동 생성될 것이다.

• 그럼 위의 사진과 같이 gh-pages 브랜치로 Source를 바꾼 후, save 버튼을 누른다.

 

7️⃣ 초록색 바탕에 있는 url을 클릭하면 프로젝트가 호스팅된 것을 확인할 수 있다!!

 

 

 

 

React 프로젝트를 Github Pages로 호스팅해본건 처음인데, 무료여서도 좋고 간단하고 쉽고 빠르게 배포할 수 있어서 좋았던것 같당 👩‍💻

 

 

이제 내 포트폴리오를 빠르게 확인할 수 있게 됐당!!!

아직 개발 진행 중,, 아니 계속해서 추가해나갈,, 보완해나갈 내 포트폴리오 사이트는 ,, 아래 링크로,,,

https://yexjin.github.io/yejin-portfolio/