Github page로 포트폴리오 웹페이지 만들기
몇 줄 안되는 코드에서 부터 큰 프로젝트까지 이제까지 해온 것들을 정리하고, 데모로 실행시키기 위한 포트폴리오 용 웹 페이지를 만들어 볼까?
이러한 생각을 하고 나서 가장 먼저 떠올렸던 생각은 github의 page를 이용하는 것이였습니다.
구글링하면 React로 만들어 github에 page를 올리는 것까지 많은 글들이 있지만, 실제로 정리해 보면서 기록하고자 시작된 것인데 이번에는 github에 repository를 만들고 gh-pages를 통해서 빌드 파일을 배포해 보겠습니다.
0. 이름은?
항상 무언가를 시작할때 그것에 대하 이름을 지어야 하는데 이게 여간 신경쓰이는 일이 아닐수 없습니다.
저는 예전부터 사용해 왔던 닉네임 중에 hiio 라는 닉네임이 있습니다. 이 닉네임에 숫자 420붙여 hiio420이라는 프로젝트 명으로 사용해 보려고 했지만, 이미 있어서 hiio42O로 만들었습니다.
1. github repository 만들기
github repository를 만드는 방법은 다들 아실것으로 생각이 됩니다.
https://twentytwentyone.tistory.com/99 만드는 방법을 간단하게 정리해 보았습니다.
2. github 페이지용 repository 만들기
github page용 repository를 만들면 <username>.github.io 를 통해 웹 페이지로 접근할수 있습니다.
기본적인 repository 이름을 입력하고, public으로 만들어 준뒤 .gitignore 파일로 node를 선택했습니다.
참고 : https://pages.github.com/
git을 사용하기위해서는 기본적으로 운영체제에 맞는 git이 설치 되어있어야 합니다.
https://git-scm.com/downloads
위 링크에서 다운로드 받아 설치해 줍니다.
3. github ↔ local
이제 github에 생성해놓은 repository와 로컬에서 생성한 프로젝트 디렉토리를 연동 시켜 줍니다.
먼저 터미널을 열어 git init 으로 초기화 시켜 줍니다.
git init
이제 username와 useremail을 등록해 줍니다.
git config user.name "hiio42O"
git config user.email "hongsamhc2@gmail.com"
그리고 원격 저장소의 url을 등록해 줍니다.
git remote add origin "https://github.com/hiio42O/hiio42O.github.io.git"등록된 url에 있는 repository에는 main 브랜치가 기본적으로 생성되어 있습니다.
이 브랜치를 pull 받아 줍니다.
git pull origin mainpull 받게 되면 repository를 만들면서 같이 생성한 .gitignore 파일이 다운로드 된것을 볼수있습니다.
git status를 통해서 현재까지 작성파일 중 스테이지에 올려야하는 파일들을 보겠습니다.
git status
아직 commit을 한번도 안했기때문에 다 있네요.
git add * 로 다 스테이지에 올린뒤 commit 을 해줍니다.
git add *
git commit -m "Init"
커밋 메세지를 잘 적으면 좋겠네요. 항상 마음은 먹지만, 아쉬운 부분입니다.
commit 된 내용들을 push 하기 전에 checkout명령어로 dev로 branch를 옮긴뒤에 remote dev branch에 push 한후 merge 합니다.
git checkout -b dev
git push origin dev
remote repository에 dev branch가 새로 생겼습니다.
이제 Pull Request 를 새로 만들어서 main branch에 Merge해 줍니다.
이후 confirm 까지 하면 main 브랜치에 반영이 됩니다.
repository 까지 생성 후 코드를 올려봤습니다.
이제 페이지를 나타내기위해 gh-pages 를 설치해 실행해보고 나머지 설정을 해줍니다.
4. gh-pages
gh-pages를 좀더 간편하게 build된 파일들을 올릴수 있습니다.
먼저 설치 해 줍니다.
npm install --save-dev gh-pages
이후 빌드를 실행하는 스크립트를 터미널에 입력해 줍니다.
npm run build
그리고 아래 명령어를 실행해 봅니다.
gh-pages -d build
완료되면 Published 와 함께 repository에 gh-pages branch가 생성된것을 볼 수있습니다.
5. 세팅 설정
이제 github페이지를 사용하기위해 세팅을 변경합니다.
github repository Tab 중 setting으로 이동합니다.
Settings 항목중 pages를 클릭
github page에 사용될 브랜치를 선택할 수 있습니다.
현재 main 으로 된 부분을 gh-pages로 변경 후 save를 합니다.
그리고 잠시 기다리고
https://hiio42O.github.io/ 에 접속해 봅니다.
그럼 정상적으로 페이지가 나타나는 것을 볼 수 있습니다.
What is Next?
github 에 repository를 만들고, page를 적용 시켜 보았습니다.
다음은 도메인을 사서 연결 시켜 보려고 합니다. 굳이 도메인이 필요 하지 않으신 분들도 있겠지만, 저는 있으면 좋겠다는 결정을 내렸습니다. 하하하
끝!!!