폴더 구조

jekyll 폴더 구조

여기서 설명하는 폴더 구조는 jekyll의 기본적인 폴더 구조 이외에도, 우리가 사용하는 테마(Clean Blog theme)의 폴더 구조도 같이 설명하고 있습니다. 우리가 사용하는 테마가 궁굼하신 분은 이전 블로그인 테마 설정을 확인하세요.

기본 폴더 구조

jekyll 홈페이지에 친절하게도 기본 폴더 구조에 대한 설명이 자세히 나와있습니다.
jekyll 홈페이지: https://jekyllrb.com/docs/structure/
여기에서는 기본 폴더 구조와 우리가 사용하는 폴더 구조를 설명합니다.

기본 폴더 구조

|-- _config.yml
|-- _data
|   |-- members.yml
|-- _drafts
|   |-- begin-with-the-crazy-ideas.md
|   |-- on-simplicity-in-technology.md
|-- _includes
|   |-- footer.html
|   |-- header.html
|-- _layouts
|   |-- default.html
|   |-- post.html
|-- _posts
|   |-- 2007-10-29-why-every-programmer-should-play-nethack.md
|   |-- 2009-04-26-barcamp-boston-4-roundup.md
|-- _sass
|   |-- _base.scss
|   |-- _layout.scss
|-- _site
|-- .jekyll-metadata
|-- index.html

파일/폴더	설명
_config.yml	jekyll 블로그를 구성하기 위한 기본적인 설정이 저장되어있습니다. 자세한 내용은 jekyll 설정을 참고하세요.
_data	데이터 파일을 저장하는 곳입니다. `.yml`, `.yaml`, `.json`, `.csv` 또는 `.tsv` 파일을 저장하면 됩니다. 우리는 이 폴더를 사용하지 않습니다. 우리도 블로그 하단에 표시되는 블로그 리스트를 json 타입으로 저장하고 비동기로 로딩하지만, 관리상에 이유로 json을 이곳에 보관하지 않습니다.
_drafts	아직 공개하지 않은 블로그 포스트를 보관하는 폴더입니다. 우리는 사실 블로그 작성과 github에 공개하는 블로그를 따로 관리하기 때문에 이 폴더는 사용하지 않고 있습니다. 우리가 github을 어떻게 활용하고 있는지는 github 연동에서 소개하겠습니다.
_includes	jekyll도 pug처럼 공통된 컴포넌트를 만들고 삽입하는 기능이 있습니다.(`{% include 파일명 %}`) 이 기능을 사용할 때 포함될 파일을 저장하는 곳입니다.(ex> footer.html / header.html) 우리는 페이지 단위의 공통 요소를 `_includes`폴더에 저장하고 블로그 포스트 단위에 공통 요소는 `{% include_relative 폴더/파일명 %}`을 이용하여 블로그 폴더 하단에 폴더를 만들어서 관리하고 있습니다.(ex> code.md / link.md)
_layouts	템플릿을 저장하는 폴더입니다. (ex> default.html / folder.html)
_posts	블로그 포스트를 저장하는 곳입니다. 파일명을 `YEAR-MONTH-DAY-title.md`로 저장하여 관리합니다. 우리는 다국어 기능을 사용하기 때문에 하단에 폴더를 만들어 관리합니다. 다국어에 관해서는 다국어 플러그인를 참고하세요.
_sass	디자인을 위한 sass 파일을 저장하는 곳입니다.
_site	jekyll에 의해 빌드된 파일들이 저장되는 곳입니다. 우리는 이 폴더를 github에 업로드하여 블로그를 작성하고 있습니다.(참고: github 연동)
.jekyll-metadata	jekyll이 변경된 내용만을 빌드하기 위해 관리하는 파일입니다. `.gitignore`에 추가하는 것을 추천합니다.
index.html	Top 페이지로 변환될 파일입니다.
이외에 파일/폴더	위에서 언급하지 않은 파일, 폴더들은 빌드시 `_site`폴더 하단으로 복사됩니다. 빌드시 복사를 원치 않는 파일/폴더는 `_config.yml`파일에 `exclude:` 항목에 기록해야합니다.(참고: jekyll 설정)

위에서 언급한 .html/.md 파일은 서로 대체 가능합니다. 즉, index.html을 index.md로 YEAR-MONTH-DAY-title.md를 YEAR-MONTH-DAY-title.html로 작성해도 됩니다.

우리가 사용하는 폴더 구조

우리는 플러그인을 사용하여 다국어 지원, 페이지 구분 등을 사용하고 있습니다. 그로 인해 폴더 구조가 기본 폴더 구조와 조금 다릅니다. 다르다기보다는 관리를 위한 구조를 가지고 있습니다.

|-- _config.yml
|-- _includes
|   |-- footer.html
|   |-- header.html
|-- _layouts
|   |-- default.html
|   |-- post.html
|-- _posts
|   |-- jekyll
|   |   |-- 2018-09-10-directory-structure
|   |   |   |-- common
|   |   |   |-- 2018-09-10-index-en.md
|   |   |   |-- 2018-09-10-index-ja.md
|   |   |   |-- 2018-09-10-index-ko.md
|-- _sass
|   |-- _base.scss
|   |-- _layout.scss
|-- _site
|-- categories
|   |-- jekyll
|   |   |-- json
|   |   |   |-- index-en.md
|   |   |   |-- index-ja.md
|   |   |   |-- index-ko.md
|   |   |-- index-en.md
|   |   |-- index-ja.md
|   |   |-- index-ko.md
|-- contact
|   |-- index-en.md
|   |-- index-ja.md
|   |-- index-ko.md
|-- home
|   |-- index-en.md
|   |-- index-ja.md
|   |-- index-ko.md
|-- 404.md
|-- sitemap.xml

파일/폴더	설명
_config.yml	기본 폴더 구조와 동일
_includes	페이지 단위의 공통 요소를 `_includes`폴더에 저장한다. (ex> footer.html, head.html, navbar.html 등)
_layouts	우리가 사용하는 테마의 기본 템플릿이 저장되어 있다. 우리가 사용하는 테마가 궁금하다면 이전 블로그(테마 설정)를 확인하기 바란다.
_posts	포스트 폴더는 하위에 카테고리별 폴더를 가지고 있다. 카테고리별 폴더는 포스트별 폴더를 가지고 있다. 포스트별 폴더는 다국어를 지원하기 위한 파일과 다국어 파일안에서 공통으로 사용되는 부분을 보관하는 폴더로 구성되어 있다. 소스코드, 위에서 표시하고 있는 폴더 구조등 다국어와 상관없이 공통으로 활용되는 부분들이 `common` 폴더 안에 보관되어 있다.(참고: 다국어 플러그인)
_sass	기본 폴더 구조와 동일
_site	기본 폴더 구조와 동일
categories	블로그를 카테고리별로 관리하기 위해 별도의 페이지를 제작했다. 처음에는 `_posts`폴더에서 관리하였으나 카테고리로 제작한 페이지도 포스트로 인식하는 문제가 있어, 현재는 별도의 폴더로 관리하고 있다. 또한 카테고리 폴더 하위에 `json`폴더를 만들고 지금 보고 있는 페이지 하단에 있는 `posts`리스트를 표시하기 위한 json 데이터를 만드는 페이지를 저장하고 있다.
contact	문의하기페이지의 다국어 지원을 관리하기 위한 폴더이다.
home	Top페이지의 다국어 지원을 관리하기 위한 폴더이다.
404.md	`404 페이지`는 다국어 지원이 안되서 하나에 파일로 관리하고 있다. jekyll은 404 에러가 발생하면 404 페이지를 호출하는데 이 페이지는 하나만 지원이 가능다.(우리가 설정하는 방법을 모르는 것일 수도 있다.)
sitemap.xml	Search Engine을 위해 사이트 맵을 생성하는 파일이다. 자세한 내용은 SEO 지원에서 설명하도록 하겠다.