Coding Log



환경 - (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인 파일에만 레이아웃이 적용된다.

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

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 레이아웃이 적용된다.

DISQUS 로드 중…
댓글 로드 중…

트랙백을 확인할 수 있습니다

URL을 배껴둬서 트랙백을 보낼 수 있습니다