009. JeKyll 컨텐츠 - (2) 포스트 작성

jekyll , , Comments

컨텐츠 - (2) 포스트 작성

본 카테고리는 정적 블로그 생성도구인 Jekyll에 관하여 작성하는 곳이다.

공식 사이트의 내용을 좀 더 풀어쓰고 스크린샷을 첨부하여 좀 더 상세히 기록하고자 한다.

참고 Jekyll 공식 사이트

들어가기 전에

이번 포스팅부터 post를 한글 영어를 혼용하여 작성하도록 하겠다.

본문에서 언급시 포스트는 포스팅할 파일을 가리킬 것이고, post는 코드상에 있는 포스트를 언급할 때 사용하도록 하겠다.

만약 헷갈릴 시 추후 수정하도록 하겠다.

포스트 작성

Jekyll의 가장 좋은 점들 중 하나는 블로그를 알고있다 라는 것이다.

이는 블로그를 구현할 수 있는 기능이 Jekyll의 기본 기능이라는 것이다.

포스트를 작성하고 온라인으로 게시할 경우에 컴퓨터에선 그저 포스트의 내용이 담긴 텍스트 파일들이 속한 폴더를 관리하면 된다.

데이터베이스를 쓰거나, 웹 기반의 CMS 시스템을 관리하는 것에 비해 많은 번거로움이 감소되는 것이다.

포스트 폴더

앞에 있는 디렉토리 포스팅에서 언급했듯, 블로그의 포스트는 _post 폴더에 저장된다. 이 포스트 파일들은 일반적으로 Markdown이나 HTML로 작성되지만 특정한 변환기가 설치되어 있다면 다른 형식일 수도 있다.

본 블로그에 작성되는 포스팅들 또한 모두 Markdown으로 작성되고 있다.

형식을 떠나 모든 포스트는 YAML 형식의 머리말을 포함해야 하고, 결과적으로 기존의 소스 형식에서 정적 사이트를 구성하는 HTML 페이지로 변환된다.

포스트 파일 생성

새로운 포스트를 작성하려면 _post 디렉토리에 새로운 파일을 생성하기만 하면 된다.

이 때 가장 중요한 것은 파일의 이름이다.

Jekyll에서는 아래와 같은 형식으로 파일명을 지정한다.

1
2
3
4
5
YEAR-MONTH-DAY-title.MARKUP
// YEAR  : 4자리 숫자로 작성
// MONTH : 2자리 숫자로 작성
// DAY   : 2자리 숫자로 작성
// title : 포스트의 제목

유효하게 작성된 포스트의 파일명의 예시는 아래와 같다.

1
2011-12-31-new-years-eve-is-awesome.md
1
2012-09-12-how-to-write-a-blog.textile

참고 site의 permalink 스타일이 변경될 때 URL의 손상을 막으려면 post_url 태그를 사용하면 된다.

컨텐츠 형식

블로그의 모든 포스트 파일은 제일 먼저 YAML 형식의 머리말로 시작해야 한다.

그 이후 내용 작성에 필요한 형식을 선택하여 작성한다.

Jekyll은 Markdown을 지원하며 인기있는 Textile 형식은 물론 다양한 형식을 많이 지원한다.

이런 형식들은 포스트 내의 다양한 형식의 컨텐츠들을 HTML로 MarkUp하는 고유의 변환 방식을 가지고 있으므로 자신에게 잘 맞는 형식을 숙지하고 해당 형식이 가장 적합한지 결정하면 된다.

참고 Jekyll이 지원하는 변환 형식들

주의 character sets
컨텐츠 처리기는 특정 문자들을 변경하여 결과물을 더 좋게 만들어 준다.
예를 들어 Redcarpet 의 smart 확장기능은 ASCII 인용 부호를 유니코드로 변환한다.
이때 문자들이 브라우저에 올바르게 표시되게 하려면 레이아웃 파일의 <head>에 <meta charset="utf-8">라고 입력해야 한다.

이미지 및 리소스 포함

특정 시점에서의 컨텐츠는 텍스트는 물론 이미지, 다운로드 혹은 기타 디지털 리소스를 포함할 때가 있다.

Markdown이나 Textile간에 리소스에 대한 문법에 차이는 있지만 이 리소스 파일들을 Jekyll의 사이트 폴더 중 어디에 저장할 지를 고민해봐야 한다.

Jekyll의 유연성 덕분에 위의 문제를 해결할 수 있는 많은 방법들이 있다.

가장 일반적인 방법으로는 프로젝트의 루트 디렉토리에 assets나 downloads폴더를 생성한 뒤 이미지, 다운로드 파일 그리고 기타 리소스 파일들을 보관한다.

이후 어느 포스트에서든 사이트의 루트를 포함한 링크를 통해 해당 리소스의 경로로 접근할 수 있다.

프로젝트에 설정한 사이트의 도메인 혹은 하위 도메인 그리고 경로가 구성되는 방식에 따라 차이점이 있지만 게시물의 site.url 변수를 사용하는 예제를 아래 소개한다.

포스트에 Image Asset을 포함할 때

1
2
... which is shown in the screenshot below:
![My helpful screenshot]({{ site.url }}/assets/screenshot.jpg)

포스트에 다운로드할 PDF 파일을 연결할 때

1
... you can [get the PDF]({{ site.url }}/assets/mydoc.pdf) directly.

참고 site의 루트 URL을 사용한 링크
사이트가 도메인의 루트 URL에만 표시된다는 것이 보장된다면 {{site.url}}변수를 제외시킬 수 있다.
이런 경우엔 단순히 /path/file.jpg의 링크만으로 리소스를 접근할 수 있다.

가장 일반적인 포스트

Jekyll은 포스트와 관련있는 여러 아이디어의 반복을 처리할 수 있다.

하지만 가장 일반적인 표준 블로그 스타일 게시물은 아래와 같다.

표준 블로그 스타일은 레이아웃, 제목, 게시 날짜 및 카테고리를 포함한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
layout: post
title:  "Welcome to Jekyll!"
date:   2015-11-17 16:16:01 -0600
categories: jekyll update
---
이 포스트는 _posts 폴더에서 찾을 수 있다.

포스트를 계속해서 수정하고 사이트를 다시 빌드하여 변경사항을 확인할 수 있다.

사이트를 재생성하는 방법은 여러가지가 있지만 가장 일반적인 방법은 `bundle exec jekyll serve`를 실행하는 것이다.

위의 명령어를 통해 웹 서버를 시작하고 파일이 업데이트 될 때마다 사이트를 자동으로 재생성할 수 있다.

새로운 포스트를 추가한다면 `YYYY-MM-DD-name-of-post.ext` 규칙에 따라 _posts 폴더에 새로운 파일을 추가하면 된다.

포스트 목록 표시

포스트의 종류별로 폴더를 구성하고, 각 폴더가 해당 포스트를 관리하는 것은 좋지만, 어딘가 포스트의 목록을 가지고 있어야 쓸모 있는 블로그가 될 것이다.

Liquid 템플릿 엔진과 태그기능 덕분에 특정 페이지에 포스트 목록을 생성하는 것은 매우 쉽다.

아래는 포스트 목록을 생성하는 기본 코드이다.

1
2
3
4
5
6
7
<ul>
  {% for post in site.posts %}
    <li>
      <a href="{{ post.url }}">{{ post.title }}</a>
    </li>
  {% endfor %}
</ul>

개발자라면 익숙한 for문을 통해 사이트 전체의 post의 개수만큼 반복해서 해당 post의 url와 title을 가져올 수 있다.

위 코드에서 post변수는 for문 안에서만 존재하며 현재 렌더링 된 for문을 포함하고 있는 페이지나 포스트의 변수에 접근하려면 post대신 page 변수를 사용하면 된다.

물론, 포스트를 어떻게 표시할 것인지 그리고 어디에 표시할 것인지는 사이트를 만드는 사람이 정할 수 있다.

참고 템플릿 동작 원리

포스트 발췌

각 포스트는 컨텐츠의 처음부터 excerpt_separator가 처음 나오는 부분까지를 첫 블록으로 인지하며 이 블록은 post.excerpt로 설정된다.

위에서 본 포스트 목록 코드를 다시 확인해보자.

1
2
3
4
5
6
7
<ul>
  {% for post in site.posts %}
    <li>
      <a href="{{ post.url }}">{{ post.title }}</a>
    </li>
  {% endfor %}
</ul>

여기에 post.excerpt를 추가하자.

1
2
3
4
5
6
7
8
<ul>
  {% for post in site.posts %}
    <li>
      <a href="{{ post.url }}">{{ post.title }}</a>
      {{ post.excerpt }} <!-- excerpt 추가 -->
    </li>
  {% endfor %}
</ul>

위와 같이 post.excerpt를 포스트에 추가함으로서 포스트의 내용이 어떤 것인지 힌트를 줄 수 있다.

Jekyll에서 자동으로 첫 번째 문단으로 차지하므로 post.excerpt는 p 태그로 굳이 감쌀 필요가 없다.

만약 p 태그를 제거하고 싶다면 아래와 같이 사용한다.

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

Jekyll이 자동으로 생성하는 발췌값 excerpt을 변경하려면 머리말에 excerpt_separator변수를 추가한다.

1
2
3
4
5
6
7
---
excerpt_separator: <!--more-->
---

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

각 포스트에서 설정하는 방법 뿐 아니라 _config.yml 파일에서 전역적으로 설정할 수도 있다.

만약 excerpt_separator를 ""로 설정하면 발췌가 완전히 비활성화된다.

추가적으로 Liquid 태그가 생성하는 모든 출력물과 마찬가지로 | strip_html 필터를 추가하여 출력물에 포함된 모든 HTML 태그를 제거할 수 있다.

| strip_html필터는 포스트의 상단에 있는 head 영역에 meta="description" 태그 안에 발췌 내용을 출력하고 싶거나 다른 위치에 HTML 태그가 들어가서 컨텐츠의 내용을 해치는 등 바람직하지 않은 경우에도 활용할 수 있다.

코드 구문 강조(Highlighting)

Jekyll에서 Pygments나 Rouge 등을 활용해서 코드 구문 강조를 할 수 있다.

모든 포스트에 코드를 포함시킬 수 있으며 아래와 같이 Liquid 태그를 이용하여 코드를 강조 할 수 있다.

1
2
3
4
5
6
7
8
9
{% 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 %}

위의 코드는 아래와 같이 렌더링 된다.

1
2
3
4
5
6
7
def show
  @widget = Widget(params[:id])
  respond_to do |format|
    format.html # show.html.erb
    format.json { render json: @widget }
  end
end

참고 코드 라인 표시
Liquid 태그에 linenos를 포함하여 코드 라인도 표시할 수 있다.

1
2
3
{% highlight ruby linenos %}
...
{% endhighlight %}
크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 저작자표시-비영리-변경금지 4.0 국제 라이선스에 따라 이용할 수 있습니다.

Namhoon KimSoftware Engineer

Work @ NAVER Corperation