006. JeKyll 환경 - (2) 세부적인 사용과 예시

환경 - (2) 세부적인 사용과 예시

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

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

참고 Jekyll 공식 사이트

Custom WEBrick Headers

Ruby on Rails의 WEBrick 관련 헤더 설정이다.

_config.yml에 사이트를 추가하여 맞춤 헤더를 제공할 수 있다.

# FILE: _config.yml
webrick:
  headers:
    My-Header: My-Value
    My-Other-Header: My-Other-Value

기본값

기본적으로 제공되는 Content-Type과 Cache-Control response header는 데이터의 특성을 지정하기 위한 동적 데이터와 캐싱을 사용하지 않도록 정적 데이터를 제공한다.

따라서 개발 도중에는 Chrome의 캐싱을 고려할 필요가 없다.

빌드 시 Jekyll 환경 지정

Build 혹은 Serve시 환경 변수를 통해서 Jekyll의 환경설정을 할 수 있다.

환경변수는 Build시 사이트 내의 코드 조건문을 적용받는다.

{% if jekyll.environment == "production" %}
   {% include disqus.html %}
{% endif %}

위의 예제 코드를 분석해보자.

위의 코드에 의하여 빌드시 환경 변수 production을 입력하지 않으면 if문 안에 있는 코드는 실행되지 않는다.

JEKYLL_ENV=production jekyll build

위처럼 환경변수 값을 설정함으로써 특정 환경에서만 동작하는 컨텐츠를 제작할 수 있다.

기본값

JEKYLL_ENV의 기본값은 development이다.

따라서 jekyll build처럼 Build를 할 경우 전달값 JEKYLL_ENV를 생략하면

JEKYLL_ENV=development가 된다.

위의 기본값에 따라

{% if jekyll.environment == "development"%}

위의 if문안의 코드는 자동으로 빌드된다.

environment값은 production이나 development값이 아닌 다른 어떠한 값이라도 사용할 수 있다.

실제 Production Site가 아닌 개발 단계에서 Disqus나 Google Analytics와 같은 것은 노출할 필요가 없기때문에 숨길 수 있는 것이다.

반대로 Edit me in GitHub를 개발 단계에선 노출하고 Production Site에서는 노출하지 않는 식으로 응용할 수도 있다.

JEKYLL_ENV=production jekyll build

위의 예제코드 처럼 빌드 명령 자체에 옵션을 사용함으로써 환경설정의 변경없이 A환경에서 B환경으로 이동할 수 있다.

기본 머리말(Front Matter Defaults)

YAML의 Front Matter를 사용하여 페이지와 포스트에 환경 설정을 적용할 수 있다.

기본 레이아웃, 맞춤형 제목, 더욱 정확한 날짜 지정 등을 페이지와 포스트의 추가하거나 머리말에 추가하는 것이다.

페이지나 포스트를 만들다보면 아래와 같은 특정 횐경 설정을 계속해서 반복하는 것을 느낄 수 있다.

• 모든 페이지와 포스트 파일에 동일한 레이아웃을 설정하거나 카테고리를 추가한다.
• 작성자의 이름을 페이지와 포스트를 만들 때마다 입력한다.

위와 같이 반복적인 작업을 하는 대신 사이트 구성 자체에서 기본값을 설정할 수 있다.

Jekyll의 환경 설정 파일인 _config.yml의 defaults 키의 scope/values 를 사용하여 사이트 전체의 기본값을 설정할 수 있으며 특정 파일 경로에 따라 혹은 해당 경로의 파일 유형을 정의할 수 있다.

참고 Jekyll의 Front Matter

아래 나와있는 코드는 _config.yml 파일의 defaults 키를 이용해 사이트 전체의 기본 레이아웃을 적용하는 예제 코드이다

defaults:
  -
    scope:
      path: "" # 비어있는 문자열을 넣으면 프로젝트 전체에 적용된다
    values:
      layout: "default"

주의사항
jekyll serve 커맨드를 수행중이라면 중지하고 다시 실행해야 한다.
자동으로 재생성하는 도중에는 _config.yml 파일의 변경사항이 반영되지 않는다

위의 코드는 values의 범위를 특정 경로에 존재하는 모든 파일로 제한하고 있다.

하지만 path가 ""로 설정되어 프로젝트 전체에 적용되고 있다.

모든 파일 에 레이아웃을 적용하되 특정 파일에 레이아웃을 설정하지 않으려면 아래와 같이 구성한다.

defaults:
  -
    scope:
      path: "" # 비어있는 문자열을 넣으면 프로젝트 전체에 적용된다
      type: "posts" # Jekyll 2.2 버전에선 `post`
    values:
      layout: "default"

여기서는 게시 유형이 posts인 파일에만 레이아웃이 적용된다.

pages, drafts에도 동일한 방식으로 적용할 수 있다.

type을 통해서 적용하는 것은 필수는 아니지만 scope/values를 지정하려면 path는 필수로 작성해야 한다.

위에서 말했듯 defalts에 대해 여러 scope/values를 적용할 수 있다.

아래의 코드를 보자.

defaults:
  -
    scope:
      path: "" # 비어있는 문자열을 넣으면 프로젝트 전체에 적용된다
      type: "posts" # Jekyll 2.2 버전에선 `post`
    values:
      layout: "my-site"
  -
    scope:
      path: "projects"
      type: "pages" # Jekyll 2.2 버전에선 `page`
    values:
      layout: "project" # 위의 "my-site" 레이아웃을 덮어 쓴다
      author: "Mr. Hyde"

path가 "" 이므로 프로젝트 내 모든 파일에 my-site라는 레이아웃이 적용된다.

하지만 projects/ 폴더에 존재하는 HTML 파일들은 project 레이아웃을 적용된다.

추가적으로 project라는 카테고리에 속하는 동시에 Mr. Hyde라는 작성자 변수 값도 갖게 된다.

또 하나의 예제를 보자

collections:
  - my_collection:
    output: true

defaults:
  -
    scope:
      path: ""
      type: "my_collection" # a collection in your site, in plural form
    values:
      layout: "default"

위의 코드에서 type이 my_collection인 콜렌션 내에서 default레이아웃이 적용된다.

우선순위(Precedence)

Jekyll은 _config.yml 파일에서 defaults 영역에 정의된 모든 환경설정 값을 적용한다.

하지만 특정 범위가 아닌 구체적인 경로를 사용하여 다른 scope/values의 적용을 덮어 쓸 수 있다.

먼저 예제를 다시 보자.

defaults:
  -
    scope:
      path: "" # 비어있는 문자열을 넣으면 프로젝트 전체에 적용된다
      type: "posts" # Jekyll 2.2 버전에선 `post`
    values:
      layout: "my-site"
  -
    scope:
      path: "projects"
      type: "pages" # Jekyll 2.2 버전에선 `page`
    values:
      layout: "project" # 위의 "my-site" 레이아웃을 덮어 쓴다
      author: "Mr. Hyde"

위의 코드를 다시 풀어보면 기본 레이아웃은 my-site 이지만 path의 구체적인 경로로 projects에 속한 파일들은 project 레이아웃이 적용된다.

위와 같이 환경 설정을 적용했어도, 해당 페이지나 포스트에서 머리말을 설정하면 해당 머리말이 제일 우선시 된다.

예를 들면 아래와 같다.

# _config.yml 파일의 경우
...
defaults:
  -
    scope:
      path: "projects"
      type: "pages"
    values:
      layout: "project"
      author: "Mr. Hyde"
      category: "project"
...

 # projects/foo_project.md 파일의 경우
---
author: "John Smith"
layout: "foobar"
---
...

projects 경로의 foo_project.md파일은 project 경로에 속해 있어 _config.yml의 환경설정에 의하면 project 레이아웃이 적용되어야 하지만 파일의 머리말이 제일 우선순위가 높으므로 foobar 레이아웃이 적용된다.