Jekyll을 사용해 Github Page 만들기 - (2) Jekyll project 구조

jekyll theme의 코드를 그대로 가져왔기 때문에, 내 마음대로 수정하기 위해서는 jekyll project가 어떤 구조로 되어있는지 알아야 했다.

 

https://suhwan.dev/2017/06/23/jekyll-project-structure/ 을 참고했는데, 전반적으로 비슷했지만 용어가 바뀌거나 한 부분이 있어 다시 정리한다.

 

.
├── _config.yml
├── _includes
├── _layouts
|   ├── home.html
|   ├── post.html
|   └── search-base.html
├── _pages
├── _posts
├── _site
├── 404.html
└── index.html

테마의 코드는 gemfile, lisence 파일을 제외하면 간략하게 위와 같은 구조를 가졌다.

 

 

1. _config.yml

여러 설정들이 들어있는 파일.

 

 

2. _posts

글을 작성하여 저장할 폴더.

글을 쓸 때 몇 가지 알아야할 규칙이 있다. 지킬 공식 문서 https://jekyllrb.com/docs/posts/ 참고.

 

간단하게 요약하자면

1. 먼저 마크업 언어로 글을 작성한 뒤 yyyy-mm-dd-title.md 형식의 제목으로 파일을 저장할 것

2. front matter를 포함할 것

---
layout: post
title:  "Welcome to Jekyll!"
---

  레이아웃과 해당 포스트의 데이터를 담은 부분을 front matter라고 한다.

  title 외에도 url을 지정하거나 카테고리 등을 지정할 수 있다.

 

 

3. _pages

페이지도 글을 작성해 저장하는 폴더이다.

 

페이지는 About, Contact 처럼 잘 바뀌지 않는 내용을 담고, 시간순으로(오래된 것부터) 보여진다.

포스트는 일반적인 블로그의 내용을 담고, 시간 역순으로(최근 것부터) 보여진다.

구글링으로 jekyll에서 page와 post의 차이점을 찾다가 못찾겠어서, chat gpt에게 물어봤다.

 

chat gpt의 대답에 따르면, page는 프로젝트 폴더에 저장된다고 했는데, 내가 사용한 theme은 page라는 폴더가 따로 존재했다.

 

 

4. _layouts

사용자가 마크업 언어로 작성한 포스트가 삽입되는, 블로그의 디자인인 레이아웃을 지정하는 파일이 저장된 폴더.

각 포스트의 front matter 부분에서 layout을 지정해준다.

커스텀 테마를 가지고 왔다면, 이 폴더에는 크게 손댈 일이 없는 것 같다.

 

 

5. _includes

반복되는 코드들이 들어가는 폴더이다.

자주 반복되는 코드가 있다면 이 폴더에 넣어두고, liquid의 문법을 사용해 다른 파일에서 사용할 수 있다.

liquid 문법은 jekyll 문서 참조 (https://jekyllrb.com/docs/liquid/)

 

 

6. _site

Jekyll이 _posts와 _pages 폴더의 마크업 파일들을 html 파일로 변환해 저장해두는 폴더.

이 폴더에도 역시 크게 손댈 부분이 없다.

 

 

7. index.html 과 404.html

jekyll은 프로젝트 폴더에서 자동으로 index.html이라는 파일을 찾아서 블로그의 첫 화면으로 렌더링해준다.

또한 url을 잘못 입력한 경우 보여줄 화면은 404.html 파일로 지정해줄 수 있다.

 

 

Jekyll 프로젝트의 구조와 각 폴더, 파일의 역할에 대해 이정도만 이해해도 사이트를 수정 및 새 글 작성 정도는 충분히 할 수 있다.