Jekyll이란 정적 웹페이지 생성을 위한 Framework(프레임워크)이다. Jekyll의 개념과 작동 구조에 대해 조금 살펴보자.

Jekyll

Jekyll Logo

Jekyll은 여러 텍스트 파일로부터 정적 웹사이트 구축을 위한 파일을 생성해주는 프레임워크이다.
쉽게 말해서 Jekyll은 다양한 형식의 텍스트 파일을 웹 페이지 구성 요소인 HTML, CSS로 변환해준다.

Jekyll에서 특히 내가 좋아하는 기능은 Markdown으로 작성한 문서를 HTML 파일로 변환시켜주는 기능이다.
Markdown으로 한 줄 작성하면 그 한 줄은 HTML<p></p> 태그로 변환된다.
물론 단순히 변환만으로 끝나는 것이 아니다. 정적 웹사이트를 만든다는 목적에 맞게, 변환된 내용이 그럴듯한 웹 화면으로 보이게끔 자동화된 방법으로 페이지를 꾸미는 것을 돕는다.

또한 인터넷에 아주 많은 Jekyll Theme이 올라와 있으므로 웹 페이지를 빈 화면으로부터 하나하나 다 만들 필요가 없으며, 적당한 테마를 다운받고 가져다 쓰면 된다. 이쁜 테마를 선택했고 뷰가 맘에 든다면 별다른 수정없이 그저 포스팅만 해도 된다.

예를들어, 내 블로그의 데스크탑 모드 화면에서 상단 메뉴(Topbar)와 왼쪽 사이드바는 내가 직접 HTML, CSS를 수정 및 적용했다. 또 Jekyll의 도움으로 다른 페이지에서도 항상 이 2가지가 화면에 보이도록 자동화했다. (반응형 웹으로 만들었기 때문에 모바일 모드로 보면 좀 다르다.)
동시에 포스트 페이지의 글 부분은 Markdown으로 작성하였다. 이것을 Jekyll이 자동으로 HTML 파일로 변환했고, 나는 그저 Markdown 포스트가 HTML로 변환된 이후를 가정하고 항상 페이지의 중앙에 보이게끔 배치하였다 (Layout을 만들었다).

정적 웹사이트

Jekyll은 정적 웹사이트를 구축하므로 모든 페이지를 서비스하기 전에 미리 전부 만들어놓고 보여주기만 한다. 마치 유물을 전시하는 박물관 같다. 그래서 서비스 중에 사용자와의 상호작용에 의해 생긴 데이터를 저장해 둘 DB도 존재하지 않는다.

구조

블로그의 큰 구성을 보자면 HTML, CSS, Javascript 등의 소스가 블로그의 내용이되고, Jekyll이 소스를 취합하고 사용자 요청에 따라 적절한 소스를 제공하는 프로그램, Jekyll을 실행 시키고 인터넷 공간으로부터 다른 사용자를 수용하고 Jekyll을 이용해 소스를 서비스하는 서버로 구성된다.

Relation with Jekyll Server and User

Meta Info

Categories: ,

Published At:

Modified At:

Leave a comment