벼르고 별러왔던 깃헙 블로그를 올렸다. jekyll을 웹에서 발견하고 티스토리 블로그에서 갈아타야고 생각한지 거의 한 달 반 만이다. 돌아보면 주말을 맞을 때마다 항상 ‘이번 주말에는 꼭 블로그 이전해야지!’ 하고 다짐했던 것 같은데. 시간을 충실히 보내자고 다짐했던 4월부터 주욱 이어진 광란의 코딩을 잠시 멈추고 시간을 투자해 블로그를 올린 이유는 코딩과 함께 쌓아올린 기록에 대한 욕심도 났기 때문이었다. 코드 칠 시간이 항상 부족하다고는 생각하지만, 결과물에 대한 욕구와 함께 작업의 과정도 가능한한 기록해두고 싶었다.

가장 기초적인 프로세스를 정원희님의 브런치에서 참고하고 본문에서 언급해주신 심플한 테마를 적용했지만 자잘한 오류들 - 리소스 참조, Flickr 관련 - 과 스타일 관련한 내용들을 수정하느라 ‘아, 뭔가 좀 된 것 같은데.’ 라고 생각 할 수 있었던 타이밍이 꽤 늦어졌다. jekyll 공통 설정인지는 적용한 테마 개별 설정인지는 사실 잘 모르겠지만 커밋 전 로컬에도 글이 배포되게 할 수 없나 찾아보는데에도 시간이 꽤 걸렸고, 테마 기본 설정상 사이드바가 보이지 않도록 되어있는데 이걸 반대로 하려고 css의 transform 속성과도 한동안 씨름해야했다.

그러고보니 이거 IE에선 잘 돌아갈려나 모르겠다. 어지간하면 IE까지 신경 잘 안쓰긴 하지만..

예제로 있던 jekyll 카테고리를 없앨까 잠깐 고민했지만 본격적인 코딩 관련 내용을 포스팅할 code 카테고리와 별도로 유지하기로 마음먹었다. 블로그에 붙이고 싶은게 몇 가지 있는데 별도로 정리해도 될 만큼 노력과 시간을 꽤 잡아먹을 것 같기도 하고, 그래도 뭔가 만들어보려고 노력하는 code 카테고리 포스팅 후보군들과 달리 한 레이어 올라가서 플러그인 연동 같은게 주가 될 것 같거든. 물론 제 토이 프로젝트들도 오픈소스로 도배되어있긴 합니다. 사랑해요 전세계의 개발자분들.

어쨌든 매 순간은 아니더라도 가능한한 많은 기록을 남길 수 있도록 노력해보자.

맙소사, 글 쓰는데도 시간이 이렇게 들어간다니.-_-

과정

원희님의 브런치에서 참고한대로 기본적인 설치과정을 수행한다. 다만 맨바닥부터 시작하는게 아니라 공유된 테마를 사용하는 것이므로 jekyll new 를 수행하는게 아니라 가져다 사용할 테마의 repository fork - git clone 를 수행한다. 참고로 둘 다 수행했다가 한 폴더에 두 개의 소스가 들어있는 걸 볼 수 있었다..

설치 및 구동이 끝나면 localhost:4000 로 배포된 소스를 확인 할 수 있다.

# jekyll을 설치한다
$ sudo gem install jekyll

# Bundler 관련 오류가 나서 추가로 설치해야했다
$ sudo gem install bundler

# Fork한 내 프로젝트를 git clone
$ git clone https://github.com/Kitchu0401/kitchu0401.github.io

# 간단하게 다음의 명령어로 빌드 및 구동을 수행한다
$ jekyll serve --watch

추가로 작성한 포스팅까지 로컬에 배포되지는 않는다. 즉, 로컬에서 구동한 서버로는 스타일이나 스크립트 구동 여부만 확인이 가능하다. 사실 포스팅이야 마크다운 문법을 기준으로 출력되는거니 한두번 포스팅하다보면 에디터 내장 프리뷰로 충분히 확인 할 수 있을거고, 차후 플러그인 연동 등에 유용할 것 같긴 하다.

시간을 상당히 잡아먹은 사이드바 기본 토글 여부 조정은 css와 씨름한게 전부이기도 하고, transform 속성을 제대로 알고 수정한게 아니니 건너뛰도록 하자. 대부분의 작업시간은 레퍼런스 구글링, 블로그 탐닉[…]에 소비되었다.

추가로 변경한 부분은:

  • 자잘한 테마 스타일 변경. 스타일 수정 - 브라우저에서 확인의 반복이다.
  • 페이지 로드에 걸리는 시간을 조금이라도 더 줄이기 위해 기본 코드에드 CDN으로 참조하던 자원들(js, css)을 정적자원으로 변경
    • 이 경우 참조경로에 ‘/FILE-PATH/FILE-NAME’을 적어주는 걸로 간단히 해결 할 수 있다.
    • _config.xml 설정파일에서 baseUrl 속성을 변경하여 root 경로를 변경한 경우 `` 변수를 사용할 것.

적을게 좀 나올 줄 알았는데 자잘한 것 빼니 진짜 한게 없네 맙소사 부끄.. 웹서핑이 죽일 놈입니다.

지금 테마가 컨텐츠 좌측 고정이라 본문 내용이 적절하게 들어차있지 않으면 너무 넓어보일 것 같은데, 포스팅 몇 번 안하고 다시 스타일과 씨름해야할지도 모르겠다. 모바일 뷰가 엉망일 것 같은 느낌이 드는구만.

어쨌든 이번 주말 블로그 붙잡고있는건 여기까지.. 이후로는 코딩(주로 토이 프로젝트 관련일듯) 관련된 내용과 검색 접근성 관련 설정, 인스타그램 플러그인 등을 하나둘씩 붙여보자. 그리고 무엇보다 jekyll 공식 도큐먼트도 죽 훑어보고. 친절한 분들께서 훌륭하게 한글화까지 해주셨는데 대체 왜 읽지를 않니.

RTFM!

끝.

참고

이미 웹 상에 수많은 문서들이 있지만, 처음 블로그를 올리며 참고했던 여러 소스들.

훌륭한 정보 깔끔하게 정리해서 공유해주시는 분들께 항상 감사를. :)

아래는 차후에 한번 읽어보도록 하자.