Github 블로그, Jekyll 파일 구조 파헤치기
Github Pages를 블로그를 이전하였다. 이전엔 Tistory, Velog 두 플랫폼을 이용하다가 이번에 도메인까지 구입하고 Github Pages로 넘어오게 되었다.
Github Pages를 이용한 블로그의 장점은 높은 자유도의 커스터마이징이다.
반면에 단점으로는 타 블로그 플랫폼과 비교해 떨어지는 SEO(검색 엔진 최적화)와 많은 설정들을 직접해야 한다는 것이다.(높은 자유도의 커스터마이징 단점은 그만큼 신경 쓸게 많다는 것)
다행히도 초기에 셋팅을 도와주는 수많은 레퍼런스와 템플릿이 존재한다.
필자는 그 중에서 Jekyll Themes에서 minimal-mistakes를 이용하여 블로그를 시작하였다.
잘 만들어진 템플릿을 이용하였지만 글꼴, 컨텐츠, UI 등을 입맛대로 커스터마이징 하기 위해선 구조를 파악하는 것이 도움이 된다. 구조를 잘 이해한다면 수월하게 커스터마이징을 할 수 있을 것이다. 이에 Jekyll에 디렉터리/파일들의 역할을 살펴봤다.
💡 Jekyll과 Jekyll Themes란?
Jekyll은 텍스트 변환 엔진으로 Markdown으로 글을 작성하면 정의된 규칙에 따라 정적인 웹사이트를 만들어주는 역할을 한다. 즉, 서버가 필요없는 정적 웹사이트 호스팅 엔진이다. Github Pages는 이러한 Jekyll 엔진을 지원하기 때문에 많은 개발자들이 이 엔진을 애용한다.
Jekyll Themes는 Jekyll 엔진을 이용하여 만든 블로그 템플릿들을 모아 놓은 사이트이다.
Jekyll의 디렉터리/파일구조
전체적으로 중요한 디렉터리/파일의 구조는 아래와 같다.
.
├── Gemfile
├── _config.yml
├── _data
│ ├── navigation.yml
│ └── ui-text.yml
├── _includes
├── _layouts
├── _sass
├── _site
├── assets
├── index.html
├── minimal-mistakes-jekyll.gemspec
├── staticman.yml
└── test
_config.yml
👉 Jekyll의 전역 설정파일(사이트의 테마, 플러그인, Author 설정 등)
👉 각 페이지/포스트 마다 공통적으로 적용할 설정 또한 이 파일에 작성
💡 Front Matter란?
YFM(YAML Front Matter)라고도 부른다.
번역하자면 머리말, 마크다운 문서에서 메타데이터 역할을 한다.
_includes/
👉 재사용하기 위한 파일들을 담는 디렉터리
👉 필요에 따라 _post나 _layout에 존재하는 파일들에서 이곳에 정의된 파일들을 끌어와 사용
(실제로 _layouts 아래 존재하는 파일들을 보면 includes에서 끌어와 사용하는 코드들이 보인다.)
_layouts/
👉 post나 page들의 포장지 역할을 하는 파일들이 존재하는 디렉터리
👉 home, category, tag등의 컴포넌트들이 존재한다.
_data/
👉 사이트에서 사용할 데이터를 포맷으로 정리하여 보관하는 디렉터리
👉 Jekyll 엔진은 이 디렉터리에 있는 모든 데이터 파일을 자동으로 읽어들일 수 있다.
👉 minimal-mistakes 테마에서는 navigation과 관련된 설정, ui에 사용되는 기본 텍스트들을 설정할 수 있다.
👉 site.data.변수명으로 해당 데이터를 사용할 수 있다.
_posts/
👉 위 구조에는 나와있지 않지만 직접 디렉터리를 만들자
👉 블로그의 컨텐츠(포스트)들이 들어가는 디렉터리
👉 포스트 파일의 형식은 반드시 YEAR-MONTH-DAY-title.MARKUP 여야함
👉 파일명에 적힌 날짜와 사용하는 마크업 언어 종류는 오로지 파일명에 의해 결정이 된다.
_site/
👉 Jekyll이 변환 작업을 마친 뒤 생성된 사이트가 저장되는 디폴트 경로
👉 Jekyll은 빌드 시 작성된 게시글마다 html 파일을 미리 생성한다. 생성된 파일들은 이 디렉터리 밑으로 들어간다.
👉 변환시 자동생성되므로 .gitignore에 추가해 push는 따로 하지않는 것이 좋다.
_sass/
👉 include, layout에 작성된 html파일을 꾸며주는 css 파일들이 저장되어 있다.
👉 ui, 디자인 수정시 이 디렉터리에 있는 파일들을 건드리면 된다.
댓글남기기