우분투에서 github.io(블로그) 생성 및 preview를 위한 jekyll install

June 28, 2018    etc.

Jekyll install

  • github.io 같은 자신만의 블로그를 만들 때 유용한 tool이다. jekyll 없이는 매번 commit, push로 매번 확인하기 번거로우니 local pc에 바로 preview를 제공해주는 유틸리티이다.


1) http://jekyllthemes.org/ 에서 자신이 원하는 theme을 선택하고, 파일을 다운로드한다.


2) Github에 업로드할 repository를 만든다.

  • Repository name에 {자신의 깃허브 아이디}.github.io라고 입력하여 Repository를 생성시킨다.


3) 만들어진 repository를 들어가서 오른쪽 하단에 git 주소를 복사한 뒤,
window창을 켠뒤 내 PC에서 repository를 저장할 위치(e.g. ~/Documents)를 지정한 다음과 같이 입력한다.
e.g. git clone https://github.com/Donghwa-KIM/Donghwa-KIM.github.io.git


donghwa@donghwa-main:~/Documents$ git clone https://github.com/Donghwa-KIM/Donghwa-KIM.github.io.git


4) Donghwa-KIM.github.io folder를 들어가보면 .git과 같은 이미 생성된 파일들을 그대로 둔채 아까 받아둔 theme의 압축을 푼뒤 파일들을 Donghwa-KIM.github.io에 복사 붙여넣기를 한다.

donghwa@donghwa-main:~/Documents/Donghwa-KIM.github.io$ git add .
donghwa@donghwa-main:~/Documents/Donghwa-KIM.github.io$ git commit -m "Create my first blog"
donghwa@donghwa-main:~/Documents/Donghwa-KIM.github.io$ git push


여기까지가 깃허브를 이용한 https://donghwa-kim.github.io/를 만드는 법을 살펴보았다. 그럼 local pc에서 https://donghwa-kim.github.io/ page가 어떻게 만들어지는지 preview한는 jekyll tool을 설명하고자 한다.


5) CMD 실행한 뒤, 다음과 같이 설치한다.

sudo apt-get update
sudo apt-get install ruby ruby-dev make build-essential


6) .bashrc를 켠 뒤, 아래의 패스를 입력해 주고, source로 활성화 한다.

sudo gedit ~/.bashrc
  • export GEM_HOME=$HOME/gems
  • export PATH=$HOME/gems/bin:$PATH
source ~/.bashrc


7) gem file을 다운받아 donghwa@donghwa-main:~/Documents/Donghwa-KIM.github.io폴더 안에 이동시킨다. (블로그 테마마다 필요한 추가 code(e.g. gem ‘jekyll-sitemap’, gem ‘jekyll-paginate’)가 필요한데 상황에 맞게 gemfile에 추가해 주면 된다.)


8) Jekyll을 설치하기 위해 gem을 사용

donghwa@donghwa-main:~/Documents/Donghwa-KIM.github.io$ gem install jekyll bundler


9) gem source를 gemfile에 업로드

donghwa@donghwa-main:~/Documents/Donghwa-KIM.github.io$ bundle install


10) 이제 블로그를 작업할 때마다 local PC에 있는 repository PATH로 들어가 아래와 같이 입력하면 Localhost가 실행된다. e.g. Server address: http://127.0.0.1:4000/

donghwa@donghwa-main:~/Dropbox/git/Donghwa-KIM.github.io$ bundle exec jekyll serve


9) Post 후에 새로 추가되거나 수정된것을 온라인에 있는 블로그에 업로드를 하려면 아까 위에서 했던것 처럼 add, commit, push를 사용하면 된다.

donghwa@donghwa-main:~/Documents/Donghwa-KIM.github.io$ git add .
donghwa@donghwa-main:~/Documents/Donghwa-KIM.github.io$ git commit -m "Add my first post"
donghwa@donghwa-main:~/Documents/Donghwa-KIM.github.io$ git push

DSBA