Github Pages open

 

fennecfox38.github.io를 개설했다. Jekyll을 가져다 썼는데 신기하다. 잘 주물럭주물럭 해봐야겠다.

시행착오를 좀 겪었긴 한데, 나름 정리해둘까 한다.


Jekyll Theme : Plainwhite

Plainwhite

우선 쓰고싶은 jekyll 테마를 찾아야 했는데, plainwhite가 마음에 들어서 이걸 쓰기로 했다.

plainwhite-jekyll 저장소에 있던 내용을 가져다 붙여넣을 예정이기 때문에 저장소의 파일들을 통채로 다운받았다. 붙여넣기 전, README를 읽고 필요한 설정을 해줬다. Gemfile에서 gemspec을 지우고, 대신 gem "plainwhite"를 추가해줬다. _config.yml에서 theme: plainwhite를 추가하란 말이 있었는데, 다른 후기를 찾아보니 빌드에러가 난다는 말이 있어 주석처리해놓았다.

GitHub Pages 활성화 및 Jekyll Server

fennecfox38.github.io라는 이름의 repository를 github에 만들었다. github pages 설정은 public으로 하거나, private인 경우 유료요금제를 사용하여야한다. main branch의 root폴더를 대상으로 활성화 해주자.

이제 fennecfox38.github.io 저장소에 Initial commit을 하고 push후, 리눅스 시스템에 (Termux도 가능하다) 아래와 같은 스크립트를 실행해보자.

~ $ sudo apt install ruby
~ $ sudo gem install bundler jekyll
~ $ git clone https://github.com/fennecfox38.github.io.git
~ $ cd fennecfox38.github.io
~ $ bundle
~ $ bundle exec jekyll serve

필자는 termux를 사용했지만, 앞으로 Ubuntu에서 사용예정이기에 Ubuntu명령어를 기준으로 하였다. 우선 jekyll을 사용하기 위해 ruby가 필요해서 ruby를 설치하고, 그다음 rubygem bundler로 jekyll를 설치한다.

적당한 폴더에 앞서 복사해서 commit후 push한 저장소로부터 clone을 해온 후, bundle을 실행하면 해당 jekyll을 불러올 것이다. 이후 실행하면 localhost에서 프리뷰를 볼 수 있다.

https://127.0.0.1:4000

Termux에서 Jekyll이 뭔가 이상하다. 그래도 commit후 push하면 github pages에서는 잘 빌드 되니 다행이다.

근데 커스터마이징이 좀 더 필요한 것 같다.

우선 사이트의 favicon이 지정되어 있지 않고, disqus가 활성화 되어있지 않아 댓글달기가 비활성화 되어있다.

Iconifier에서 favicon을 만들고, 시키는대로, HTML head부분에 추가하였다. disqus는 써본적이 없어서 블로그글을 참고하였다. 이분 글을 은근 자주 찾는 것 같다.

[Mobile] About Header

프로필 사진과 이름, 설명과 소셜링크가 있고, 그 아래 네비게이션 메뉴와 CCL 표시, 다크모드 토글 버튼이 있다.

[Mobile] Posts

[Desktop] Overview

데스크탑 모드에서는 좌측에 헤더, 우측에 내용이 있다.

Jekyll Theme : TeXt Theme

TeXt Theme

새 Jekyll Theme에 정착한지 며칠이나 됐다고… 나름 신중하게 고른 Jekyll 테마였으나, 이것저것 찾아본 끝에 TeXt Theme로 결정하고 설 연휴간 이것저것 설정하느라 시간을 다 보냈다.

사실 github pages로 옮기기로 결심한 가장 큰 이유는 기존에 사용하던 velog의 마크다운에서는 mathjax나 embedded html이 잘 호환되지 않아 불편해서였다. 지금와서 후회하는 거지만 이렇게 오래 걸릴거였으면 그냥 티스토리나 다른 서비스를 찾아볼거 그랬다.

그래도 TeXt Theme는 커스터마이징이 굉장히 강력해서 만족스럽다.

tag도 좋은 기능이지만, BitmapProject 제작일지와 같이 연속성을 가진 게시글도 있는데 시리즈, 카테고리 별로 좀 더 구분할 수 있는 기능이 필요했다. category를 직접 지원하는 건 아니지만 navigation에 등록하여 사용자가 연속적인 게시글을 순서대로 볼 수 있다.

상단 navigation을 통한 확장의 여지도 있고 게시글 하단 footer에 라이선스 옵션이나 뭐 이것저것 자동으로 embed할 수 있는 옵션들이 기본으로 제공됐다.

약간의 확장된 문법만 활용하면 Item style을 쉽게 조작할 수 있어 복잡한 css코드를 쓰지 않아도 됐다.

사실 이 테마를 발견한건 게시글 우측의 toc때문이었다. plainwhite에 toc를 이식하려다가 차라리 이 테마를 쓰는게 낫겠다는 생각이 들어서 옮기게 되었다. 뿐만아니라 TeXt Theme가 plainwhite에 비해 훨씬 구조화가 잘 되어 있어 구조를 임의로 변경하기도 용이했다.

This work is licensed under Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.
(The excerpted works are exceptionally subject to a licence from its source.) Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)