이상을 꿈꾸는 몽상가.. 프로그래밍을 좋아함..


Github-Pages 에 Jekyll 설치하기

Jekyll Logo
( 이미지 출처 : http://jekyllrb.com )

현재 보고있는 블로그는 Jekyll 2 로 만들어졌습니다.

Markdown 형식으로 작성한 문서를 Jekyll 가 정적인 HTML 형태로 변환해줍니다.
그리고 그 변환된 HTML을 Github-Page에 올려서 지금 이렇게 볼 수 있는 것입니다.

좀 더 정확히 설명하자면,
Github에다가 Markdown 형식의 문서를 올리면 Github가 Jekyll를 이용해서 정적인 HTML로 변환해주고
우리는 Github-Page에서 브라우저로 볼 수 있게 됩니다.


Install Jekyll 2 on Ubuntu 14.04 LTS

  • Ruby, NodeJs 설치
$ sudo apt-get install ruby ruby-dev make gcc nodejs
  • Jekyll2 설치
$ sudo gem install jekyll --no-rdoc --no-ri
  • 확인
$ jekyll -v

References

  • http://michaelchelen.net/81fa/install-jekyll-2-ubuntu-14-04/

Create a blog on local computer

  • 기본 블로그 생성
$ jekyll new my-awesome-site
  • Jekyll server 실행
$ cd my-awesome-site
$ jekyll serve
  • 서버기동 확인 (local computer)
  • Open the site(http://localhost:4000) on your browser JekyllInitialPage

References

  • http://michaelchelen.net/81fa/install-jekyll-2-ubuntu-14-04/

Create a blog with theme on Github-Page

테마를 제공받을 수 있기 때문에 사이트를 백지에서부터 꾸며나갈 필요는 없습니다.
테마를 공개해주신 분들에게 감사의 마음을 가져봅시다.

Github-Page를 이용하면 html 호스팅을 무료로 쉽게 사용가능하며
Github가 Jekyll를 지원하기 때문에 Github 에 접속해서 블로그 글을 추가, 수정 할 수도 있습니다.

Github-Page 생성

  • 테마 선택
    • Jekyll Themes 에서 다양한 샘플 확인 후 맘에 드는 테마 선택
    • 해당 테마의 소스가 Github로 공유되어있는지 확인
  • 해당 테마의 repository를 Fork 하기
    • 해당 테마의 repository에 접근해서 Fork 버튼 클릭
    • Fork 하게 되면 해당 테마의 reopository가 본인의 repositories로 복사됨
  • Repository 이름 변경
  • 웹브라우저에서 https://username.github.io 접속해서 생성여부 확인

로컬에서 관리하기

  • Github 에서 로컬로 clone
$ mkdir username.github.io.git
$ cd username.github.io.git
$ git clone https://github.com/username/username.github.io.git .
  • 글 수정, 추가 후 로컬 저장소에 반영하기
    • 저는 RabbitVCS Git 이라는 툴을 사용합니다.
$ git add.
$ git commit -m "commit message" ./*

Github Pages 로 올리기

  • origin 정보 저장 (최초 1회)
 # 추가
$ git remote add origin https://username@github.com/username/username.github.io.git

 # 등록여부 확인
$ git remote -v

 # 필요시 삭제 (후 재등록)
$ git remote remove origin
  • 수정사항에 대해서 Github로 올리기
$ git push -u origin master

References

Warnnings & Tips

  • 글 추가시 파일명은 반드시 yyyy-mm-dd-title.md 형식으로 작성해야합니다. 그렇지 않으면 jekyll 이 인식하지 못 합니다.
  • 수정, 추가시에 Github로 바로 올리지 마시고 local에서 서버를 띄워서 확인 후 올리시면 작업이 좀 더 수월합니다.
  • 깊게는 아니더라도 github 사용법에 대해서 간단히 공부해보시고 사용하시길 권합니다.
  • .gitignore 을 이용해서 작성 중인 글을 관리 가능합니다.
    • 특정 폴더를 gitignore 대상에 추가합니다. ( 예: _posts/NotOpen )
    • 작성중인 글은 NotOpen 디렉토리에서 작성하고 완성되면 관련 NotOpen 이 아닌 다른 폴더로 옮깁니다.
    • jekyll server를 띄우면 로컬에서는 해당 글이 보입니다.
    • git add, commit 시에는 대상에서 제외되므로 git push 시에도 Github로 올라가지 않습니다.
    • 다만, 로컬 저장소와 Github 저장소에 저장되지 않은 상태이니 실수로 지우거나 잘 못 수정하게 되면 복원 할 수 없습니다.
  • .gitignore 에 *~ 와 *.bak 을 추가하세요.

Configuration

  • /_config.yml 에 추가
  # Build settings
  markdown: redcarpet
  redcarpet:
    extensions: ["no_intra_emphasis", "tables", "autolink", "fenced_code_blocks", "strikethrough", "hard_wrap"]

  # highlighter: pygments
  permalink: none

Content list

  • 모든 post 상단에 목차를 추가한다.
  • markdown 이 제공하는 방법이 있긴한데 markdown을 변경할 때마다 모든 글을 수정해야하는 문제가 있다. 그래서 script 로 진행하는 방법을 선택한다.
  • /_layouts/post.html 에 추가
<div class="post">
  <br>
  <header class="post-header">
    ....
  </header>

  <!-- 추가 코드 -->
  <div id="toc" hidden>
    <H3 class="index">== I N D E X ==</H3>
  </div>
  <br/><br/>
  <!-- 추가 코드 -->

  <article class="post-content">
    ....
  </article>
</div>


<!-- 추가 코드 -->
<script type="text/javascript">
 $(document).ready(function(){
    var tag = null;
    $("h1,h2,h3,h4,h5,h6").not(".subtitle").not(".post-title").not(".index").each(function(i,item){
      tag = $(item).get(0).localName;
      $(item).attr("id","content_"+i);
      $("#toc").append('<a class="new'+tag+'" href="#content_'+i+'">'+$(this).text()+'</a></br>');
    });

    if(tag !=null ){
      $(".newh1").css("margin-left",0);
      $(".newh2").css("margin-left",20);
      $(".newh3").css("margin-left",40);
      $(".newh4").css("margin-left",60);
      $(".newh5").css("margin-left",80);
      $(".newh6").css("margin-left",100);

      $("#toc").attr('hidden', false);
    }
 });
</script>
<!-- 추가 코드 -->

Comments

  • DISQUS 라는 소셜 댓글 서비스를 활용해서 댓글 기능을 추가할 수 있습니다.
  • 그 외에도 댓글 수, 조회 수 출력 기능을 추가할 수 있습니다.
  • 자세한 내용은 (DISQUS on Jekyll2)[/jekyll/2015/12/01/DISQUSOnJekyll2.html] 를 참고하세요.

View Counts

  • DISQUS 혹은 Google Analyticator 중 하나를 활용해야 할 것 같아서 고민 중입니다.
  • https://developers.google.com/analytics/devguides/reporting/?csw=1
  • https://wordpress.org/plugins/google-analyticator/
  • http://jhshi.me/2013/11/10/page-view-plugin-for-octopress/

References

  • https://github.com/saltfactory/saltfactory.github.io/blob/master/_config.yml
  • Jekyll 문법

Donations ❤

제가 작성한 글이 작게라도 도움이 되었기를 바랍니다.
관심 가져주시는 분이 있는 것을 느끼고 힘내기 위해 기부 버튼을 만들어봤습니다.
혹시 가능하시다면 $1 라도 기부 부탁드립니다 ^^





Associated Posts

관련된 주제를 살펴볼 수 있도록 동일한 Tag를 가진 글들을 모아뒀습니다. 제목을 눌러주세요.


Disqus Social Community

SNS계정으로 댓글을 달아도 SNS에 글이 남지 않습니다.
이메일 주소 입력으로 글을 남길 수 있으며, 답변이 달리면 이메일로 알림을 받을 수 있습니다.

i