[Github] Github에 이력서 사이트 만들기

다른 사람의 저장소 복제하기

https://github.com/jjlaon/resume 로 접속한 후 [Fork]를 클릭한다.

 

수정 없이 [Create fork]를 클릭한다.

리포지토리 이름을 바꾸고 싶다면 변경한 뒤 클릭하면 된다.

 

지역 저장소로 복제하기

Fork 한 원격 저장소를 지역 저장소로 복제한 후 수정해야 한다.

VS Code를 실행한 후 [리포지토리 복제]를 클릭한 후 Fork 한 원격 저장소의 주소를 입력한다.

 

리포지토리의 경로를 지정해주고, 알림 창이 뜨면 [열기]를 클릭한다.

 

VS Code에 복제한 파일들이 나타나게 된다.

 

복제한 폴더에서 index.html을 더블클릭하거나

Live Server가 설치되어 있다면 우클릭하여 [Open with Live Server]를 클릭한다.

하단처럼 우리가 수정할 이력서의 기본 홈페이지가 뜰 것이다.

 

사용할 이미지 교체하기

기존 이미지 대신 프로필 이미지와 배경 이미지를 변경해보자.

기존의 bg.jpg와 pf.png를 삭제한 후 새로운 이미지를 가져와 bg.jpg와 pf.png로 이름을 지정해 준다.

혹은 index.html의 23번 라인과 style.css의 11번 라인의 이미지 주소를 수정해 준다.

참고로 프로필 이미지는 100X100 크기이다.

 

 

나는 가져온 프로필 사진 사이즈가 좀 커서 style.css의 프로필 부분에서 사이즈를 조정하였다.

 

index.html 수정하기

VS Code에서 index.html 파일을 연 후 추가할 부분들을 수정해 준다.

 

변경 사항 커밋하기

VS Code 소스 제어창에서 커밋 메시지 입력 후 [커밋]을 클릭한다.

또한 깃허브로 올리기 위해 [변경 내용 동기화]를 클릭한다.

 

동기화 완료 후 깃허브 저장소를 확인해 보면 동기화가 완료된 것을 볼 수 있다.

 

원격 저장소를 페이지로 전환하기

저장소를 사이트처럼 사용하려면 페이지로 전환해야 한다.

저장소에서 [Settings]를 클릭한 후 [Pages]를 클릭한다.

 

Branch 항목에서 [main]을 선택한 후 [Save]를 눌러준다.

 

페이지로 설정되고 나면 약간의 시간이 지난 후 다음 주소로 확인이 가능하다.

https://아이디.github.io/저장소명