025. JeKyll 커스터마이징 - (8) 테마

커스터마이징 - (8) 테마

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

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

참고 Jekyll 공식 사이트

테마

Jekyll은 커뮤니티에서 관리하는 템플릿과 스타일을 활용하여 사이트를 커스텀할 수 있는 테마 시스템을 갖추고 있다.

Jekyll의 테마는 레이아웃, Include, 스타일시트를 사이트의 컨텐츠에 덮어쓰는 방식의 패키지를 제공한다.

Gem 기반의 테마 이해하기

아래의 명령어를 통해 새로운 Jekyll 사이트를 생성할 수 있다.

jekyll new <PATH>

위의 명령어를 통해 생성된 사이트는 Minima라는 Gem 기반의 테마를 기본 설치한다.

참고 Jekyll Quick-start 가이드

참고 Jekyll Minima Theme

Gem 기반의 테마를 사용하면 사이트의 디렉토리 중 assets, _layouts, _includes, _sass 디렉토리에 테마를 저장하고 숨김 처리된다.

하지만 필요한 모든 디렉토리는 Jekyll의 빌드과정 중에 모두 불러와 처리한다.

Minima 테마는 아래 파일만 표시된다.

├── Gemfile
├── Gemfile.lock
├── _config.yml
├── _posts
│   └── 2016-12-04-welcome-to-jekyll.markdown
├── about.md
└── index.md

Gemfile과 Gemfile.lock 파일은 Bundler에서 Jekyll 사이트를 구축하는 데 필요한 Gem과 Gem의 버전을 추적하는 데 사용된다.

Gem 기반 테마를 사용하면 테마 개발자가 업데이트시 해당 테마의 Gem을 가진 사용자는 업데이트를 쉽게 진행할 수 있다.

버전이 업데이트되면 테마 개발자는 해당 업데이트 내용을 RubyGems에 푸시한다.

이때 테마 Gem을 가지고 있는 사용자는 Bundle의 업데이트를 실행하여 프로젝트의 모든 Gem을 업데이트할 수 있다.

bundle update

또 다른 방법으론 <THEME>의 값을 Minima와 같은 테마명으로 바꾸면 업데이트를 할 수 있다.

budnle update <THEME>

위와 같은 업데이트를 진행하게 되면 테마 개발자가 푸시한 새로운 파일이나 스타일시트와 같은 업데이트를 프로젝트에 자동으로 적용할 수 있다.

Gem 기반 테마는 모든 테마 파일을 사용자의 방식대로 사용할 수 있게 하고 주요 목표인 컨텐츠 작성을 단순화하면서 지속적으로 업데이트되는 테마의 이점을 누릴 수 있게 하는 것이다.

테마 기본값 덮어쓰기

Jekyll의 테마는 기본 레이아웃, include, 스타일시트를 설정한다. 하지만 테마의 기본값을 덮어써서 사용자 자신만의 사이트 컨텐츠로 대체할 수 있다.

예를 들어 선택한 테마에 page의 레이아웃이 존재하는 경우 _layouts 디렉토리에 존재하는 page.html 대신 자신의 page.html 레이아웃 파일을 만들어 테마의 레이아웃을 재정의할 수 있다.

Jekyll은 아래 폴더에서 요청한 테마의 기본값을 확인하기 전에 사이트 자체의 컨텐츠를 먼저 탐색한다.

• /assets
• /_layouts
• /_includes
• /_sass

로컬 테마 파일 검색

작업하는 컴퓨터 안에서 테마 파일을 찾으려면 아래와 같은 작업을 수행해야 한다.

1단계

아래 명령어를 실행하여 테마 Gem의 이름을 표시한다.

bundle show

만약 Jekyll의 기본 테마인 Minima를 찾으려면 아래와 같이 입력한다.

bundle show minima

2단계
Finder 또는 Explorer에서 테마 디렉토리를 연다.

macOS 라면

open $(bundle show minima)

Windows 라면

explorer /usr/local/lib/ruby/gems/2.3.0/gems/minima-2.1.0

위와 같이 명령어를 실행하면 된다.

실행하면 Finder나 Explorer 창이 열리고 테마의 파일과 디렉토리들이 표시된다.

Minima의 경우 아래 파일들을 보여준다.

├── LICENSE.txt
├── README.md
├── _includes
│   ├── disqus_comments.html
│   ├── footer.html
│   ├── google-analytics.html
│   ├── head.html
│   ├── header.html
│   ├── icon-github.html
│   ├── icon-github.svg
│   ├── icon-twitter.html
│   └── icon-twitter.svg
├── _layouts
│   ├── default.html
│   ├── home.html
│   ├── page.html
│   └── post.html
├── _sass
│   ├── minima
│   │   ├── _base.scss
│   │   ├── _layout.scss
│   │   └── _syntax-highlighting.scss
│   └── minima.scss
└── assets
    └── main.scss

만약 테마를 구성하는 파일들을 명확하게 이해한다면 Jekyll의 루트 디렉토리에 유사한 이름의 파일들을 만들어 모든 테마 파일을 덮어 쓸 수 있다.

만약 Minima 테마의 footer 파일을 덮어쓰고 싶다면 _includes 폴더를 만들고 footer.html이라는 파일을 추가하면 된다.

Jekyll은 Minima 테마 Gem의 footer.html 대신 _includes/footer.html 파일을 참조할 것이다.

Gem 기반 테마를 일반 테마로 변환하기

Gem 기반 테마를 모두 제거하고 모든 테마 관련 파일이 루트 디렉토리에 있는 테마 파일로 변환하는 방법을 소개한다.

먼저 테마 파일의 디렉토리에서 루트 디렉토리로 파일을 복사한다.

그런 다음 Gemfile 환경설정에서 테마 Gem에 대한 참조를 제거한다.

예시로 기본 테마인 Minima 테마를 변환하는 과정을 살펴보자.

• 먼저 Gemfile을 열어 gem "minima", "~> 2.0"을 제거한다.
• _config.yml 파일을 열어 theme: minima를 제거한다.

위 과정을 수행하고 나면 bundle은 더 이상 테마 Gem에 대한 업데이트를 하지 않는다.

Gem 기반 테마 설치하기

jekyll new <PATH>

위의 명령을 통해 새로운 Jekyll 사이트를 Gem 기반 테마로만 진행하는 방법만 있는 것은 아니다.

Gem 기반 테마를 온라인에서 검색한 후 Jekyll 프로젝트에 통합하는 방법도 존재한다.

참고 Jekyll 테마의 이름들
Jekyll의 모든 테마가 이름 명명 규칙으로 jekyll-theme를 사용하는 건 아니다.

Gem 기반 테마를 설치하려면 아래와 같은 과정을 수행한다.

• 사이트의 Gemfile에 테마를 추가한다.

gem "jekyll-theme-awesome"

• 테마를 설치한다.

  bundle install

• 사이트의 _configl.yml 환경설정 파일에 테마를 추가한다.

  theme: jekyll-theme-awesome

• 사이트를 생성한다.

  bundle exec jekyll serve

참고 Gemfile과 _config.yml의 테마 선언
Gemfile에는 여러가지 테마를 선언할 수 있지만 _config.yml에서는 하나의 테마만 선택할 수 있다.

Jekyll로 생성한 사이트를 Github Pages를 통해 게시하는 경우 일부 Gem 기반 테마만 지원한다.

Github에서 어떤 테마를 지원하는 지 확인하려면 아래의 링크를 참조하자.

참고 Github Pages의 테마 지원 목록

Gem 기반 테마 만들기

단순히 테마를 사용하는 것이 아닌 테마를 만들 경우엔 RubyGems에서 테마를 패키징하고 사용자가 Bundler를 통해 설치할 수 있도록 배포할 수 있다.

Gem을 만드는 것이 익숙하지 않더라고 Jekyll의 테마 관련 명령을 사용하여 새로운 테마를 쉽게 만들 수 있다.

먼저 테마 이름을 정하고 이 이름을 파라미터로 하는 명령어를 실행한다.

jekyll new theme <NEW_THEME_NAME>

만약 jekyll-theme-awesome이라는 이름으로 새로운 테마를 만든다면 아래와 같은 결과를 확인할 수 있다.

jekyll new-theme jekyll-theme-awesome
    create /path/to/jekyll-theme-awesome/_layouts
    create /path/to/jekyll-theme-awesome/_includes
    create /path/to/jekyll-theme-awesome/_sass
    create /path/to/jekyll-theme-awesome/_layouts/page.html
    create /path/to/jekyll-theme-awesome/_layouts/post.html
    create /path/to/jekyll-theme-awesome/_layouts/default.html
    create /path/to/jekyll-theme-awesome/Gemfile
    create /path/to/jekyll-theme-awesome/jekyll-theme-awesome.gemspec
    create /path/to/jekyll-theme-awesome/README.md
    create /path/to/jekyll-theme-awesome/LICENSE.txt
    initialize /path/to/jekyll-theme-awesome/.git
    create /path/to/jekyll-theme-awesome/.gitignore
Your new Jekyll theme, jekyll-theme-awesome, is ready for you in /path/to/jekyll-theme-awesome!
For help getting started, read /path/to/jekyll-theme-awesome/README.md.

제작한 템플릿 파일을 만들어진 테마 폴더에 추가한 뒤, 필요에 따라 .gemspec 및 README 파일을 작성하면 된다.

테마를 구성하는 요소에 따라 어떻게 작업하면 좋은지 지금부터 확인해보자.

Layout과 Include

테마의 Layout과 include는 Jekyll 사이트 내에서 동작하는 것과 유사하게 동작한다.

사이트의 _layouts 폴더에 테마의 layout을, _includes 폴더에 include를 배치하면 된다.

예를 들어 테마에 /_layouts/page.html 파일이 있고 페이지의 YAMl 머리말에 layout: page가 있는 경우 Jekyll은 /_layouts/page.html을 먼저 탐색하여 레이아웃을 적용한다.

Asset

/assets에 존재하는 같은 상대 경로를 가진 파일이 아닌 모든 파일은 사이트 빌드시 모두 복사된다. SCSS, 이미지, 웹폰트 등 모든 종류의 리소스를 이 폴더에서 관리할 수 있으며 Jekyll의 페이지 및 정적 파일처럼 작동한다.

Jekyll은 YAML 머리말이 존재하는 파일만 체크하여 렌더링하기 때문에 YAML 머리말이 없는 파일은 단순히 생성되는 사이트로 복사된다.

이를 이용해 테마를 개발할 땐 Layout이 /assets/styles.css에 의존성을 부여할 수 있다.

스타일시트

사이트를 제작할 때와 마찬가지로 테마를 제작할 때에도 아래의 구조도 처럼 _sass 폴더에 스타일시트를 다시 배치해야 한다.

_sass
├── jekyll-theme-awesome.scss

아래처럼 @import 지시자를 사용하면 테마의 스타일을 사용자의 스타일시트에 포함시킬 수 있다.

@import "{{ site.theme }}";

테마의 문서화

테마를 배포할 땐 사이트를 만드는 사용자가 어떻게 테마를 설치하고 사용할 수 있는지를 알려줘야한다.

이 설명서는 /README.md 파일에 작성하여 테마에 포함시켜야 하며 어떤 Layout이 포함되어 있는지, 어떤 것을 포함하는지, 사이트의 구성 파일에 특별한 점이 있는지 등등 특이사항을 작성해서 사용자에게 인지시켜야 한다.

스크린샷 추가

테마 자체는 스타일을 나타내는 시각적인 요소가 강하다.

테마 저장소에 배포할 경우 README.md 파일에 추가할 수 도 있다.

사용자가 테마를 검색해서 들어왔을 때 스크린샷을 포함하면 더욱 어필이 될 것이다.

테마 미리보기

테마를 제작하는 동안 완성도를 체크하기 위해선 가짜 컨텐츠(더미)를 /index.html과 /page.html 파일에 같이 추가하여 확인할 수 있다.

더미를 추가하면 로컬에서 Jekyll 사이트를 재생성하듯 실시간으로 테마를 미리 볼 수 있다.

jekyll build

jekyll serve

build나 serve 명령어를 사용하는 방법은 아래 포스팅을 참고하면 된다.

참고 테마 미리보기의 예외처리
테마를 로컬에서 사이트를 생성하여 미리 보는 경우엔 .gitignore에 /_site를 추가하며 빌드된 사이트를 포함시키지 않도록 해야 한다.

테마 게시하기

테마는 RubyGems.org를 통해 배포하고 게시할 수 있다.

배포를 하려면 먼저 RubyGems 계정이 필요하다. (무료로 만들 수 있다.)

배포 절차는 다음과 같다.

• git 저장소에 테마를 추가한다.

git init # 제일 처음에만 사용한다
git add -A
git commit -m "Init commit"

• 테마를 패키징한다.

gem build <YOUR_THEME_NAME>.gemspec

• 패키징된 테마를 RubyGems 서비스로 푸시한다.

  gem push <YOUR_THEME_NAME>-*.gem

• (테마 업데이트 시) gemspec 파일의 버전을 올린 뒤 위의 절차를 반복한다.