Jekyll로 만든 깃허브 블로그 테마 변경 방법

Jekyll로 만든 깃허브 블로그의 초기 상태는 말 그대로 깔끔 그 자체입니다. 너무 깔끔해서 애석할 정도죠. 그래서 여러 가지 테마를 사용해서 블로그 테마를 적용해 줄 수 있습니다. 깃허브 블로그 테마 변경에는 몇 가지 방법이 있을 텐데 깃허브 페이지 자체 제공해 주는 매뉴얼을 따라 해서는 실패했고 제가 사용한 방법을 알려드립니다.

Jekyll로 만든 깃허브 블로그 테마 변경 매뉴얼을 믿지 말자

먼저 Jekyll로 만든 깃허브 블로그 테마를 손쉽게 바꾸는 방법입니다. 깃허브 페이지에서 제공해주는 테마를 이용하는 방법인데요. 사실 이쁜 게 없긴 하지만 나름 깜찍하게 생긴 Architect 테마를 적용해보려고 했으나 실패했습니다.

config.yml 파일의 theme를 깃허브에서 지원하는 테마로 바꿔주고  좀 있으면 테마가 적용될거라고 해서 따라 해봤지만... 안되네요. 이런 순 거짓말쟁이 같은 매뉴얼 같으니라고...

https://docs.github.com/ko/pages/setting-up-a-github-pages-site-with-jekyll/adding-a-theme-to-your-github-pages-site-using-jekyll

Jekyll을 사용하여 GitHub Pages 사이트에 테마 추가 - GitHub Docs

이게 깃허브 페이지 테마 변경 공식 매뉴얼인데요. 앞서 말했듯이 안 됩니다.

역시 세상에 쉬운 건 없죠.

Jekyll로 만든 깃허브 블로그 테마 변경

일단 Jekyll 페이지에서 설명하는 gem 파일을 업데이트하고 하는 정석적인 절차는 상당히 번거롭습니다. 솔직히 번거로운 정도가 아니라 어렵습니다. 루비를 모르는 입장에서 따라 하기조차 어렵죠.

그래서 대부분 Jekyll 블로그 테마를 변경하는 사람들이 사용하는 방법을 사용해 봤습니다.

다른 테마를 복사해서 블로그를 만드는 작업으로 사실상 지금까지 Jekyll 블로그를 만들면서 했던 수고들을 전부 헛수고로 만들어주는 현타가 오는 작업이었죠.

거두절미하고 시작해 보겠습니다.

 

Jekyll 공식홈페이지에서 알려주는 Jekyll 테마가 모여있는 사이트입니다.

• GitHub.com #jekyll-theme repos
• jamstackthemes.dev
• jekyllthemes.org
• jekyllthemes.io
• jekyll-themes.com

저는 이 중에서 두 번째 사이트에 있는 Yet Another Theme를 사용해 봤습니다.

https://jamstackthemes.dev/theme/jekyll-theme-yat/

Yet Another Theme (YAT)

여기로 들어가서 GitHub 버튼을 눌러줍니다.

쭉 내리다 보면 Installation이라는 부분이 보이네요.

세 가지 방법이 있다고 하는데 저희는 깃허브 블로그를 꾸미는 게 최종 목표니 두 번째 방법을 써볼 겁니다.

명령 프롬포터를 열어주세요(윈도 버튼 누르고 cmd 입력).

그러고 나서 cd 커맨드로 우리가 만든 블로그 폴더로 이동해 줍니다.

cd 커맨드로 폴더 이동

뭐 이런 식으로 이동하면 되겠죠.

그리고 해당 폴더를 윈도우 탐색기로 열어서 _config.yml 파일을 약간 수정해 줄 겁니다.

 

먼저 _config.yml 파일을 메모장으로 열어주세요.

그리고 theme: minima라고 되어있는 부분을 약간 바꿔줄 겁니다.

# theme: minima
remote_theme: "jeffreytse/jekyll-theme-yat"

이렇게 theme를 주석으로 쳐주고 아래에 해당 테마 깃허브에 명시되어 있는 테마 명으로 바꿔주는 거죠.

그러고 나서 아까 그 명령 프롬포트에서 bundle이라고 타이핑하고 엔터 키를 눌러줍니다.

그럼 이제 필요한 것들을 막 설치해 줄 건데요.

금방 끝날 겁니다. 그런데 완료돼도 뭐가 바뀐 게 없어 보이죠?

상관없습니다. 그렇거나 말거나 깃허브 사이트에서 블로그의 코드 페이지를 열어주세요.

깃허브에 파일 업로드 간단히 하는 방법

그러면 이제 파일을 드래그해서 올릴 수 있는데요.

_posts 폴더를 제외하고 전부 복사 붙여 넣기 해줍니다.

기존 포스팅이 없다면 _posts 폴더도 붙여 넣어도 크게 문제는 없습니다.

그러고 나서 커밋을 하고 기다립니다.

기다림의 시간이 끝나고 블로그를 들어가 봅시다.

Jekyll 블로그 테마 바뀐 결과

와우 손쉽게 테마가 바뀌었습니다.

아무래도 첫 번째 방법에서 실패했던 이유는 bundle을 안 해서거나 뭐 그런 이유일 것 같은데요.

이렇게 바꾸면 깃허브 블로그에 이미 포스팅한 내용을 없애지 않고 테마 변경이 가능한 것 같습니다.

Jekyll 블로그 테마의 문구 바꾸기

 

자 그런데 여기서 Your awesome heading이라는 문구가 살짝 거슬립니다.

별로 어썸 해 보이지가 않기 때문이죠.

이걸 바꾸려고 우리 파일을 열심히 찾아봐도 안보일 텐데요.

Jekyll 테마의 config 파일

처음 이 테마를 가져온 깃허브로 돌아가서 _config.yml 파일을 열어봅시다.

우리의 _config.yml 파일과는 사뭇 다른 걸 볼 수 있을 텐데요. 여기서 컨트롤 + F 키를 눌러 Your awesome heading이라는 문구가 있는지 찾아봅시다.

Jekyll 블로그 테마의 문구 수정

여기 있네요. 그러니까 이 162번 줄부터 167번 줄까지를 우리의 _config.yml 파일에 붙여 넣어줍니다.

위치는 정황상 github_username과 Build Setting 사이가 좋겠네요.

Jekyll 블로그 테마의 문구 수정

이렇게 변경하고 싶은 문구로 바꿔서 적어준 뒤 커밋을 해줍니다.

원한다면 배너 이미지도 바꿔도 좋겠죠.

Jekyll 블로그 테마의 문구 수정 결과

자 이렇게 성공적으로 문구가 바뀐 걸 확인할 수 있습니다.

config 파일을 잘 확인해 보면 파비콘도 바꿀 수 있을 것 같고 이 테마의 좀 더 다양한 기능을 이용할 수 있을 것 같네요.