여기 github 블로그에서 사용하는 jekyll (제킬) 서버에 대해 사용해보고 이것저것 시행착오해본 결과를 정리해둔다.

테마

난 해밀턴 테마를 설정했다.

해밀턴 테마

http://jekyllthemes.org/themes/hamilton/
재밌는 특징중 하나는 시간에 따라서 스킨이 바뀐다는 점이다.
예를들어, 아침에는 밝은 색 스킨으로, 저녁에는 어두운 스킨으로 바뀐다.
특정 스킨만 설정하고 싶으면 _config.yml 에 skin: 스킨명 을 설정해두면 된다.

로컬 서버 구동

jekyll 서버를 설치한 블로그 디렉토리로 이동 후 다음 명령어를 실행한다.
로컬에서 블로그를 확인가능하다.

bundle exec jekyll serve

목차는 구조화된 문서를 읽을 때 가장 중요한 부분이라고 생각한다.
하지만 jekyll에서 기본적으로는 제공하지 않는 것 같다.
찾아보니 직접 개발하는 사람도 있고, 플러그인을 설치하는 사람도 있는 것 같다.
플러그인 설치쪽으로 알아본다.
해밀턴 테마에서는 페이지 상단 설정부에 toc: true 를 적어놓으면 자동으로 목차를 만들어주긴 하나, 뎁스2 (H2) 헤더만 보여준다.
이 부분은 _includes/sidebar-toc.html 을 변경하면 된다. h_min의 값을 2에서 1로 바꿔준다.

목차 스타일 변경

일단 넓이가 너무 좁다.
_sass/hamilton/layout.scss 에서 .site-sidebar 부분의 스타일에서 padding: $spacing-unit 로 되어있는 부분을 아래와 같이 변경하였다.

padding-top: $spacing-unit;
padding-right: $spacing-unit/2;

목차 ScrollSpy 기능 구현하기

여기를 참고해서 구현했다.
적용하고 나니 다음과 같은 몇 가지 문제가 발생했다.

왼쪽에 있던 목차가 사라졌다.

목차가 오른쪽으로 이동된 것은 별로 상관없는데 왼쪽의 Table of Contents 라는 표시는 그대로 보인다.
이 것을 없애보자.
각 post에서 toc: true를 삭제했더니 기존의 목차가 사라졌다. 새롭게 추가한 목차는 살아있다. 이것을 사용해도 되겠다.

우측의 목차가 기존에 있던 스타일과 충돌이 나서 글자가 겹쳐보인다.

스타일시트 중에서 어딘가가 원인일 것이다.

레이아웃 관련

컨텐츠 넓이 변경

크롬 디버거 툴로 보니 사이드바를 포함한 기본 넓이(site-body 클래스) 가 1100px 인 것 같다.
1300px 정도로 넓히고 싶다.
variables.scss 파일에서 $content-width와 $on-large 의 값을 1100px 에서 1300px로 변경하면 된다.

톱 페이지

현재는 톱 페이지가 내용이 아무 것도 없다.
톱 페이지에서 새로운 글의 미리보기를 보여주면 좋을 것 같다.
jekyll 에서는 post.excerpt로 미리보기를 추가할 수 있다.
index.markdown 파일에 다음과 같이 excerpt 를 추가하였다.
참고: https://gist.github.com/benbalter/5555369

폰트

폰트 사이즈 변경

/_sass/hamilton/variables.scss 에 있는 base-font-size의 값을 변경한다.

원본

$base-font-size:    18px !default;

변경후

$base-font-size:    18px !default;

에러 핸들링

더블 브레이슬릿(중괄호) 관련 에러 발생시

예를 들면 다음과 같은 에러가 발생할 때다.

 Liquid Warning: Liquid syntax error (line 34): [:dot, "."] is not a valid expression in "{{ .NetworkSettings.Networks.nat.IPAddress }}" in
 

해결책
jekyll 이 사용하는 Liquid 라는 템플릿 엔진에서는 더블 브레이슬릿을 특별한 의미를 가지므로, 마크다운 내에서는 raw, endraw 로 해당 블락을 감싸줘야 한다.

참고: https://stackoverflow.com/questions/24102498/escaping-double-curly-braces-inside-a-markdown-code-block-in-jekyll

favicon 추가

https://medium.com/@xiang_zhou/how-to-add-a-favicon-to-your-jekyll-site-2ac2179cc2ed

포스트에 마지막 업데이트 일자 추가하기

https://tomkadwill.com/adding-last-modified-date-to-jekyll
포스트(md파일)의 상단에 last_modified_at: 2023-06-28 14:02:00 +0900을 추가하고, _layouts/post.html에서 해당 정보를 출력해주도록 코드를 변경한다.

jekyll서버 사용법

테마