Jekyll이란

in etc.

본 글은 기존 Notion에서 이전된 글입니다.

작성 배경

github.io를 새로 만드려고 하던 중 Jekyll이라는 프레임워크를 알게 되었고 이 프레임워크를 사용하기 위해 프레임워크에 대해 간단히 알아본 후 사용해보고자 문서를 작성하게 되었다.

정의

  • 깃허브 설립자 중 한 명이 Ruby 언어를 통해 개발한 정적 웹 환경을 위한 프레임워크
  • 텍스트 변환 엔진으로, 마크업 언어로 글을 작성하면 미리 정의해 놓은 규칙에 따라서 정적인 웹 사이트를 만들어 주고, 이 과정에서 원하는 기능들을 구현할 수 있음
  • 깃허브 자체적으로 Jekyll Contents Management System을 내장하고 있어서 호스팅에 적합함

장점

정적 웹사이트(Static website)

  • PHP 등의 서버 소프트웨어가 필요 없고, HTT/CSS 등의 정적 파일 만으로 사이트를 생성하기 때문에 빠르고 가벼움
  • Jekyll은 기본적으로 Markdown 언어로 작성한 포스트를 github에서 commit & push 하는 형식
  • github에 익숙하지 않다면 어렵게 느껴질 수 있지만 로컬 환경에서 블로그를 통째로 저장해놓고 원할 때 markdown만으로 블로그 글 작성이 가능하기 때문에 한 번 익혀놓는다면 개발자들에게 매우 매력적인 툴
  • 정적 웹과 동적 웹에 관한 글

구조

디렉토리 구조

파일/디렉토리기능 및 역할
_includes재사용을 위한 파일을 담는 디렉토리, 포스트나 레이아웃을 쉽게 삽입할 수 있도록 함
_posts내가 만든 컨텐츠를 담는 디렉토리, 파일들의 명명 규칙(YY-MM-DD-title.md)에 따라 네이밍하도록 함
_layouts포스트를 포장할 때 사용하는 템플릿 디렉토리, 머리말을 통해 각 포스트 별로 레이아웃을 구분
_sitejekyll 엔진이 변환을 통해 생성된 사이트가 저장되는 default 디렉토리
_sasssass 조각 파일, main.scss에 import하여 하나의 스타일시트로 사용됨
_drafts아직 게시하지 않은 포스트(초안)
_data사이트에 사용할 데이터를 적절한 포맷으로 정리하여 보관하는 디렉토리, jekyll 엔진이 이 디렉토리의 모든 데이터 파일을 자동으로 읽어들여 stie.data로 사용할 수 있도록 만듦 (ex: members.yml → site.data.members)
_config.yml환경 설정 정보들을 보관, 명령어 실행 시 여러 옵션들을 정의해둠으로써 관리를 용이하게 할 수 있음
sitemap.xml검색 엔진에서 보다 쉽게 crawl해서 찾을 수 있도록 도움
.jekyll-metadatajekyll 엔진이 이 파일을 참고하여 마지막 빌드 후 한번도 수정되지 않은 파일을 파악하고, 다음 빌드 때 어떤 파일을 다시 생성해야하는 지 판단함
index.html or index.mdJekyll 엔진이 머리말 섹션을 모든 파일을 찾아 변환 작업을 수행함, 위에서 언급하지 않은 모든 여타 디렉토리에 있는 .html, .markdown, .md, .textfile이 여기에 해당함

동작 매커니즘

  • 파일 기반의 데이터를 정적인 리소스로 빌드해서 서비스
    • 게시글마다 md 파일 혹은 html 파일 생성
    • 글을 작성하고 배포하기 위한 빌드를 jekyll에서 진행하면 응답할 html 화면을 만들고 파일로 저장해서 준비함
    • 유저가 특정 화면을 요청하면 미리 생성한 html 파일을 찾아 꺼내줌
  • DB를 조회하고 HTML 양식으로 응답하는 과정과 유사함 (모든 화면을 미리 만들어둠)
    • 유저가 미리 요청할 수 있는 모든 화면을 미리 빌드해두는 방식을 사용
    • 따라서 글이 많을 수록 길어지는 글 목록 화면이 많아지고 미리 만들어야하는 페이지 수도 많아지게 됨
  • 검색 기능
    • 클라이언트 스크립트를 사용해서 작성된 모든 글의 제목과 내용의 키워드를 조회함
    • 최상위 경로에 검색에 필요한 정보인 search.json을 생성하고 자바스크립트를 이용해 검색함
  • 참고
    • git에서는 post의 확장자가 무조건 markdown이어야 정상적으로 html로 변환됨
      • mdwn은 다운로드
      • md면 나오지 않음
      • markdown이어야 함

Reference