깃허브 포트폴리오 만들기 (1)

fpshtmxm36·2023년 2월 6일

첫 이직 준비 과정

목록 보기

2/5

제작 기록은 한 파일에 쭉 작성했지만, 두 파트로 나눠서 작성하는게 좋을 것 같아서 나눠서 작성했다.

그리고 당시 기록이 담긴 사진 파일들을 남기지 못했다. 다음엔 반드시 남겨둬야지.

작년 12월, 이직 준비를 시작하면서 딸랑 이력서만 작성하고 이직하기에는 많이 부족 할 거 같아 포트폴리오를 만들기로 했다.

웹 개발 쪽 직업에 발을 들인 만큼 이왕이면 포트폴리오 사이트를 만들고 싶었고, 더 검색해보니 깃허브에 포트폴리오를 만드는 게 개발자인 나에게도 도움이 되는거 같아서 깃허브에 포트폴리오 사이트를 만들기로 했다.

마음 같아서는 동적 형식으로 만들고 싶었지만, 지금의 나에게는 무리일 거 같아서 대신 정적 형식으로 동작하는 지킬(Jekyll) 테마를 사용해서 간단하게(?) 만들어 보기로 했다.

많은 지킬 테마들 중에서 나는 portfolYOU를 선택했다. 포트폴리오 겸 블로그로도 활용할 수 있는데다 간결해 보이는 외형에 404 페이지, 다크 모드, 블로그 검색 기능까지 내장되어 있어서 좋아보였기 때문이다.

공식 리포에서 Code - Download ZIP으로 테마 파일을 다운로드 후 압축풀기.
(나중에 깃허브 데스크탑을 사용해서 경로는 문서\Github에 두었다)
압축 푼 폴더의 이름을 '깃허브 계정.github.io' 형식으로 수정
docs 폴더를 제외한 모든 폴더 삭제 후 docs 안의 파일을 루트 폴더(깃허브 계정.github.io)로 이동
필요없는 문서 부분 삭제
- _elements/
- documentation/
- _config.yml (# For Documentation Only 주석 달린 내용만 삭제)

WITH DEVKIT이 붙은 루비(Ruby) 설치
- 설치 중 Add Ruby executables to your PATH 옵션 체크로 환경 변수 등록
- 설치 후 Ruby 프롬포트가 나오면 엔터 눌러서 설치 마무리
- cmd에서 ruby -v 명령어로 버전이 나오는지 확인
지킬, 번들러 설치
- cmd에서 gem install jekyll bundler 명령어로 설치
- install bundler, update bundler 명령어로 번들러 설치/업데이트
로컬에 테마 빌드
- bundle exec jekyll serve 명령어로 빌드 및 localhost:4000으로 빌드 된 내용 확인
- 빌드 중 webrick 관련 에러가 나면 bundle add webrick 명령어 입력

적용한 테마로 포트폴리오를 만들어도 되지만 About 페이지의 스킬 퍼센트나 타임라인 등 개인적으로 고치고 싶은 것들이 생겨서 이것 저것 수정하는것 부터 시작했다.

일단 위의 내용만 수정을 진행했었는데 불편한 점들이 있었다.

부족한 설명
당시에는 지킬 테마가 처음 보는 구성으로 되어있어서 분석하기가 힘들었다.
구글링으로 다른 테마를 찾아봤었는데 어느 테마는 상세히 설명이 되어있어서 이해하기 편했지만, 내가 사용한 테마는 내가 다 이해하기에는 부족했다.
~~CSS 커스텀 제한~~
SCSS 파일과 레이아웃 파일을 수정해야 빌드되는 파일이 수정된 내용으로 나오는데, 커스텀 CSS 말고 원본 CSS를 수정하고 싶었으나 수정할 수 없었다.
(이 글을 쓰는 시점에서 생각해보니 그냥 커스텀 CSS에서 수정하면 되는 일이였다...)
포트폴리오 + 블로그
처음 테마를 보고 선택할때는 두개가 붙어있는게 좋아보였지만 막상 다운받은 후 계속 작업을 하다보니 차라리 한 페이지에 간단하게 나오는게 나을거 같다는 생각이 들었다.