github로 포트폴리오 만들기(with React)

학교에서 열리는 포트폴리오 경진대회 참가하기 위해 github 포트폴리오 사이트를 만들었다.

맘에드는 탬플릿이 리액트 이용하는 거여서 애좀 먹었다ㅜㅜ

 

1.원하는 템플릿 고르기

아래는 탬플릿은 모아둔 사이트인데, 맘에 드는 템플릿이 그렇게 많진 않았다.

http://jekyllthemes.org/

Jekyll Themes

 

내가 고른 탬플릿은 이거!!

https://github.com/saadpasta/developerFolio

GitHub - saadpasta/developerFolio: 🚀 Software Developer Portfolio Template that helps you showcase your work and skills as a

 

2.템플릿 적용하기

Getting Start

우선 node.js랑 npm, git이 설치되어야 한다.

 

Mac에서 node.js와 npm설치가 안되어있다면!

brew install node

//버전확인을 통해 잘 설치되었는지 체크
node -v 
npm -v

repo 생성 및 git token 발급

1) repository를 생성

fork로 repo를 만들어도 되고, git clone으로 프로젝트를 다운 받은 후 repo를 새로 만들어줘도 된다.

 

2)repo 이름 변경

repo를 만들었으면 Settings에 들어가서 repo 이름을 [username].github.io 로 변경해준다.

3)git token 발급

아래 사이트 참고하세요~

**주의사항

1.토큰이 발급되면 반드시 메모해두세요. 다시 볼 수 없습니다.

2.select scope은 아무것도 설정하지 마세요. 그래야 토큰이 public으로 발행됩니다.

https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token

Creating a personal access token - GitHub Docs

설정 값 변경

1).env

.env파일을 만들어 준다.( .env파일은 숨김파일까지 표시해야 보임)

cd developerFolio

cp env.example .env

.env파일의 값을 변경해준다.

REACT_APP_GITHUB_TOKEN ="앞에서 만든 토큰 값"

GITHUB_USERNAME = "유저 이름"

 

MEDIUM_USERNAME은 주석처리. 안그러면 이런 에러 나옴

 

Fetching Medium blogs data for YOU MEDIUM USERNAME HERE
_http_client.js:115
      throw new ERR_UNESCAPED_CHARACTERS('Request path');

npm ERR! code ELIFECYCLE
npm ERR! errno 1

 

2)package.json

"Homepage" : "https://[username].github.io/"
"name": [username].github.io"

 

npm install

npm install

npm start

 

npm install을 하는데

npm WARN old lockfile The package-lock.json file was created with an old version of npm

이런 경고와 함께 다른 에러가 난다면 버전문제일 가능성이 크다.

devloperFolio폴더 안에 보면 package.json이랑 package-lock.json파일이 있는데, 여기서 사용하는 depnedencies의 버전이 오래되어서 npm install이 진행이 안된다.

이럴 때는 node와 npm의 버전을 낮춰주어야 한다.

버전 낮추는 방법은 아래 사이트 참고~~

 

node 버전 낮추기

https://johngrib.github.io/wiki/trouble-shooting-node-7-install/

(문제해결) Mac에서 Node 7 버전으로 다운그레이드

npm 버전 낮추기

npm install -g npm@6.9.0

npm install을 마친 후 npm start를 하면 local host로 내 포트폴리오 사이트가 열리는 걸 확인할 수 있을 것이다.

 

 

 

배포하기

마지막으로 아래명령어를 치면 다른 사람도 볼수 있게끔 내 깃허브 홈페이지에 배포가 완료된다.

(5분정도 있어야 변경사항이 적용됩니다.)

npm start deploy

배포된 사이트 주소는 

https://[username].github.io

 

 

이제 src폴더 안에 portfolio.js파일을 수정하면서 커스텀하면 된다.