011. JeKyll 컨텐츠 - (4) 페이지 생성

컨텐츠 - (4) 페이지 생성

본 카테고리는 정적 블로그 생성도구인 Jekyll에 관하여 작성하는 곳이다.

공식 사이트의 내용을 좀 더 풀어쓰고 스크린샷을 첨부하여 좀 더 상세히 기록하고자 한다.

참고 Jekyll 공식 사이트

페이지 생성

Jekyll은 포스트를 작성하는 것 외에도 정적 페이지를 추가할 수 있다.

Jekyll 입장에서 포스팅이 날짜기반의 컨텐츠라면 페이지는 날짜 기반이 아닌 컨텐츠라고도 볼 수 있다.

Jekyll이 파일과 디렉토리를 복사하는 방식을 이용하면 쉽게 정적 페이지를 생성할 수 있다.

홈페이지

우리가 접할 수 있는 대부분의 웹 서버는 사이트의 루트 디렉토리에 있는 index.html를 찾아서 홈페이지로 렌더링한다.

웹 서버에서 index.html가 아닌 다른 파일을 찾도록 설정되어 있는 경우가 아닌 이상 index.html 파일이 Jekyll로 생성한 사이트의 홈페이지가 된다.

참고 홈페이지에서 레이아웃 사용
사이트의 모든 HTML 파일은 _includes 혹은 / 에 속한 모든 레이아웃을 사용할 수 있다. 홈페이지에도 마찬가지로 적용할 수 있으며 header나 footer 같은 일반적인 내용등이 따로 분리하기 좋은 예이다.

페이지가 추가되는 위치

페이지의 작동 방식에 따라 HTML 파일이나 Markdown 파일을 생성하는 위치가 달라진다.

페이지를 만드는 방법은 두 가지가 존재한다.

첫 번째 방법
사이트의 루트 디렉토리에 각 페이지별로 HTML 파일을 생성한다.

.
├── a_page.html
├── b_page.html
├── ...
└── index.html

두 번째 방법
사이트의 루트 디렉토리에 원하는 페이지 별 폴더를 만들고, 각 페이지별 폴더에 index.html파일을 생성한다.

.
├── a
|   └── index.html
├── b
|   └── index.html
├── ...
|   └── index.html
└── index.html

위의 두 가지 중 어떤 방법을 사용해도 정상 작동한다.

두 가지 방법을 동시에 사용해도 작동하며, 방법에 따라 최종 URL의 주소가 다르다.

사이트의 루트 디렉토리처럼 폴더별로 분리한 페이지는 폴더 내에 루트 디렉토리와 동일한 _site 구조를 유지한다.

HTML 파일명에 따른 URL

페이지를 추가하는 가장 간단한 방법은 만들려는 페이지의 이름을 가진 HTML 파일을 루트디렉토리에 추가하는 것이다.

예를 들어 Homepage, About, Contact 페이지를 추가한다면 아래와 같은 폴더 구조를 가지고 해당 URL은 주석에 달린 것과 같다.

.
|-- _config.yml
|-- _includes/
|-- _layouts/
|-- _posts/
|-- _site/
|-- about.html    # => http://example.com/about.html
|-- index.html    # => http://example.com/
|-- other.md      # => http://example.com/other.html
└── contact.html  # => http://example.com/contact.html

만약 많은 페이지를 가진 사이트의 경우엔 해당 페이지를 하위 폴더를 이용해서 구성할 수 있다.

사이트를 빌드할 경우 해당 페이지를 그룹화하는 하위 폴더가 _site 폴더에 생성된다.

하위 디렉토리로 분리된 페이지

프로젝트의 루트 디렉토리에 하위 폴더로 구성된 페이지가 있는 상태일 때 루트 디렉토리에서 페이지를 병합하려면 페이지의 머리말에 아래처럼 permalink 변수를 추가한다.

---
title: My page
permalink: mypageurl.html
---

하위 디렉토리명에 따른 HTML 파일 인덱싱

Jekyll에선 URL에 파일의 확장명을 노출하는 것이 기본값이다.

하지만 페이지를 접근하는 URL의 파일의 확장명(.html)을 노출하지 않는 방법도 있다.

파일의 확장자 대신 /가 붙는 permalink style을 이용하여 선택할 수 있다.

위에서 언급한 두 번째 방법을 예시로 들면

.
├── a
|   └── index.html
├── b
|   └── index.html
├── ...
|   └── index.html
└── index.html

위의 a, b, ..의 폴더들의 index.html파일에 permalink style을 설정하여

http://example.com/
http://example.com/a/index.html
http://example.com/b/index.html

위와 같이 추출되는 URL을

http://example.com/
http://example.com/a/
http://example.com/b/

위처럼 교체할 수 있다.