하루의 기록

Github Pages + jekyll 조합으로 블로그 만들기 시도.

저장소 생성

soharu.github.io 로 저장소를 만든 후 clone

jekyll 설치

처음에는 Using Jekyll with Pages 이 문서를 보고 따라하느라고 Gemfile을 만들었었다.

위 문서에 나오는대로 하고 bundle install 때리면 주구장창 gem install ... 를 만나게 되는데 하라는대로 하다보면 jekyll도 설치된다. 그냥 다 필요한 거겠거니 하고 깔았다.

사이트 생성

여기서 가장 많이 헤맸는데 그냥 다 필요없고

jekyll new soharu.github.io

하면 site scaffold를 만들어 준다. soharu.github.io는 저장소를 clone한 디렉토리명이다. 아래와 같은 폴더와 파일들이 생성된다.

soharu.github.io/
├── _config.yml
├── _layouts
│   ├── default.html
│   └── post.html
├── _posts
│   └── 2014-01-25-welcome-to-jekyll.markdown
├── css
│   ├── main.css
│   └── syntax.css
└── index.html

사이트 테스트

jekyll serve

하면 http://0.0.0.0:4000 으로 생성된 사이트를 띄워준다.

근데 위와 같이 서버를 실행하면 변경 사항을 적용할 때 매번

jekyll build

를 해줘야 한다. -w(--watch) 옵션을 붙여주자.

jekyll serve -w

bootstrap 적용

개인적으로 웹 페이지 만들 때 디자인이 구리면 금방 흥미를 잃어버리기 때문에 적은 노력으로 괜찮은 디자인을 얻을 수 있는 Bootstrap을 적용하기로 했다.

일단 source를 통으로 받는다. source로 받으면 안에 예제가 포함되어 있어 참고하기 편하다.

Bootstarp의 자바스크립트 코드가 jQuery를 참고하므로 jQuery로 다운받는다.

Download the compressed, production jQuery 1.11.0

다운 안 받고 CDN 써도 되긴하는데 집 네트워크가 구린 관계로...

bootstrap-3.0.3/examples/sticky-footer-navbar 를 참고하여, _layout/default.html을 적당히 수정해주고 나니 지금과 같은 모양새가 갖춰졌다. 이때한 사소한(?) 삽질들은 따로 적지 않겠다.

다음에

익숙해질 때까지 삽질한 걸 적게 되지 않을까?

최종 목표는 스터디 사이트를 Github Pages로 갈아 엎는 거. jekyll-import에 wordpress 데이터를 import 하는 게 있던데 그걸로 삽질 좀 하지 않을까 싶다.