Jekyll blog 만들기

September 12, 2017 | 2 Minute Read

Heroku에 Ruby on Rails 5로 만든 앱을 올리다 보니, Ruby on Rails 4를 사용하던 때와는 다른 에러들이 나오기 시작했다. 홈페이지를 여러개 만들어야 하는 상황이라 문제와 해결방법을 기록할 블로그를 만들기로 했다. 기왕 블로그를 시작하는 김에 새로운 블로그 툴을 사용해보려고 Jekyll로 만들었다. 기존에는 Tistory, Naver blog, Blogger 등 기본 제공형 블로그와 Wordpress를 사용해본 경험이 있다. 기존 블로그에서 느낀 가장 불편한 점은 editor였다. 종종 글을 작성할 때 editor와 구현된 글(HTML로 변환된 글) 사이의 괴리가 있었기때문에 html 편집기로 들어가 태그를 수정해줘야했다. Jekyll은 마크다운 언어로 글을 작성하기때문에 해당 문제는 없을 것으로 기대했다.

설치하기

설치 방법은 다음 링크에 잘 정리가 되어있다. Jekyll은 Ruby로 만들어졌기때문에 mac과 linux를 쓴다면 편할 것 같다. git과 terminal을 기본적인것만 사용할 줄 안다면 쉽게 설치가 가능하다. 하지만, 잘 사용하지 못하더라도 아래 블로그에 정리된 것을 따라하면 설치할 수 있을 것 같다.

https://nolboo.kim/blog/2013/10/15/free-blog-with-github-jekyll/

설치 및 블로그 생성

https://jekyllrb-ko.github.io/docs/installation/

Jekyll 공식 홈페이지를 방문해서 한 번 살펴볼 것을 추천한다. 아래의 과정은 GitHub Page를 이용해 Jekyll 블로그를 온라인에서도 확인할 수 있도록 하는 방법이다. GitHub Page를 이용하면 [사용자명].github.io URL의 블로그를 얻을 수 있다.

Ruby가 설치되어 있다면, 아래 명령어를 통해 Jekyll을 설치할 수 있다. Ruby gem으로 설치할 수 있다.

$ gem install jekyll bundler

Jekyll 사이트를 만든다.

$ jekyll new [username].github.com
$ cd [username].github.com

GitHub에 deploy

$ git init
$ git remote add origin [저장소 URL]
$ git add -A
$ git commit -m "init"
$ git push origin master

[사용자명].github.io에 접속하면 deploy된 블로그를 확인할 수 있다.

글 쓰기

/_posts/ 안에 YYYY-MM-DD-title.md 형식으로 파일을 만들고 글을 써준다. 파일의 맨 위에는 아래와 같은 header 내용을 적어준다.

---
layout: post
title:  "Jekyll blog 만들기"
date:   2017-09-12 17:51:30 +0900
categories: jekyll
---

글은 마크다운 언어로 작성을 한다. 그러면 Jekyll이 HTML로 변환해서 화면에 출력해준다. 마크다운 언어의 사용법에 대해서는 다음 링크를 참조

https://gist.github.com/ihoneymon/652be052a0727ad59601

발행 하기 전에 local에서 확인하기

local 환경에서 미리 사이트를 확인할 수 있다.

$ bundle exec jekyll serve --watch

online 게재

GitHub에 push하면 조금 후 GitHub Page가 최신 버전을 자동으로 반영한다.

$ git add -A
$ git commit -m "add new post"
$ git push origin master

문제해결: Encoding Error

사용자에 따라서 아래의 error가 발생할 수 있다.

ERROR Encoding::CompatibilityError: incompatible character encoding: UTF-8 and ASCII-8BIT

Encoding 에러가 뜨는 경우, 기본적인 해결방법은 config 파일에 encoding: UTF-8을 선언하는 것이다. 선언 이후에도 error가 계속되는 경우, Jekyll 블로그의 경로 상에 한글이 포함되어 있는지를 확인한다. Webrick httpservlet의 버그로 추측되는데, Jekyll 블로그의 경로 상에 한글이 포함되어 있고 포스트 제목에도 한글이 있을 때 encoding error가 발생한다.