Back-end/DEV notes

jekyll 지킬이란?

cheersHena 2022. 3. 13. 15:37
반응형

 

지킬은 깃헙 설립자 중의 한명이 Ruby 언어를 통해 개발한 프레임 워크이다. 

킬 앤 하이드의 그 지킬 맞음 ..ㅋ

 

깃헙 자체적으로 Jekyll Contents Management System 을 내장하고 있어서 호스팅에 적합하다. (지킬 아니라도 호스팅 가능) 지킬은 개발자들이 애용하는 github에서 개발한 툴로 이미 잘 알려진 Wordpress의 강력한 경쟁자로 성장하고 있다.

 

지킬의 핵심 역할은 텍스트 변환 엔진 즉,HTML / Markdown 등의 마크업 언어로 글을 작성하면 이것을 미리 정의해 놓은 규칙에 따라 다양한 레이아웃으로 포장하여 정적 웹사이트를 만들어 준다. 이 가정에서 사용자는 _config.yml 또는 _posts 폴더 등의 수정 및 추가를 통해 원하는 기능을 구현할 수 있다.

 

정적 웹사이트 (Static website) 

웹은 정적 웹과 동적 웹을 나뉘어 지는데 지킬 기반의 블로그는 정적 웹 환경을 위한 프레임 워크이다. 정적으로 웹사이트를 구성하게되면 별도의 서버 소프트웨어 없이 HTML/CSS 등의 정적 파일 만으로 사이트를 생성하기 때문에 빠르고 가볍다.

지킬은 기본적으로 md(markdown)언어로 작성된 게시글을 github에서 commit & push 하는 방식을 취하고 있기 때문에 github에 익숙지 않은 사용자라면 어렵게 느껴질 수 있지만 로컬 저장소에 블로그를 통째로 저장 해 놓고 원할때 markdown만으로 블로그 글 작성이 가능하기 때문에 한번 익혀놓으면 개발자에게 매우 매력적인 툴이다.

 

# 정적 웹이란?

  • 요청에 따라 미리 저장된 페이지를 응답
  • 웹 서버가 필요하지 않으므로 서버의 영향이 적다
  • Back-end 코드가 없어 제작이 간편하다
  • 속도가 빠르고 가볍다
  • 복잡한 로직이 필요없는 소규모 사이트(블로그 등..) 에 적합하다

 

 

# 동적 웹이란?

  • 요청에 따라 웹서버가 데이터를 가공하여 전달
  • DB연동을 통한 데이터 CURD가 가능
  • 동일한 페이지도 요청에 따라 다른 응답 가능
  • 웹서버 사양에 따라 속도 저하의 우려가 있음
  • 복잡한 로직이 필요한 비즈니스 사이트( 인트라넷, 쇼핑몰 등..) 에 적합.

 

 

정적 웹은 단순히 저장된 파일을 요청에 맞게 보여만 주기 때문에 사용자는 단순 사이트 관광객의 역할만 가능하다. 블로그의 경우 로그인 같은 사용자 인증이 전혀 필요 없으며, 소유자 외 작성자가 필요하지 않기 때문에 정적 웹 형태로도 얼마든지 서비스를 제공할 수 있다. Jekyll은 사용자가 작성한 코드를 하나의 웹 프로젝트 형태로 빌드한다. Jekyll은 이러한 정적 웹 방식을 채택함으로써 빠른 속도를 확보하고 백엔드 코드에 대한 부담감을 없앴다.

 

Jekyll 블로그 퍼블리싱의 주체는 자기 자신이다. 페이지 하나하나를 세세하게 컨트롤이 가능하지만 동시에 모든 것을 직접 구성해야한다는 말이기도 하다. 흔한 댓글 기능 조차 플러그인을 사용해서 구성해야한다. 즉, 일반적인 블로그 플랫폼에서 제공하는 기본기능들도 스스로 구성해야만 한다. 원한다면 내 블로그에 무엇이든 구현할 수 있지만, 반대로 아무것도 구현하지 않으면 단순한 페이지 출력일 뿐인 것이다.

 

jekyll 디렉토리 구조

먼저 지킬 디렉토리 구조에 대해 살펴보자.

가장 처음 깃허브에 지킬기반의 블로그를 만들면 _includes, _layouts, posts, _site, _config.yml 등과 같은 기본 파일들이 생성된다. 이 폴더와 파일의 역할이 뭔지만 알아두어도 지킬 블로그 소스를 분석하는데 수월하다.

 

*기본 디렉토리 분석

 

_config.yml 환경설정 정보를 보관한다. 명령어를 실행할 때 여러가지 옵션들을 추가할 수 있지만 config파일에 정의해두는 것이 편리하고 관리에 용이하다.
_drafts 초안이란 아직 게시하지 않은 포스트를 말한다. 파일명 형식에 날짜가 없다.
_includes 재사용하기 위한 파일을 담는 디렉토리다. 필요에 따라 포스트나 레이아웃에 쉽게 삽입할 수 있다.
{ % include file . ext % }와 같이 Liquid태그를 사용하면 _includes/file.ext 파일에 담긴 코드가 삽입된다.
_layouts 포스트를 포장할때 사용하는 템플릿. 각 포스트 별로 레이아웃을 선택하는 기준은 머리말이다.
와 같이 Liquid태그를 사용하면 페이지에 컨텐츠가 주입된다.
_posts 포스트. 즉, 블로그장의 컨텐츠이다. 중요한 것은 파일들의 명명 규칙이다. 반드시 이 형식을 따라야 한다. YY-MM-DD-title.md 고유주소는 포스트 별로 각각 정의할 수 있지만 날짜와 마크업 언어 종류는 오로지 파일명에 의해 결정된다.
_data 사이트에 사용할 데이터를 적절한 포맷으로 정리하여 보관하는 디렉토리.
jekyll엔진은 이 디렉토리의 확장자와 포맷이 .yml 또는 .yaml, .json, .csv, .tsv … 등인 모든 데이터 파일을 자동으로 읽어들여 site.data로 사용할 수 있도록 만든다. 만약 이 디렉토리에 members.yml라는 파일이 있다고 가정하면, site.data.members라고 입력하여 해당 컨텐츠를 사용할 수 있다.
-sass mail.scss에 import할 수 있는 Sass조각으로 하나의 스타일시트 파일인 main.css로 가공되어 사이트에서 사용하는 스타일들을 정의한다.
_site Jekyll이 변환 작업을 마친 뒤 생성된 사이트가 저장되는 디폴트 경로이다.
.jekyll-metadata jekyll은 이 파일을 참고하여 마지막 빌드 후 한번도 수정되지 않은 파일은 어떤 것인지, 다음 빌드 때 어떤 파일을 다시 생성해야 하는지 판단할 수 있다.
index.html 또는
index.md..
Jekyll은 머리말 섹션을 모든 파일을 찾아 변환 작업을 수행한다. 위에서 언급하지 않은 모든 여타 디렉토리에 있는 .html, .markdown, .md, .textfile 이 여기에 해당한다.

 

반응형