깃허브는 온라인 상에서 버전관리를 위해 가장 많이 사용하는 서비스입니다. 개인이나 팀의 소스를 관리하고 공동 작업하기에도 편리하죠. 깃허브에 개발에 관심있는 사람들이 많이 모이면서 최근에는 개발직군으로 취업할 때 깃허브 계정을 요구하는 곳이 많은데요, 평소에 코딩 작업을 어떻게 하고 있는지, 어떻게 관리하는지를 한 눈에 보여줄 수 있기 때문입니다. 물론 입사 후에 공동 작업을 위해 깃허브를 제대로 다루는 것도 필수가 되고 있고요.
특히 깃허브를 통해 웹 사이트를 호스팅할 수도 있고 블로그를 운영할 수도 있습니다. 블로그를 운영하기 위해서는 사이트 빌더인 지킬(Jekyll)을 함께 공부해야 합니다.
오늘은 깃허브에 자신의 이력서 페이지를 만드는 방법에 대해 알아보겠습니다. 여기에서 사용한 소스는 Microsoft사의 "Create a free resume Website"라는 아티클에서 공개한 소스를 사용합니다. 여러분이 HTML과 CSS에 익숙하다면 직접 웹 문서를 만들어 사용하면 됩니다.
[참고 원문] Create a free resume website
준비해야 할 것
1) 깃허브 계정
깃허브에 이력서 페이지를 만들 것이기 때문에 우선 깃허브 계정이 있어야 합니다. 이미 깃허브 계정을 가지고 있다면 그 계정을 활용하면 되고 아직 깃허브 계정이 없다면 '깃허브' 사이트로 가서 계정을 만들어 두세요.
2) 모던 웹 브라우저
개발에 관심이 있다면 이미 모던 브라우저를 사용하고 있겠죠? 크롬이나 마이크로소프트 엣지 같은 모던 브라우저가 필요합니다.
3) 웹 편집기는 필요하지 않습니다.
여기에서는 따로 웹 편집기를 설치하지 않습니다. 온라인에서 실행하는 github.dev 를 사용할 것이기 때문이죠. github.dev는 깃허브 사이트에서 온라인으로 실행되는 VS Code라고 생각하면 됩니다.
깃허브에 새로운 레포지토리(repository) 만들기
레포지토리는 '저장소'라고도 하며 앞으로 만들 이력서 관련 파일들이 저장될 공간입니다.
1. 깃허브에 로그인한 후 왼쪽의 레포지토리 목록에서 [New]를 클릭해서 새로운 레포지토리를 만듭니다.
2. "Repository name"에 원하는 레포지토리 이름을 입력합니다. 여기에서는 resume라고 입력해 보겠습니다.
둘 이상의 단어를 이름으로 사용하려면 "awesome-resume"처럼 하이픈(-)으로 연결합니다.
그리고 "Add a README flie"에 체크한 후 [Create repository] 버튼을 클릭합니다.
3. 레포지토리 만들기가 끝나면 자동으로 새로운 레포지토리로 이동합니다. 만일 나중에 다시 이 곳을 찾아오려면 'github.com/아이디/레포지토리명' 이라는 주소로 접속하면 됩니다. 예를 들어, 깃허브 아이디가 peacein이고 방금 만든 레포지토리 이름이 resume 라면 github.com/peacein/resume 를 입력해서 언제든지 이 레포지토리에 접속할 수 있습니다.
4. 레포지토리가 보이는 상태에서 키보드의 마침표(.)를 눌러 보세요. github.dev 편집기가 나타납니다. 온라인에서 사용할 수 있는 VS code 편집기죠. 웹 브라우저 주소 표시줄을 보면 github.dev/peadce/resume 라고 되어 있습니다. 깃허브 레포지토리 주소에서 github.com이 github.dev로 바뀐 것을 알 수 있습니다.
이제부터 여기에서 소스를 작성하면 자동으로 깃허브 레포지토리로 파일이 업로드되고, 소스를 수정하면 수정한 내용도 즉시 반영됩니다.
CodeSwing 확장 설치하기
사용자 컴퓨터에 설치된 VS Code에서 소스를 작성할 때는 Live Server 확장을 사용해서 소스의 결과를 즉시 웹 브라우저로 확인할 수 있습니다. 하지만 github.dev의 편집기는 온라인 상에 있기 때문에 Live Server 확장을 사용할 수 없고, 대신 CodeSwing이라는 새로운 확장을 통해 소스 결과를 즉시 확인할 수 있죠.
편집기의 사이드바에서 확장 아이콘을 클릭한 후 'codeswing'을 검색하고, 설치합니다.
CodeSwing 확장은 우리가 편집기에 소스를 입력할 때마다 소스를 자동 저장하면서 어떻게 화면이 달라지는지를 실시간으로 보여줍니다. 자동 저장 기능이 켜져 있는지 확인하려면 편집기 화면 왼쪽 위에 있는 세 개의 가로줄 부분을 클릭한 후 [File] 메뉴를 선택해 보세요. "Auto Save"에 체크되어 있다면 자동 저장되고 있는 것입니다.
이력서 페이지를 만들기 위한 환경 설정이 모두 끝났습니다. 이제 이력서 페이지를 만들러 가볼까요? Let's Go~ [깃허브] 이력서 페이지 만들기 (2) - 마크업 작성하기
'기타' 카테고리의 다른 글
| [공유] ChatGPT, 넌 누구냐? (0) | 2023.04.03 |
|---|---|
| [깃허브] 깃허브에 이력서 페이지 만들기 (5) - 커밋하기 (0) | 2022.03.15 |
| [깃허브] 이력서 페이지 만들기 (4) - 스타일 적용하기 (0) | 2022.03.15 |
| [깃허브] 이력서 페이지 만들기 (3) - 내용 채우기 (0) | 2022.03.13 |
| [깃허브] 이력서 페이지 만들기 (2) - 마크업 하기 (0) | 2022.03.13 |
