brunch

매거진 코딩맴

You can make anything
by writing

C.S.Lewis

by 매미 Aug 11. 2018

혼자서 Jekyll Blog 만들기 - 2편

Jekyll 무료 테마 적용해보기



테마 적용해보기


한동안 방치해뒀던 나의 Jekyll 블로그를 다시 만져보기 시작했다.

이번에는 더도 말고 테마 적용만 시켜보자! 하고 야심 차게 노트북을 켰지만, 역시는... 역시... 역시다.

그래도 수없는 삽질 덕에 테마 적용을 성공시켰다. (야호)



1. 원하는 테마 찾기

테마는 아래 사이트를 이용했다. 괜찮은 테마들을 무료로 이용할 수 있으니 참고하면 좋을 듯하다.

https://jekyllthemes.io/free 


내가 선택한 테마는 Kiko-plus라는 테마다. 

후보가 2개 정도 더 있었는데, 제일 깔끔하고 한글 가이드 같은 게 있어서 이것으로 택했다.

Kiko-plus 테마 데모 버전




2. 테마 적용시키기

1) 테마 다운로드하기

오른쪽에 Clone or download라는 초록색 버튼을 클릭하면 Download ZIP이란 버튼이 있다.

요걸 클릭하면 zip 파일이 다운이 된다.



2) 압축 풀고 폴더에 넣어버리기

다운로드한 ZIP 파일의 압축을 푼다. 그리고 지난 글에서 사용했던 소스트리 접속!

소스트리 창 오른쪽에 보면 Show in Finder라는 귀여운 아이콘이 있다. 요 아이를 클릭해준다.


그러면 아래와 같이 창이 뜰 것이다. 그리고 자신이 만든 블로그 저장 폴더에 아까 압축 풀었던 폴더에 있던 파일들을 모조리 복붙 해준다.



3) 소스트리로 Commit하고 Push해주기

이렇게 복붙 해주고 나면, 소스트리에 Uncommitted changes라는 것이 뜰 것이다.

'너 뭔가 수정했구나?'라고 알려주는 것이다.


그리고 여기서 잠깐 짚고 넘어가야 할 용어들이 있는데, 바로 Commit과 Push이다.

- Commit : 변경된 사항들을 저장하고 기록하는 기능.

- Push : 저장된 변경 사항들을 저장소로 보내는 기능.


수정을 해놓고 Commit으로 일단 로컬에 기록 및 저장, 그리고 '아 이제 진짜 내용 보이게 해야지~' 하려면 Push를 누르면 된다. 아무튼 이 정도의 개념만 알면 된다고 생각한다.


다시 본론으로 돌아와서, Uncommitted changes를 선택 후 Commit 버튼을 누르면 하단에 메시지 입력란과 함께 Commit 버튼이 나타날 것이다. 메시지 입력란에는 무엇이 수정되었는지를 적어 놓으면 된다.


Commit을 하고 나면 상단 Push 버튼에 '나 좀 눌러줘~'라고 외치듯 뭔가 숫자가 표시된다. 

예상대로 그것을 누르면 수정 사항이 실제 내 블로그에 반영이 된다. 후후훗.


자 그러면 이제 멋지게 테마 적용이 완료되었겠지? (들뜬 마음)





난희고레?


내가 본 건 분명 이런 테마였는데...어째서...(말잇못)


이후 수많은 삽질을 시작했다. (그간의 슬픔과 고통이 담긴 커밋 메시지들...)

혹시 이 테마가 이상한 건가? 싶어서 중간에 막 다른 테마도 다운 받아서 써보고 그랬다.

하지만 역시 이상한 건 나였다는 것을 확실히 상기시켜주었다.


 


결국 해탈 상태에 이르고....

해탈 중ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ


얼마의 시간이 흘렀던가...

떠듬떠듬... 구글 검색에 영어로 이렇게 쳐보았다.

지킬 css 안된다.


결국, Stack overflow와 한 블로그에서 해답을 찾을 수 있었는데, 그냥 올리면 안 되고 어떤 부분을 수정해줘야 한다.


복붙 했던 파일들 중에 _conifg.yml이라는 일종의 설정 파일이 있는데 여기서

url과 baseurl을 다음과 같이 수정해줘야 한다.

- url : 내 깃헙 블로그 주소 (나의 경우 maeeemi.github.io)

- baseurl : 빈 문자열 (" ")


그리고 아래와 같은 코드를 한 가지 더 추가해야 한다.

remote_theme : aweekj/Kiko-plus

aweekj라는 사람의 Kiko-plus 테마를 가져오겠다는 의미이다.



이렇게 하고 다시 커밋과 푸시를 해주면!!!


적용 완료.




3. 소감

1) 구글 검색과 영어의 중요성

이번에도 역시나 우여곡절 끝에 완성시켰다. 그리고 역시나 구글의 도움을 얻었다. 

모를 땐 무조건 진리의 Google it. 사실 근데 영어로 검색해야 원하는 정보가 더 잘 나온다는 것.

영어의 중요성을 다시 한번 깨달았다. (내일 영어 학원 등록하러 갈 거임)


2) 정확한 방법에 대한 의문?

뭔가 알려주는 사람 없이 이것저것 해보면서 하다 보니 내가 지금까지 설명한 것들이 정확히 맞는 방법인지는 잘 모르겠다. 예를 들어, 소스트리에서 Show in Finder를 이용해 파일을 복붙 하는 방법 말고 더 간단하고 정석적인 방법이 있을지도 모른다는 것? 테마 적용에 관해 서치를 해보면 보통의 경우 터미널을 이용하는 것 같은데, 나처럼 소스트리라는 툴을 활용해서 테마를 적용시키는 과정을 설명한 사례를 찾기가 쉽지 않았다.

만약 더 쉽고 간단한 방법이 있다면, 댓글로 알려주셨으면 좋겠다.


3) 향후 계획

일단, 기존에 목표했던 테마 적용은 이루어졌다! (얏호)

이제 기존 테마의 정보들을 내 것으로 바꾸고 글을 쓰고 어떻게 포스팅하는지 방법을 알아봐야겠다.

아마 내 입맛대로 커스터마이징 하는 것은 조금 더 이후가 될 것 같다. 

솔직히 막힐 때마다 '아니 그냥 잘 되어 있는 블로그 플랫폼 이용하면 되는데 데 왜 이러고 있지?' 라며 현타의 시간을 보내기도 하지만 시간이 좀 걸리긴 해도 뭔가 진정한 내 것을 만들어가는 재미가 있어서 아마 계속 도전하고 있는 게 아닌 가싶다.


다음 글에서 만나용!



4. 참고

https://stackoverflow.com/questions/49200542/jekyll-theme-is-working-on-local-but-not-working-on-remote

https://dreamgonfly.github.io/2018/01/27/jekyll-remote-theme.html







매거진의 이전글 혼자서 Jekyll Blog 만들기 - 1편
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari