그냥 개발 잘 하고 싶은 개발자입니다.

4 분 소요

제킬이란

워드프레스와 같은 웹사이트 제작 툴이다. 워드프레스와 다른 점은 제킬은 정적 리소스를 관리힌다는 점이다.

제킬의 핵심기능

제킬의 핵심기능은 텍스트 변환이다. Html, markdown과 같은 규칙에 맞는 문법으로 작성된 텍스트 파일을 그에 맞는 레이아웃으로 변환하여 웹사이트에 표현한다. 위에서 언급했듣이 정적리소스만을 다루기 때문에 php같은 서버사이드 언어가 불필요하며 사이트가 다이나믹 웹사이트에 비해 매우 빠르다는 장점이 있다.

누구에게 적합할까?

지극히 나의 주관적인 생각인데 마크다운으로 글을 자주 작성하고 그 글을 자신 또는 타인을 위해 저장하고 싶은 사람에게 잘 어울린다고 생각한다.

예를 들어, 나는 개발하면서 새로 배우게 되는 사실이나 추후에 다시 써먹기 위한 소스 템플릿등을 마크다운으로 저장하는데 이 글들을 좀 더 다듬어 블로그에 올리고 싶은 생각이 있었다. 하지만, 그때마다 마크다운으로 작성된 것을 블로그에 맞는 스타일을 변경하여 기입해야 하는데 이런 노가다성 작업은 매우 따분하여 오히려 글 쓰는 것을 귀찮게 만들었다.

제킬과 깃헙을 잘 이용하면 마크다운으로 작성한 글을 정리하고 깃헙에 push하기만 하면 자동으로 블로그에 글이 반영이 된다.

장점만 있는 것은 아니다. 블로그를 만들려면 어느정도 제킬을 알아야 하는데 내 생각엔 개발자가 아니라면 쉽게 접근하기 어렵고 개발자라 하더라도 제킬을 이해하기 위한 공부가 필요하다.

설치

note: 설치를 위해서 ruby 개발환경이 설치되어야 한다.

jekyll과 bundler 젬을 설치한다.

gem install jekyll bundler

총 27개의 gem이 설치된다.

테스트 사이트 시작

jekyll이 어떻게 동작하는지 확인하기 위해 테스트 사이트를 생성해 보자.

jekyll new jekyll-test

위의 명령어를 실행하면 현재 위치한 디렉터리에서 jekyll-test라는 폴더가 생성되고 그 안에 웹페이지의 리소스가 되는 파일들이 생성된다. 파일 목록은 다음과 같다.

404.html
Gemfile
Gemfile.lock
_config.yml
_posts
about.markdown
index.markdown

생성된 디렉토리로 이동하자.

cd jekyll-test

사이트를 빌드하고 로컬 서버를 기동한다.

bundle exec jekyll serve

위의 명령어를 실행하면 기존 리소스 파일에 추가로 _site 폴더가 생성된다. 이 폴더에 들어가면 실제 웹페이지를 구성하는 html, css와 같은 파일들이 빌드된것을 확인할 수 있다. 여기서 우리는 jekyll이 빌드를 통해 웹사이트를 구성하는 각종 파일들을 생성한 것을 확인할 수 있다. 우리는 컨텐츠를 만들고 제킬은 이 컨테츠를 가지고 웹사이트를 생성하는 것이다.

웹브라우저에서 다음 주소로 접속해 보자.

http://localhost:4000/

2. 리퀴드

오브젝트, 태그, 필터 3가지 중요한 파트를 가지고 있는 템플레이팅 언어이다.

오브젝트

리퀴드에게 어디에 컨텐츠를 출력할지 알려준다. 표시는 { { page.title } } 이런 예시로 한다.

태그

{% if %} {% endif %}

템플릿을 위한 로직과 제어를 담당한다.

필터

{{ 오브젝트 | 커맨드 }}

오브젝트를 커맨드로 변환하여 출력한다.

3. 프론트 매터

야믈 문법으로 파일 최 상단에 작성되며 페이지의 변수를 설정할 수 있다.

---
my_number: 5
---

위와 같이 변수를 선언하였다면, 아래와 같이 해당 변수를 컨텐츠에서 사용할 수 있다.

{{ page.my_number }}

4. 레이아웃

제킬은 HTML뿐만 아니라 마크다운 컨텐츠도 지원한다. 지원하다는 의미는 우리가 마크다운 문법에 맞는 컨텐츠를 포스트하면 제킬이 알아서 문법을 해석하고 문법에 맞는 레이아웃으로 웹페이지를 생성한다는 의미다.

또한, 정적인 웹페이지의 단점인 중복되는 html 태그를 사용할 필요가 없도록 할 수 있는 것도 레이아웃 덕분이다.

레이아웃은 일종의 템플릿이다. 이 템플릿이 웹페이지의 전체적인 골격(스타일)을 잡아주고 우리는 콘텐트에 집중한다. 레이아웃은 _layouts 폴더에 파일로 저장이 된다. 다음은 default.html의 예시이다.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
  </head>
  <body>
    {{ content }}
  </body>
</html>

다음은 이 레이아웃을 사용하는 컨텐츠의 예시이다.

---
layout: default
title: Home
---
<h1>{{ "Hello World!" | downcase }}</h1>

결론적으로 우리는 몇가지 레이아웃을 설정할 수 있고 각 컨텐츠를 작성할 때 프론트 매터에 사용하려는 레이아웃을 지정한다. 그러면 제킬이 자동적으로 웹페이지를 생성한다.

5. 인클러드

웹페이지는 하나의 웹소스(html)로 구성되지 않고 다수의 html로 구성된다. 예를들어 어떤 웹 페이지는 상단부분은 메뉴가 나타나고 왼쪽 측면은 상단에서 선택한 메뉴의 세부메뉴가 나타난다. 그리고 세부메뉴를 선택하면 진짜 컨텐트가 가운데 부분에 보이게 된다. 이 웹페이지는 동시에 3개의 페이지가 조합되어 구성된다고 이해하면 된다. 정적인 웹페이지에서 이를 효과적으로 구현하기 위해 제킬은 인클러드 기능을 제공한다.

include tag

이 태그는 _includes 폴더에 저장되어 있는 특정파일을 포함할 때 사용한다.

다음과 같은 네이게이션 소스를 _includes 폴더에 있다고 가정하자.

<nav>
  <a href="/">Home</a>
  <a href="/about.html">About</a>
</nav>

이것은 일반 페이지에서 다음과 같이 사용될 수 있다.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
  </head>
  <body>
    {% include navigation.html %}
    {{ content }}
  </body>
</html>

6. 데이터 파일

_data 폴더에 데이터 파일을 저장할 수 있고 이것을 페이지에서 사용할 수 있다. 데이터 파일의 포맷은 yaml 파일이어야 한다.

7. assets

8. 블로깅

디렉터리 구조

폴더구조만 알아도 많은 것을 이해할 수 있다.

파일/디렉토리 역할
_config.yml 설정정보를 저장한다. 이 파일에 있는 변수들을 어떻게 설정하느냐에 따라 블로그의 동작이 달라진다.
_drafts 초안으로 아직 게시하지 않은 포스트를 말한다. 파일명 형식에 날짜가 없다. 사용방법은 초안활용하기 를 참고하라
_includes 재사용하기 위한 파일을 담는 디렉토리로서, 필요에 따라 포스트나 레이아웃에 쉽게 삽입할 수 있다.
{% include file.ext %} 와 같이 Liquid 태그를 사용하면 _includes/file.ext 파일에 담긴 코드가 삽입된다.
_layouts 포스트를 포장할 때 사용하는 템플릿이다. 각 포스트 별로 레이아웃을 선택하는 기준은 머리말이며, 자세한 내용은 다음 섹션에서 설명한다. {{ content }} 와 같이 Liquid 태그를 사용하면 페이지에 컨텐츠가 주입된다.
_posts 한마디로 말하면, 당신의 컨텐츠다. 중요한 것은 파일들의 명명규칙인데, 반드시 이 형식을 따라야 한다: YEAR-MONTH-DAY-title.MARKUP. 고유주소는 포스트 별로 각각 정의할 수 있지만, 날짜와 마크업 언어 종류는 오로지 파일명에 의해 결정된다.
_data 사이트에 사용할 데이터를 적절한 포맷으로 정리하여 보관하는 디렉토리. Jekyll 엔진은 이 디렉토리에 있는 (확장자와 포맷이 .yml 또는 .yaml, .json, .csv, .tsv 인) 모든 데이터 파일을 자동으로 읽어들여 site.data 로 사용할 수 있도록 만든다. 만약 이 디렉토리에 members.yml 라는 파일이 있다면, site.data.members 라고 입력하여 그 컨텐츠를 사용할 수 있다.
_sites Jekyll 이 변환 작업을 마친 뒤 생성된 사이트가 저장되는 (디폴트) 경로이다. 대부분의 경우, 이 경로를 .gitignore 에 추가하는 것은 괜찮은 생각이다.
_sass 이것은 당신의 main.scss 에 임포트할 수 있는 Sass 조각들로서, 하나의 스타일시트 파일 main.css 로 가공되어 당신의 사이트에서 사용하는 스타일들을 정의한다.
sitemap.xml  

참조

https://nashory.github.io/routine/programming/2017/06/21/2_how_to_use_jekyll.html

카테고리:

업데이트:

댓글

댓글남기기

이메일은 공개되지 않습니다. 작성 필요 필드: *

마크다운을 지원합니다.

연관된 컨텐츠

CentOS 7 git 최신버전 설치하기

최대 1 분 소요

CentOS7에 기본 설치되어 있는 git의 버전은 1.8이다. yum 저장소에 등록되어 있는 것도 1.8이기 때문에 yum update로도 최신버전으로 업그래이드할 수 없다.