이전 글 확인하기!

이전 글에서는 github pages 를 이용해 간단하게 "Hello World" 를 출력했다. 이제 본격적으로 테마를 입혀보자!

🔎 테마 고르기

Jekyll 은 공식적으로 Github pages 를 지원한다.

따라서 Github pages 의 테마를 고를 때에는 Jekyll 테마를 고르는 게 좋을 것이다.
🙄 그럼 과연 테마들은 어디서 구할 수 있을까??

아래의 사이트들에서 한번 둘러보자!

Jekyll Themes


jekyllthemes.io
jekyllrc
jekyll-themes

둘러보다 보면 진짜 이쁜 테마들이 많다. 자신에게 맞는 테마를 고르자!

😨 테마를 못 고르겠다면? Hydejack!

그렇다면 내가 고른 Hydejack 테마가 어떨까?

Hydejack Demo

이 테마의 장점은 크게 2가지가 있다.

Codeblock 지원

보다시피 코드의 파일명, 주석처리, highlight 기능까지 전부 괜찮게 되어있다. 알고리즘 문제 풀이를 올릴 용도라면 정말 괜찮은 기능이다.

Katex Kramdown(수학 표시) 지원

이 정도 기능을 가진 테마라면 괜찮은 선택이 아닐 수가 없다.

🔌 테마 적용하기

각자의 테마를 골랐으면 그 테마의 github repository 를 들어가 설치방법을 그대로 따라하면 된다. 나는 Hydejack 을 골랐으므로 Hydejack 의 설치방법을 알아보겠다.

Hydejack-Starter-Kit

테마 설치하기 전에...

jekyll 을 이용하기 위해서는 ruby 가 설치되어야 한다. 다음 명령어로 ruby 가 설치되어있는지 확인해보자.

~ $ ruby -v

만약 설치되어 있지 않다면 rvm 을 통해 설치를 진행해주자.

또한 bundler 가 필요하므로 아래 명령어를 통해 설치하자.

~ $ gem install bundler

👉 How to apply?

🗸 위 링크를 따라들어가 해당 레포지토리를 자신의 깃허브로 fork 해온다.
🗸 터미널을 열고 _config.yml 파일이 있는 루트 폴더로 이동
🗸 터미널에 bundle install 명령어 입력
🗸 설치가 끝나면 bundle exec jekyll serve 입력
🗸 포트가 열리면 http://localhost:4000 을 접속하자.

여기까지 하면 테마를 설치한 것이다. 본인의 입맛에 맞게 배경사진들을 바꾸고 글을 작성하고 git push 를 하면 github 내에서 자동으로 빌드를 할 것이다. 그러고 자신의 github pages 를 들어가면 예쁜 테마가 적용되어 있을 것이다.

Hydejack Documentation 을 읽어보면서 블로그 세팅을 세세하게 하면 될 것이다.

😎 Hydejack 을 적용한 나의 Github Page

처음 적용했을 때랑 조금 많이 다르다. 상단에 Nav bar 도 추가하였고 Pro 버전에만 있는 다크모드를 따로 코딩하여 적용한 모습이다.

또 위와 같이 Code highlight 기능도 완벽히 지원을 하고 오른쪽에는 TABLE OF CONTENTS 가 항상 따라다닌다.

더 보려면 내 깃허브 페이지 를 확인해면 좋을 것이다.

다음 글에서는 다크모드를 어떻게 적용했는지 적도록 하겠슴다.