본문 바로가기
개인프로젝트 후기/github pages만들기

jekyll을 설치해보자 - 03

by GiraffeB 2016. 8. 9.
Jekyll을 사용해보자.

Jekyll을 사용해보자.

jekyll site
jekyll-한국어 번역사이트

아래 글은 지킬의 문서를 따라가면서 말한마디 거드는 식으로 진행 됩니다.

1. Jekyll이 뭐죠?

Jekyll은 아주 심플하고 블로그 지향적인 정적 사이트 생성기입니다.
Jekyll은 다양한 포맷의 원본 텍스트 파일을 템플릿 디렉토리로부터 읽어서, (Mardown 등의 )변환기와 Liquid 렌더러를 통해 가공하여, 당신이 즐겨 사요하는 웹서버에 곧바로 게시 할 수 있는, 완성된 정적 웹사이트를 만들어 냅니다.

마크다운 문법을 지원하고, Liquid라는 뭔가 틀을 만들어주는 도구로 정적 사이트를 생성하는게 핵심인듯 하다.

그리고 Jekyll은 Github Pages의 내부 엔진이기도 합니다. 다시 말해, Jekyll을 사용하면 자신의 프로젝트 페이지나 블로그, 웹사이트를 무료로 GitHub에 호스팅 할 수 있다는 뜻입니다.

이 내용이 사실 우리가 Jekyll을 배우려는 핵심이죠.

2. 빠른 시작 설명서

~ $ gem install jekyll
~ $ jekyll new myblog
~ $ cd myblog
~/myblog $ jekyll serve
# => Now browse to http://localhost:4000

SKIP합시다. 위와 같이 나와있지만, 우리는 다음 장에서 나오는 대로 차근차근 따라가보죠.

3. 설치

Jekyll을 설치하고 실행 준비를 마치기까지는 단 몇분밖에 걸리지 않습니다. 만약 무언가 골치 아픈 일이 발생한다면, 문제점에 대한 설명과 개선 방안을 이슈로 등록 (또는 Pull Request 로 제출) 해 주시기 바랍니다.

ㅎㅎㅎ 다 알면 그렇죠 ㅎㅎㅎㅎㅎㅎ

3-1) 준비물

Jekyll 설치는 아주 쉽고 직관적이지만, 시작하기 전에 먼저 확인해야 할 몇 가지 준비물이 있습니다.

  • Ruby (Jekyll 2 사용 시 v1.9.3 이상, Jekyll 3 사용 시 v2 이상의 개발 패키지 포함)
  • RubyGems
  • 리눅스, 유닉스, 또는 맥 OS X
  • NodeJS, 또는 다른 JavaScript 실행환경 (Jekyll 2 와 그 이전 버전에서, CoffeeScript 지원에 필요함).
  • Python 2.7 (Jekyll 2 나 그 이전 버전일 경우)

Windows 사용중이니 간단간단하게 갑시다.
저는 ruby만 설치했습니다. 기본적으로 설치 다 되어 있던거 같아요.

3-2) RubyGmes로 jekyll 설치하기

Jekyll 을 설치하는 가장 좋은 방법은 RubyGems 를 사용하는 것입니다. 터미널 프롬프트에서, 이 명령을 실행합니다:

$ gem install jekyll

따로 신경쓸 것 하나 없이, 이 명령만으로 Jekyll 의 모든 gem 의존요소들이 자동적으로 설치됩니다.

참 쉽죠? 루비를 다운로드 해서 설치하신 다음 단계입니다. 이 명령어는 물론 GitBash에서 실행해 주세요.

4. 기본 사용법

Jekyll gem은 터미널 창에서 사용할 수 있는 실행파일 jekyll을 만들어 줍니다. 이 명령은 다양한 방식으로 사용할 수 있습니다.
여기서 잠깐

$ jekyll new myblog

위 명령어를 사용하면, 기본값으로 설정된 jekyll 디렉토리를 생성할 수 있습니다. 이 디렉토리 정보로 실습해 보죠.

$ jekyll build
# => ./_site 에 현재 폴더의 내용으로 사이트를 생성합니다

$ jekyll build --destination <destination>
# => <destination> 에 현재 폴더의 내용으로 사이트를 생성합니다

$ jekyll build --source <source> --destination <destination>
# => <destination> 에 <source> 폴더의 내용으로 사이트를 생성합니다

$ jekyll build --watch
# => ./_site 에 현재 폴더의 내용으로 사이트를 생성하고,
# 변경사항을 감지하면 자동으로 다시 생성합니다.

jekyll을 정적사이트 생성 도구 입니다. 위 방식을 현재 있는 디렉토리 내용을 기준으로 사이트를 생성해줍니다.
생성된 파일이 정적 웹 사이트가 되는 실재료인거죠.
_site라는 이름의 디렉토리로 생성됩니다.
_config.yml이라는 설정파일도 있지만 여기서는 넘어가겠습니다. 자세한 내용은 실제 jekyll사이트에서 참조해주세요.

또한, Jekyll은 개발 서버도 내장하고 있어서, 로컬상에서 브라우저로 접속하여 사이트가 어떻게 생성될지 미리 살펴볼 수 있습니다.

$ jekyll serve
# => 개발용 서버가 http://localhost:4000/ 에서 구동됩니다
# 자동-재생성: 활성화됨. 비활성화 하려면 `--no-watch` 를 사용하세요.

$ jekyll serve --detach
# => 현재 터미널에서 분리된다는 점을 제외하고는 `jekyll serve` 와 동일합니다.
# 서버를 종료하려면, `kill -9 1234` 를 입력하면 됩니다. (여기서 "1234" 는 PID 입니다.)
# PID 를 모른다면, `ps aux | grep jekyll` 라고 입력하세요. 그 다음, 인스턴스를 종료시킵니다. [자세한 내용](http://unixhelp.ed.ac.uk/shell/jobz5.html).

jekyll serve를 하게 되면 디렉토리 내용으로 빌드하면서 생성된 _site의 내용으로 로컬 웹서버를 사용해 볼 수 있습니다.
위에 적혀있는대로 주소는 http://localhost:4000 입니다.
실제 사용시에 문서를 작성하고, 설정값을 변경한 것을 로컬에서 확인 후 GitHub에 올릴 수 있습니다.

마무리

간단하게 jekyll 설치에 필요한 환경을 설치하고. 로컬에서 실행해봤습니다.
요소는 크게 3가지가 되겠죠.
1) GitBash
2) Ruby
3) jekyll

핵심적인 내용은 jekyll new myblog명령어를 써서 만들어진 디렉토리 구조를 이용해서 정적 사이트를 생성해 낸다는 겁니다.

구조를 알고 있어야 아 그렇구나가 되거든요. jekyll 사이트에 가면 친절하게 디렉토리 구조에 대한 설명이 나옵니다. 이 내용을 알아야 포스팅도 할 수 있습니다.

다음에는 포스팅을 해봐요.

사족

사실 저도 잘 모르는 내용이지만, 추가 기능을 설치하고 에러를 만날 가능성이 높은데, 그 때는 루비나 gems 디펜던시를 아는게 필요해 보입니다. 그런 내용은 더 넓은 지식을 요구하죠. 그런 부분에서 넘어지지말고 우선은 핵심 블로그를 만드는데 집중해 봐요. 이것 말고도 마크다운언어도 YAMLLiquid 문법도 알고 HTML은 당연히 알아야 만족스런 조작이 가능합니다.
내 맘에 들게 포스팅 하는게 쉬운일이 아니에요 ㅎㅎㅎ ㅠ

링크