Github pages - Jekyll 테마 적용하기

앞선 포스팅에 이어 테마를 적용하고 본격적인 내용 작성을 시작하겠습니다.

 

 

1. Jekyll Theme 선택하기

우선 간단하게 테마를 하나 다운로드하여서 적용해봅니다

 

뭘 골라야 하나 하고 고민하다가, 그냥 가장 간단하고 이름부터 저의 목적에 맞게 CV가 들어간 테마를 하나 골랐습니다

https://rubygems.org/gems/modern-resume-theme

modern-resume-theme | RubyGems.org | your community gem host

 

해당 테마 github으로 들어가서 zip 파일 다운로드 버튼을 통해 모든 파일을 다운로드하고 해당 폴더에 들어가서 모든 파일을 복사합니다.

그리고 모든 파일을 .github.io 폴더 내에 붙여 넣습니다. (이때, 같은 이름의 파일들이 발견되는데 대치시켜 줍니다)

 

 

2. Jekyll theme 적용하기

폴더 안에 보면, "Gemfile"이라는 파일이 있습니다. 

source "https://rubygems.org"
gemspec   # 버전 관리

이라고 적혀있을 텐데, 여기서 계속 에러가 나더라고요. 

 

그래서 아래 테마 gem 사이트 "GEMFILE" 부분에 적힌 대로, 고쳐줬더니 해결!

"gemspec" 자체가 해당 gem을 누가 만들었는지, 어떤 것들이 포함되어있는지 등을 나타내는 거라서 당연히 아래의 내용으로 바꿔야 하는 거였음..ㅎ... 처음 해보는 거여서 헤매는 건 당연하다고 치자고요^^

source "https://rubygems.org"
gem 'modern-resume-theme', '~> 2.0', '>= 2.0.2'

 

 

그럼 이제 테마를 적용하러 가볼까요?

 

gem install bundler:1.15.2
bundle install
bundle exec jekyll serve 

 

 여전히 github.io 경로 내에서 위의 코드를 한 줄씩 실행시켜줍니다. 맨 윗줄은 사실 optional 할 수도 있는데, 테마 공식 사이트에서도 그러고 어떤 오류를 겪었을 때 제안해주는 내용이라서 적어봤습니다. 최신 bundler버전은 2.2 이상인데 로컬에서 돌리려면 저 버전이 필요하다는 것 같아서,, 일단 두 번째 줄부터 실행해보고 똑같이 제안하면 첫 번째 줄도 해주세요~ ㅎㅎ

 

이번에도 http://127.0.0.1:4000를 주소창에 입력해봅니다.

 

드디어 성공~~!!!

 

3. Page 설정하기

기존의 테마를 가져다 쓰는 거고 그 속의 디테일한 내용을 변경하기 위한 것이기 때문에, 다른 파일들의 수정은 딱히 필요 없고 "_config.yml" 파일의 내용을 수정하면 됩니다.

 

config.yml 파일은 아래와 같은 형식으로 이루어져 있습니다.

 

 

이렇게 내용을 수정하면, 아래와 같이 https://localhost:4000 페이지에 반영된 것을 확인할 수 있습니다. 

변경사항이 있을 때마다 "bundle exec jekyll serve" 명령을 새로 실행시키면 로컬에서 바로 확인할 수 있습니다. 아직 git에 push하지 않았기 때문에 서버에 바로 반영되는 건 아니라는 거 아시죠?

 

이렇게 변경이 됩니다 ㅎㅎ 테마가 아주 심플하고 좋네요 :D

 

 

이제 이 변경 사항을 github server에 반영하기 위해서 아래의 명령들을 실행시켜줍니다.

git add --all
git commit -m "Initial config"
git push

 

그러면 https://yuwon-shin.github.io/ 주소에 변경사항이 그대로 적용되는 것을 확인할 수 있습니다!!

주소창에 주소 바뀐 거 보이시죠~?

 

 

이제 하나씩 내용을 채워가야겠어요 ㅎㅎ

아직 갈 길이 멀다,,,