[Portfolio] GitHub Pages를 이용하여 Gatsby Site 무료로 배포하기

나만의포트폴리오만들기

취업 활동을 열심히 하고 있는 동기분들의 스트레스를 조금이나마 줄여드리기 위하여 이 배포 가이드를 작성합니다.

제가 겪었던 시행착오를 겪지 않고 넘어갈 수 있으면 좋겠습니다.

 

이 글을 다 읽고 나면 여러분은 http://kimhoonhee.com/ 이런 포트폴리오 사이트를 만드실 수 있습니다.

 

시작은 Github 저장소를 fork해와서 작업할 준비를 하는 것부터 시작하시면 되겠습니다.

제가 사용한 레퍼런스로는 chandrikadeb님의 포트폴리오 저장소였고 해당 내용을 이용해서 해당 프로젝트 안의 콘텐츠를 수정하는 방식으로 진행하였습니다.

 

Chapter 1 : 개발환경 세팅하기

 

Step 1. https://github.com/chandrikadeb7/chandrikadeb7.github.io.git 주소로 접근하여 해당 Repository를 fork 합니다.

Step 2.  중요 포인트 fork 할 때 내 저장소의 이름은| 내 깃허브 아이디. github.io |가 돼야 합니다.

Step 3. 이렇게 fork해온 Repository를 나의 작업 공간에서 Clone 하도록 합니다.

git clone fork해온repositoryURL

 

Step 4. Clone을 완료한 상태라면 나의 위치가 Clone 한 폴더보다 상위에 위치할 테니 Clone 한 위치로 이동해줍니다.

cd 내깃허브아이디.github.io

 

Step 5. gatsby를 설치합니다.

npm install -g gatsby-cli

Step 6. Node version Manager를 설치합니다.

- nvm은 Node Version Manager의 약자입니다. 여러 노드(Node) 버전을 사용해야 할 때 유용합니다

- 이것을 설치 안 하고 진행 시 문제가 될 수 있습니다.

nvm install

만약 nvm명령어가 실행되지 않으면서 실행이 되지 않는다면 nvm-setup.zip를 설치 후 실행합니다.

 

Step 7. yarn을 설치합니다.

yarn

 

Step 8. npm start 명령어를 치면 로컬에서 서버가 돌아가는 것을 확인할 수 있습니다.

npm start

- nvm 설정 후 npm 명령어가 실행이 안될 수가 있습니다 이 이유는 사용할 Node 버전이 설정되어있지 않기 때문입니다.

설정법은 nvm ls로 설치되어 사용 가능한 Node 버전 확인을 하고

nvm ls

nvm use로 원하는 버전을 선택해주시면 됩니다, ( 밑은 예시이고 저는 15.xx 버전을 사용했습니다 )

nvm use v6.6.0

- 여기서 또 문제가 있을 수 있습니다. nvm use 명령어에 문제가 있다면 터미널을 관리자 권한으로 설정하고 실행해보세요

 

-- 여기까지 개발 서버 설정을 했다고 생각하면 되며 밑의 두 명령어를 사용해서 작업물의 이미지를 만들고 이를 실행해보면서 작업을 이어 갈 수 있습니다.

 

 

Step 9. js와 markdown으로 이루어진 설계도를 이용하여 이미지를 만든다고 생각하면 되겠습니다.

npm run build

Step 10. 9번을 통해 만들어진 것을 개발서버에 올려서 미리 보기

npm run serve

 

Chapter 2 : 배포 준비하기

여기서부터 github-pages와 관련된 내용이 나옵니다.

 

배포를 하기 위해서는 한 가지 설정을 할 것이 있습니다. 사실은 2가지인데 1가지는 이 포트폴리오를 배포한 분이 미리 해두셨습니다.

 

설정 1 :  package.json 파일의 Scripts 안의 옵션에 deploy 추가 여기서는 gatsby build를 해서 배포하는 브랜치를 설정해주는 내용입니다 배포에 사용하는 브랜치는 master입니다.

설정 2 : fork를 해온 Repository에서 pages탭 빨간색 네모에 브랜치를 master로 설정하고 save 해줍니다.

- 이렇게 진행하면 파란색 네모 부분에 주소가 나오게 됩니다

- 여기서 주소를 눌러보게 되면 나의 깃 헙 페이지가 배포된 곳에 접속해 볼 수 있습니다.

- 지금은 내용이 없는 하얀색으로 뜹니다.

 

Chapter 3 : 배포 하기

배포는 아주 간단히 진행됩니다. 깃허브에 내용을 올리고 gatsby build와 npm run deploy를 실행해 주면 됩니다.

 

변경사항이 있을 때 Chaper1의 9번 10번 명령어를 이용해서 변경된 사항을 확인 후 

Step 1. 변경 사항을 stage에 올립니다.

git add .

Step 2. 올린 내용에 대하여 push 준비를 하고

git commit -am "changes"

Step 3. push는 code 브랜치로 합니다 default 브랜치이고 master로 안 하는 것이 중요합니다.

git push origin code

Step 4. 설계도 따라서 만들어주고

gatsby build

Step 5. 배포

npm run deploy

 

여기까지 따라 하셨으면 github-pages와 gatsby를 이용한 사이트가 배포된 것을 아까 받은 주소에서 확인하실 수 있을 겁니다.

Node.js와 Markdown으로 구성된 구조를 즐기면서 내용 수정을 하시면 되겠습니다.

- 어디서부터 봐야 할지 막막하시다면 content 폴더와 config.js를 확인하시면 됩니다.

 

저는 수정 시 최초 배포자님의 서명은 수정하지 않고 사용하였습니다.

여기까지  GitHub Pages를 이용하여  Gatsby Site 무료로 배포하기 가이드였습니다.

 

잘못된 개념이나 오류가 있으면 알려주시면 감사하겠습니다.