현재 위치

홈 ›› 블로그 ›› cinsk의 블로그

jekyll-org: jekyll, orgmode, twitter bootstrap

cinsk의 이미지
글쓴이: cinsk / 작성시간: 화, 2013/01/22 - 9:25오전

1. 오랜만에 제 홈페이지의 내용을 읽어보니, 실제와 다른 내용, 자만심에 빠져? 낯 부끄러운 내용 등이 몇군데 있더군요. 내용만 바꿀까 하다가 design도 엉망이고 해서, 갈아엎을 생각에, twitter bootstrap을 적용시켜볼까 하는 마음이 들었습니다.

2. 원래 제 홈페이지는 m4 script를 써서 make로 .html를 generation하는 스타일이었습니다만, 귀찮아서 그냥 .html로 만들어서 CVS로 관리했었습니다.

3. github에서 사용하는 jekyll이 꽤 괜찮다는 말을 들어서 jekyll + twitter bootstrap을 쓰기로 맘을 먹었습니다.

4. 가끔 업무상, 또는 개인적인 목적으로 Emacs의 orgmode를 써서 문서를 작성하곤 하는데, bootstrap scaffolding style로 generation되면 참 좋겠다라는 생각이 들더군요. (아, 물론 .org을 .html로 export하는 기능은 이미 orgmode에 있습니다.)

5. 그래서, orgmode로 글을 작성하고 make를 돌리면, jekyll이 알아서 .org를 .html로 바꾸고, twitter bootsrap scaffolding style을 적용해서 .html들을 만들어내는 template을 만들었습니다.

여기에 소스가 있으니 관심있으면 받아가세요.

Generation된 output은 여기에 있습니다. 특히 [Article] 아래에 있는 페이지는 모두 emacs orgmode로 작성된 것입니다. 예제로 작성된 "Jekyll with org-mode and twitter bootstrap"이란 글을 보시면 대충 느낄 수 있을 것입니다. 이 글의 원본 org 파일의 내용은 여기에 있습니다.

간단하게? 글을 작성하고 homepage를 꾸미고 싶다면 한 번 써 보기 바랍니다.

한가지, Jekyll with org-mode and twitter bootstrap 이 글을 보시면, 원래 scaffolding style에 따라서 본문을 scroll하면 현재 위치에 따라 왼쪽의 차례 부분의 하나가 highlight되어야 합니다. 그런데 안되네요. -_-; 제가 css를 거의 몰라서.. Bug를 찾아 주시면 고맙겠습니다.

댓글

익명 사용자의 이미지

글쓴이: 익명 사용자 / 작성시간: 금, 2013/02/01 - 9:46오전

늘 느끼는 거지만, 신성국님의 브레인이 부럽습니다.

이준환의 이미지

글쓴이: 이준환 / 작성시간: 금, 2013/02/01 - 10:20오전

일단, 신성국님의 그 github 리퍼지터리를 포크한 다음, github page의 repository naming rule에 따라서,
joonhwan.github.com 으로 바꾸었습니다. (제 환경은 근데, Win7 입니다.)
그리고 github 한통의 메일을 받습니다.

The page build failed with the following error:

page build failed

For information on troubleshooting Jekyll see https://help.github.com/articles/using-jekyll-with-pages#troubleshooting
If you have any questions please contact GitHub Support.

이제. _config.yml 파일에서

http://some.place.com 으로 되어 있는걸 바꾸어 보려고 하는데, 잘 모르겠네요.

참고로 어찌 어찌 jekyll 을 설치해서, jekyll --server 를 실행하니

Configuration from C:/prj/oss/mine/joonhwan.github.com/_config.yml
Building site: src -> www
Liquid Exception: undefined method `each' for nil:NilClass in default
C:/prj/oss/mine/joonhwan.github.com/_plugins/topnav.rb:186:in `render'
C:/Ruby193/lib/ruby/gems/1.9.1/gems/liquid-2.4.1/lib/liquid/block.rb:94:in `bloc
k in render_all'
C:/Ruby193/lib/ruby/gems/1.9.1/gems/liquid-2.4.1/lib/liquid/block.rb:92:in `coll
ect'
C:/Ruby193/lib/ruby/gems/1.9.1/gems/liquid-2.4.1/lib/liquid/block.rb:92:in `rend
er_all'
C:/Ruby193/lib/ruby/gems/1.9.1/gems/liquid-2.4.1/lib/liquid/block.rb:82:in `rend

이런식으로 나오네요. ruby를 모르긴 하는데, 어쨌든 저 render 함수에

context['site']['topnav-list'].each { |id|

이 건데, 이름을 보니까, yaml 설정파일에 있는 것 같긴 한데 왜 nil class인가요.

음, 그리고, 이게 ruby가 인코딩을 CP949 로 인식하는 것 같고, 또 git은 그걸 자동으로 어떻게 컨버젼하도록 설정해 놓았는지,
html 에 있는 한글은 몇가지가 깨지네요.
도움 받을 힌트를 최대한 드려야 도움을 받을 텐데. ㅎ.

blablabla...

댓글 달기

텍스트 포맷에 대한 자세한 정보

Filtered HTML

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

BBCode

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param>
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

Textile

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • You can use Textile markup to format text.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Markdown

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • Quick Tips:
    • Two or more spaces at a line's end = Line break
    • Double returns = Paragraph
    • *Single asterisks* or _single underscores_ = Emphasis
    • **Double** or __double__ = Strong
    • This is [a link](http://the.link.example.com "The optional title text")
    For complete details on the Markdown syntax, see the Markdown documentation and Markdown Extra documentation for tables, footnotes, and more.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Plain text

  • HTML 태그를 사용할 수 없습니다.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 줄과 단락은 자동으로 분리됩니다.
댓글 첨부 파일
이 댓글에 이미지나 파일을 업로드 합니다.
파일 크기는 8 MB보다 작아야 합니다.
허용할 파일 형식: txt pdf doc xls gif jpg jpeg mp3 png rar zip.
CAPTCHA
이것은 자동으로 스팸을 올리는 것을 막기 위해서 제공됩니다.