깃허브로 이력서 사이트 만들기

깃허브에는 페이지 (pages) 기능이 있다.

이 기능을 활용하면 깃허브 안에 인터넷 사이트를 만들 수 있다.

이 사이트를 이용해서 기술 블로그나 개인 블로그를 만들 수 있으며, 애드센스도 달 수 있다.

간단한 이력서 사이트를 만드는 방법과 지킬 테마를 사용해 블로그 만드는 방법을 공부하였다.

 

HTML, CCS 파일로 이력서 사이트 만들기

사용할 파일 준비하기

웹 사이트를 만들려면 사이트 내용이 담긴 HTML 파일과 사이트 디자인이 담긴 CCS 파일이 있어야 한다.

이 때 첫화면은 반드시 index.html 로 저장해야 하고, 자신의 PC 에서 이미지와 링크가 제대로 동작하는지 확인 후 푸시해야 한다. 

HTML과 CCS 를 할 줄 모르는 입문자이기에 책에서 제공하는 예제 파일을 사용해서 연습하였다.

(모든 공부는 Do it! 지옥에서 온 문서관리자 깃&깃허브 입문을 따라가고 있다. 고경희/이고잉 지음)

 

우선은 타인의 소스를 저장소로 복제하는 방법과 VS code 를 통해 풀,푸시하는 연습이다.

 

저장소 복제하기 (fork)

다른 사람의 저장소의 파일은 자신의 저장소로 복제한 수 소스를 다양하게 수정할 수 있다.

오픈 소스만을 복제하도록 하자.

1. https://github.com/jjlaon/resume 로 접속

2. 우측 위의 fork 클릭

3. 내 깃허브에 resume 저장소가 복사되어 있을 것임 (forked from ㅇㅇ)

 

 

지역 저장소로 복제하기 (clone)

포크한 저장소는 내 깃허브 저장소에 있으므로 컴퓨터로 복제(clone)해야 손쉽게 수정, 푸시가 가능하다.

 

1.  VS code 실행 후 파일-폴더 닫기 해서 폴더 닫기

2. 탐색기를 새로 키면 리포지토리 복제 버튼 생김, 클릭.

3. 입력 창에 복제할 저장소 주소 입력 (https://github.com/Player-Hyeok/resume.git)

4. 복제할 저장소 저장 위치 지정

5. VS code 에 열 것인지 창 뜨면 열기

6. RESUME 작업 폴더 생성되면 index.html 클릭 시 우측 편집창에 내용 표시됨.

7. 윈도우 탐색기 폴더에서 index.html 더블 클릭하면 예제 사이트 확인 가능함.

 

사용할 이미지 파일 교체하기

예제의 index.html 문서에는 배경 이미지와 프로필 이지미가 있다.

resume 폴더 내에 bg.jpg 와 pf.png 를 수정하면 배경 이미지와 프로필을 바꿀 수 있다.

프로필 이미지는 너비와 높이가 각 100 픽셀 크기여야 한다.

 

index.html 파일 수정하기

1. vs code 내에 index.html 을 클릭, 우측 편집 창에서 수정한다.

2. <h1> funnycom 대신에 이름을 넣는다

3. <h2> 부분에 현재 직업

4. <!-자기소개-->부분에 본인 내용

5. SNS ID 작성

6. 경력과 기술 등 수정

7. ctrl+S 해서 저장

8. 윈도우 탐색기에서 index.html 더블클릭해서 수정 제대로 되었는지 확인

 

 

변경 사항 커밋하기

1. vs code 의 소스 제어 창으로 이동

2. + 눌러서 스테이징

3. 메세지 입력 후 커밋 - index 수정 및 이미지 교체

4. 커밋

 

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

저장소를 페이지로 바꿔야 이력서 사이트로 이용할 수 있다. 

깃허브의 '페이지' 기능을 알아보자

1. 깃허브에서 이력서 파일이 저장된 저장소로 이동 settings 클릭

2. 왼쪽 카테고리에서 pages 선택.

3. none 을 이력서 있는 브랜치로 이동(main) 후 save

4. 생성된 깃허브 페이지 주소 확인 : https://player-hyeok.github.io/resume/