Ruby Jekyll 기본 다루기
Jekyll 공식 사이트로부터 공부
1. Gemfile
사이트에 필요한 젬(패키지)들의 목록
Homebrew로 설치 할 수 있는 패키지들 이라고 생각하면 좋을 것 같다.
2. Bundler
Gemfile에 있는 젬들을 설치하는 프로그램
Homebrew? maven? gradle?과 비슷하지 않을까 싶다.
3. Gemfile과 bundler
필수로 사용해야하는 것은 아니지만 여러 다른 환경에서 올바른 버전의 Jekyll과 Jekyll 플러그인 사용을 도와주기 때문에 권장한다.
Bundler가 설치되어 있지 않은 경우, 아래의 명령어로 설치한다. (Jekyll Site 구축시 설치하였다.)
gem install bundler3-1. Gemfile 과 bundler를 사용
bundle install설치한 젬을 사이트에 빌드하는 명령어는 다음과 같다.
bundle exec jekyll serve3-2. Gemfile을 사용하지 않을 경우
jekyll serve4. Liquid
Ruby로 작성된 오픈 소스 템플릿 언어
Liquid는 템플릿 내에서 오브젝트, 태그, 필터의 조합으로 동적으로 콘텐츠 출력한다.
공식 사이트
4-1. 오브젝트
페이지에 출력할 변수 값
page.title 값을 출력
{{page.title}}4-2. 태그
템플릿의 논리 연산과 흐름을 제어
page.show_sidebar가 참인 경우 사이드 바 출력
{% if page.show_sidebar %}
<div class="sidebar">
sidebar content
</div>
{% endif %}4-3. 필터
오브젝트의 출력을 변화시킨다.
| 로 구분해서 오브젝트 안에 사용한다.
{{ "hi" | capitalize }}5. Jekyll Project 디렉토리 구조
ProjectName
│
├⎯ _data
│ └── dataFileName.yml
│
├⎯ _includes
│ └── includesFileName.html
│
├⎯ _layouts
│ └── layoutsFileName.html
│
├⎯ _posts
│ └── postsFileName.html
│
├⎯ _sass
│ └── sassFileName.scss
│
├⎯ assets
│ ├── css
│ ├── images
│ └── js
│
├⎯ _config.yml
├⎯ .gitignore
├⎯ Gemfile
└⎯ Gemfile.lock5-1. ProjectName
jekyll 명령어로 새로운 사이트를 생성시 입력되는 값으로 ProjectName이 결정된다.
jekyll new [ProjectName]5-2. _data
확장자가 yml로 된 파일이 들어가는 디렉토리
html에 직접 데이터를 입력하는 것보다 별도로 관리하는 것이 유지보수에 도움이 된다.
[dataFileName].yml
- 작성방법
내용은 - 으로 시작하고, - 없는 줄은 하나의 데이터 그룹이 된다.
- name: Home
link: /index.html
- name: About
link: /about.html
- name: Blog
link: /blog.html- 사용방법
[dataFileName]의 정보를 사용할 경우 그룹으로 되어있기 떄문에 그룹별로 데이터를 가져오도록한다.
- 형식은 다음과 같다.
{% for [변수명] in site.[data폴더명].[yml파일명] %}
{{ [변수명].[yml정의변수명] }}
{% endfor %}- Sample
{% for item in site.data.navigation2 %}
{{ item.tester }}
{% endfor %}5-3. _includes
확장자가 html, md로 된 파일이 들어가는 디렉토리
페이지 내에서 기능(영역)별로 html을 작성하여 유지보수에 큰 도움이 될 수 있다.
[includesFileName].html
- 작성방법
반복할 html 내용을 작성
평범하게 html 내용을 작성한다.- 사용방법
추가하고자하는 Page의 html에 {% %} 태그를 사용하여 추가한다.
- 형식은 다음과 같다.
{% include [includeFileName].html %}- Sample
{% include navigation.html %}5-4. _layouts
확장자가 html, md로 된 파일이 들어가는 디렉토리
동일한 구조를 반복해서 사용하고 싶을 때 사용한다.
[layoutsFileName].html
- 작성방법
기본 틀이 될 수 있는 html 문서를 작성한다.
include폴더의 html도 추가가능하다.
기본 형식은 아래와 같다.
{{ content }} : 세부 내용이 작성되는 부분
---
title: Home
---
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>{{ page.title }}</title>
</head>
<body>
{% include navigation.html %}
{{ content }}
</body>
</html>- 사용방법
머릿말(---) 에 layout변수를 추가한다.
- 형식은 다음과 같다.
---
layout : [사용할layout의html파일명]
---- Sample
---
layout: default
---5-5. _posts
확장자가 md로 된 파일이 들어가는 디렉토리
게시물 폴더의 html의 파일명은 아래와 같이 형식이 정해져있다.
[yyyy-mm-dd-postName].md
- 작성방법
기본 틀이 될 수 있는 md 문서를 작성한다.
---
layout: post
author: ted
---
작성내용Jekyll에 의해서 컴파일되면 _site 디렉토리에 yyyy/mm/dd/[postName].html의 구조가 생성된다.
5-6. _sass
확장자가 scss로 된 파일이 들어가는 디렉토리
Sass는 CSS확장기능이다.
- 사용방법
assets/css 디렉토리에 사용하고 싶은 CSS 에 _sass디렉토리에 만든 [sassFilename].scss 을 추가해서 사용한다.
머릿말(---) 아래에 @import "[sassFilename]";5-7. assets
정적인 파일이 들어가는 디렉토리
.
├── assets
│ ├── css
│ ├── images
│ └── js
...5-8. _config.yml
5-9. .gitignore
깃 허브에 등록되지 않았으면 하는 데이터를 입력한다.
Jekyll new 로 만들면 아래의 정보가 입력된 gitignore파일이 생성된다.
_site
.sass-cache
.jekyll-cache
.jekyll-metadata
vendor5-10. Gemfile
버전관리프로그램의 Maven, gradle과 비슷하다.
Ruby에서 패키지 관리해주는 프로그램이 bundler인데 bundler는 Gemfile에 작성된 내용을 읽고 의존관계들을 관리해준다.
5-11. Gemfile.lock
실제로 인스톨된 Gem과 의존관계가 있는 Gem이 기술된 파일
Gemfile을 bundler가 실행되면 Gemfile.lock에 갱신된다.
