Jekyll 의 가장 큰 특징 중 하나는 “블로그 지향적” 이라는 것입니다. 정확히 이게 무슨 뜻일까요? 간단히 말하면, 블로그가 Jekyll 의 기본 기능에 녹아들어 있다는 뜻입니다. 글을 작성하고 온라인에 게시하는 작업을 생각해봅시다. 자신의 컴퓨터 안에 있는 텍스트 파일과 폴더를 관리하는 것 만으로 블로그를 운영할 수 있습니다. 번거로운 데이터베이스 설정과 관리, 그리고 웹-기반 CMS 시스템과 비교해보면 정말 반가운 차이점이죠!

포스트 폴더

앞서 디렉토리 구조 페이지에서 설명했듯이, 블로그 포스트는 _posts 폴더에 들어갑니다. 이 파일들은 일반적으로 마크다운이나 HTML 이지만, 적절한 변환기가 설치되어 있는 경우에는 다른 포맷일 수도 있습니다. 모든 포스트는 YAML 머리말을 포함해야만 하고, 최종적으로 원래의 포맷으로부터 변환 작업을 거쳐 당신의 사이트를 구성하는 HTML 페이지가 됩니다.

포스트 파일 생성하기

새 포스트를 생성하려면, _posts 디렉토리에 파일을 생성하기만 하면 됩니다. 이 때 중요한 것은 생성하는 파일의 이름입니다. Jekyll 이 이 파일을 블로그 포스트로 인식하게 하려면 파일명을 다음 형식에 맞춰야 합니다:

YEAR-MONTH-DAY-title.MARKUP

여기서 YEAR 는 네 자리의 숫자, MONTHDAY 는 두 자리 숫자이고, 확장자 부분의 MARKUP 은 파일에 사용된 마크다운 포맷입니다. 올바른 포스트 파일명을 예로 들면 다음과 같습니다:

2011-12-31-new-years-eve-is-awesome.md
2012-09-12-how-to-write-a-blog.md
ProTip™: 다른 포스트로 링크하기

post_url 태그를 사용하면 사이트 고유주소 스타일이 바뀌는 경우에도 URL 이 잘못될 걱정을 할 필요가 없습니다.

컨텐츠 포맷

모든 블로그 포스트 파일 첫 부분에는 YAML 머리말을 작성해야만 합니다. 다음 할 일은 내용 작성에 사용할 포맷을 선택하는 것입니다. Jekyll 은 마크다운을 기본적으로 지원하며, Textile 처럼 유명한 포맷 뿐만 아니라 다른 포맷들을 위한 수많은 확장기능들을 가지고 있습니다. 이 포맷들은 포스트 안의 다양한 컨텐츠를 마크업할 때 각각의 고유한 방식을 사용하므로, 이러한 특징들을 반드시 익혀서 자신의 요구사항에 들어맞는 포맷을 선택해야 합니다.

캐릭터 세트에 주의하세요

컨텐츠 처리기는 특정 문자들을 변경할 수 있어서 결과물을 더 좋게 보이게 합니다. 예를 들어, Redcarpet 변환 기본방식의 smart 확장기능은 ASCII 인용 부호를 유니코드 문자로 바꿉니다. 따라서, 이러한 문자들이 브라우저에 올바르게 표시되게 하려면, 레이아웃 파일의 <head><meta charset="utf-8"> 라고 입력하여 캐릭터 세트 메타 정보를 정의해야 합니다.

이미지와 자원 삽입하기

때때로 글 중간에 이미지, 다운로드 또는 그 밖에 다른 종류의 자원을 삽입해야할 때가 있습니다. 사용하는 포맷이 마크다운인지 Textile 인지에 따라 자원을 링크하는 문법에 차이가 있지만, 이 파일을 사이트 어디에 저장할 것인지 결정하는 것은 공통된 문제입니다.

Jekyll 에 다른 자료를 삽입하는 데에는 여러 가지 방법이 있습니다.

가장 일반적인 방법 중 하나는 프로젝트의 루트 디렉토리에 assets 같은 이름의 디렉토리를 만들고, 이미지와 파일, 그 밖의 다른 자원들을 보관하는 것입니다. 그 다음, 어느 포스트에서든지 링크하는 자원의 경로에 사이트 루트 경로를 포함시키면 됩니다. 다시 한 번 말하지만, 이것은 사이트의 (서브)도메인과 경로의 설정에 따라 각각 방법이 다릅니다. 하지만, 포스트의 absolute_url 필터를 사용하여 이 작업을 수행하는 마크다운 예제가 여기 있습니다.

포스트에 이미지를 삽입하려면:

... which is shown in the screenshot below:
![My helpful screenshot]({{ "/assets/screenshot.jpg" | absolute_url }})

PDF 다운로드 링크를 삽입하려면:

... you can [get the PDF]({{ "/assets/mydoc.pdf" | absolute_url }}) directly.

일반 포스트

이미 Jekyll 은 당신이 “포스트”에 관해 떠올릴 수 있을만한 다양한 아이디어들을 처리할 수 있는 능력을 가지고 있지만, 제목과 레이아웃, 게시일자, 카테고리를 가진 보편화된 블로그 스타일 포스트는 이렇게 생겼습니다:

---
layout: post
title:  "Welcome to Jekyll!"
date:   2015-11-17 16:16:01 -0600
categories: jekyll update
---

You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `bundle exec jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.

To add new posts, simply add a file in the `_posts` directory that follows the convention `YYYY-MM-DD-name-of-post.ext` and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.

처음 두 --- 사이에 있는 모든 내용은 YAML 머리말에 속하고, 두 번째 --- 이후의 모든 내용은 마크다운으로 렌더링되어 “컨텐츠”로서 출력될 것입니다.

포스트 목록 표시하기

포스트를 폴더로 관리하는 것은 아무런 문제가 없는 아주 좋은 방법이지만, 어딘가에 포스트 목록을 두지 않는다면 쓸모 없는 블로그가 될 것입니다. 다른 페이지 (또는 템플릿) 에 포스트 목록을 생성하는 것은 아주 쉬운데, 이것은 바로 Liquid 템플릿 언어와 이에 포함된 태그 기능 덕분입니다. 여기, 포스트 링크 목록을 생성하는 기본적인 예시가 있습니다:

<ul>
  {% for post in site.posts %}
    <li>
      <a href="{{ post.url }}">{{ post.title }}</a>
    </li>
  {% endfor %}
</ul>

물론, 자신의 포스트를 어디에 (그리고 어떻게) 표시할 것인지, 사이트를 어떻게 구성할 것인지는 당신 마음에 달렸습니다. 더 자세한 내용을 알고 싶다면, Jekyll 에서 템플릿이 작동하는 방법을 읽어보세요.

위 예제에서 post 변수는 오직 for 루프 안에서만 존재한다는 것에 주의하세요. 만약 현재 렌더링중인 페이지/포스트의 변수 (for 루프를 포함하고 있는 포스트/페이지의 변수) 에 접근하고자 한다면, post 대신 page 변수를 사용하세요.

포스트의 카테고리와 태그 표시하기

어때요, 꽤나 근사하긴 한데, 만약 다른 포스트에 연관된 몇몇 포스트들을 함께 표시해야 하는 경우는 어떻게 할까요? 이와 같은 경우엔 머리말에 정의할 수 있는 변수들을 사용하면 됩니다. 이미 “일반 포스트” 섹션에서 카테고리를 지정하는 방법을 보았습니다. 단순히 머리말에 YAML 목록으로 카테고리를 추가하는 것입니다.

이제 하나 또는 여러 개의 카테고리가 할당된 포스트가 있으니, 당신이 지정한 카테고리에 속한 포스트들만 표시하는 페이지 또는 템플릿을 만들 수 있습니다. 여기 특정한 카테고리의 포스트 목록을 만드는 방법을 보여주는 간단한 예제가 있습니다.

먼저, _layouts 디렉토리에 category.html 이라는 이름의 새 파일을 만듭니다 - 이 파일은 (최소한) 다음 내용을 가지고 있어야 합니다:

---
layout: page
---

{% for post in site.categories[page.category] %}
    <a href="{{ post.url | absolute_url }}">
      {{ post.title }}
    </a>
{% endfor %}

다음, Jekyll 프로젝트의 최상위 디렉토리에, category 라는 이름의 새 디렉토리를 만들고 표시하고자 하는 카테고리별로 파일을 만듭니다. 예를 들어, blog 라는 카테고리가 있으면 새 디렉토리에 blog.html 이라는 파일을 만들고 다음 내용을 넣습니다.

---
layout: category
title: Blog
category: blog
---

지금과 같은 경우, {baseurl}/category/blog.html 로 목록 페이지에 접근할 수 있습니다.

포스트를 그룹화한다는 점에서 카테고리와 태그는 매우 닮아있지만, 몇 가지 차이점 이 있습니다. 카테고리와 하위 카테고리는, 기본적으로, 계층을 형성해 사이트의 디렉토리 구조에 영향을 줍니다. 다음과 같은 헤더를 가진 포스트는

---
layout: post
title: A Trip
category: [ blog, travel ]
---

{baseurl}/blog/travel/year/month/day/A-Trip.html 로 접근할 수 있습니다. 이와는 다르게, 태그된 포스트

---
layout: post
title: A Trip
tags: [ blog, travel ]
---

{baseurl}/year/month/day/A-Trip.html 에 저장됩니다. 위에 카테고리에 관한 설명처럼 {baseurl}/tag/blog.html 을 만들지 {baseurl}/tag/travel.html 을 만들지는 당신의 결정에 달려있습니다.

이 예제로 태그와 카테고리에 관한 모든 설명이 끝났지만, 목록의 기능을 확장하기 위해서 당신이 직접 만든 어떠한 변수든지 사용할 수 있습니다.

포스트 발췌

모든 포스트의 첫 블록 - 컨텐츠 시작부분부터 excerpt_separator 가 처음 나오는 부분까지 - 은 포스트의 데이터 해시에 저장됩니다. 위 포스트 목록 예제를 다시 살펴봅시다. 포스트 내용에 대한 작은 힌트를 주기 위해 각 포스트의 첫 문단을 목록에 추가하는 것이 가능합니다:

<ul>
  {% for post in site.posts %}
    <li>
      <a href="{{ post.url }}">{{ post.title }}</a>
      {{ post.excerpt }}
    </li>
  {% endfor %}
</ul>

발췌된 부분을 일부러 p 태그로 감쌀 필요가 없습니다. Jekyll 이 첫 문단을 잡아내어 대신 해주기 때문이죠. 원한다면 다음과 같이 입력하여 태그를 제거할 수도 있습니다:

{{ post.excerpt | remove: '<p>' | remove: '</p>' }}

자동으로 생성된 포스트 발췌가 마음에 들지 않는다면, 포스트의 YAML 머리말에 excerpt 변수를 추가하여 직접 원하는 내용으로 덮어쓸 수 있습니다. 아니면, 포스트의 YAML 머리말에 자신만의 excerpt_separator 를 정의하는 것도 고려해볼만 합니다:

---
excerpt_separator: <!--more-->
---

Excerpt
<!--more-->
Out-of-excerpt

자신의 환경설정 파일 _config.yml 에 전역적으로 excerpt_separator 를 설정하는것도 가능합니다.

excerpt_separator"" 로 설정하면 발췌를 완전히 비활성화합니다.

또한, Liquid 태그로 생성된 모든 결과물에 대해서, | strip_html 필터를 추가하여 결과물에 포함된 모든 HTML 태그를 제거할 수 있습니다. 이 필터는 포스트 headmeta="description" 태그 안에 발췌 내용을 넣거나 HTML 태그가 들어가는 것이 부적절한 위치에 발췌 내용을 넣어야 하는 등의 몇몇 특별한 경우에 유용하게 사용할 수 있습니다.

코드 구문 강조

Jekyll 에는 Pygments 나 Rouge 를 활용한 코드 구문 강조가 기본적으로 포함되어 있으며, 포스트에 코드 내용을 삽입하는 것 또한 간단합니다. 다음과 같이 전용 Liquid 태그를 사용하기만 하면 됩니다:

{% highlight ruby %}
def show
  @widget = Widget(params[:id])
  respond_to do |format|
    format.html # show.html.erb
    format.json { render json: @widget }
  end
end
{% endhighlight %}

결과는 이렇게 보일 것입니다:

def show
  @widget = Widget(params[:id])
  respond_to do |format|
    format.html # show.html.erb
    format.json { render json: @widget }
  end
end
ProTip™: 줄 번호 표시하기

다음과 같이 강조 시작 태그 뒷부분에 linenos 를 추가하여 코드에 줄 번호를 표시할 수 있습니다: {% highlight ruby linenos %}.

이로써 포스트를 작성하는데에 필요한 기초지식은 충분히 살펴보았습니다. 이 밖에 또 할 수 있는 것이 뭐가 있는지 좀 더 파고들 준비가 되면, 포스트 고유주소 수정 방법이나 포스트에 (뿐만 아니라 당신의 사이트 어느 곳에든) 사용자 변수를 사용하는 방법 등에 관심을 가져보는 것도 좋습니다.

youngjin park's profile image

youngjin park

2019-07-21 18:00

Read more posts by this author