[Jekyll X BLOG] 원하는 Jekyll 테마 찾아보기

7 분 소요

<h2 id="목차">목차</h2>
<ul class="task-list">
 <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" /><a href="https://many258.github.io/blog/start-wtih-jekyll/">Jekyll로 블로그 설정 준비하기</a></li>
 <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />원하는 Jekyll 테마 찾아보기</li>
 <li class="task-list-item">(3) Markdown 기본 문법</li>
 <li class="task-list-item">(4) Git을 이용해서 실제 배포해보기</li>
 <li class="task-list-item">(5) 내 블로그 검색되게 해주세요(Google-Search/Naver-Advisor)</li>
</ul>

저번 문서에서는 기본적으로 환경을 어떻게 설정하는가 기본 작업을 살펴보았습니다 
하지만, 빈 화면에 덩그러니 Hello World만 있으니 뭔가 휑하게 느껴집니다. 
세련되고 멋지게 해보고 싶은데 방법이 없을까…? 
생각을 해보셨다면 이 문서를 천천히 읽어주시길 바라겠습니다.

사실 이번에 할 일은 
위대한 선조님들이 이 고민을 할 우리들을 위해 틀을 <code class="language-plaintext highlighter-rouge">이미</code> 만들어 놓았기 때문에 이번에 해야할 일은 많지 않습니다.

그럼 시작해도록 하겠습니다.

다음 웹사이트에서 원하는 테마를 미리 데모로 실행해보고 다운받을 수 있습니다.

여기서 각자 선호하는 테마를 선택하여 블로그에 적용시킬 수 있습니다. 
저의 경우는 <code class="language-plaintext highlighter-rouge">minimal-mistakes</code> 라는 보통 많이 사용하는 테마를 사용하였습니다.

<h3 id="1-github-계정이-있다면">1. GitHub 계정이 있다면?</h3>

해당 홈페이지에서 Fork를 해서 내려받고 
리포지토리의 이름을 username.github.io 변경하거나

<h3 id="2-github-계정이-없다면">2. GitHub 계정이 없다면?</h3>

minimal-mistakes 홈페이지에 접속하여 압축파일을 설치할 수 있습니다.

차후 <code class="language-plaintext highlighter-rouge">배포</code>할 때 계정이 필요하니 지금 이순간에 회원가입을 하시길 권유드립니다.

그럼 이 블로그에 현재 적용된 테마에 대해 조금 더 면밀히 알아보도록 하겠습니다.

현재 버전에서 최초 파일 구조는 다음과 같습니다.

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>.editorconfig
.gitattributes
.github
/docs
/test
CHANGELOG.md
README.md
screenshot-layouts.png
screenshot.png
</code></pre></div></div>
여기서 위 파일은 불필요한 파일이기에 삭제를 진행합니다.

이어서 _posts, _draft(선택) 폴더가 없다면 새로 추가해줍니다.

이제 하나씩 구성요소를 분석해보겠습니다.

<h3 id="_data">_data</h3>
<blockquote>
 사이트에 사용할 데이터를 적절한 포맷으로 정리하여 보관하는 디렉토리. 
Jekyll 엔진은 이 디렉토리에 있는 (확장자와 포맷이 .yml 또는 .yaml, .json, .csv, .tsv 인) 모든 데이터 파일을 자동으로 읽어들여 <code class="language-plaintext highlighter-rouge">site.data</code> 로 사용할 수 있도록 만든다. 
만약 이 디렉토리에 members.yml 라는 파일이 있다면, site.data.members 라고 입력하여 그 컨텐츠를 사용할 수 있다.
</blockquote>

문장이 어려울 수 있으나, 단순히 말하자면 <code class="language-plaintext highlighter-rouge">데이터 파일</code>들이 모여있는 폴더라는 의미입니다.
여기서 데이터 파일은 테마를 커스텀하기 위해 사용됩니다.

<a href="https://jekyllrb-ko.github.io/docs/datafiles/#%EC%98%88%EC%A0%9C-%EA%B5%AC%EC%84%B1%EC%9B%90-%EB%AA%A9%EB%A1%9D">예제: 구성원 목록</a>
이 링크에서 예제를 확인할 수 있습니다

이 테마에서는 기본적으로 다음과 같은 데이터파일 2개가 존재합니다

<ul>
 <li>
 navigation.yml 
상단에 표시되는 메뉴들, 
메뉴클릭시 지정된 URL페이지로 이동하여 문서를 보여줍니다
 </li>
 <li>
 ui-text.yml 
일종의 언어팩. 기본은 영어로 되어있으나 config 설정을 통해 한국어로 변경할 수 있으며, 해당 옵션을 다른 글로 변경하여 내 설정에 맞게 블로그에 반영할 수 있습니다
 </li>
</ul>

<h3 id="_includes">_includes</h3>
<blockquote>
 재사용하기 위한 파일을 담는 디렉토리로서, 필요에 따라 포스트나 레이아웃에 쉽게 삽입할 수 있다. 
{% include file.ext %} 와 같이 Liquid 태그를 사용하면 _includes/file.ext 파일에 담긴 코드가 삽입된다.
</blockquote>

재사용이 가능한 자잘자잘한 구성 요소들. 이 구성요소들로 커다란 틀(레이아웃)을 꾸미거나 기능을 추가할 때 이용합니다.

<ul>
 <li>Analytics-provides 
어떤 애널리틱스를 사용하는지에 따라 설정이 가능하며 config.yml analytics 부분에 정보를 입력해주면 됩니다
<img src="/assets/images/jekyll-theme/analytics-provider.png" alt="" /></li>
</ul>

<ul>
 <li>
 comments-providers 
내 글에 댓글기능을 삽입할 수 있는데 여러 플랫폼이 있어 사용자가 원하는 플랫폼을 선택하여 추가할 수 있게끔 해준다(필자는 disqus로 설정!)
 </li>
 <li>
 footer/head 
각 폴더 내 커스텀 html 파일에서 사용자 취향에 맞게 설정할 수 있다
 </li>
 <li>
 search 
검색 엔진을 어떤 것으로 설정할 지 선택할 수 있는 폴더 
comment-provider, analytics-provides와 마찬가지로
config.yml파일에서 해당 항목을 설정하여 적용시킬 수 잇다 
<img src="/assets/images/jekyll-theme/search_provider.png" alt="" />
 </li>
 <li>
 Feature_row 
여러 이미지를 한 줄로 나타낼 때 사용합니다. 
갤러리와 유사하나 사진마다 제목과 부가설명이 있다는 차이점을 가지고 있습니다
 </li>
</ul>

<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code>feature_row:
 - image_path: /assets/images/unsplash-gallery-image-1-th.jpg
 alt: "placeholder image 1"
 title: "Placeholder 1"
 excerpt: "This is some sample content that goes here with **Markdown** formatting."
 - image_path: /assets/images/unsplash-gallery-image-2-th.jpg
 alt: "placeholder image 2"
 title: "Placeholder 2"
 excerpt: "This is some sample content that goes here with **Markdown** formatting."
 url: "#test-link"
 btn_label: "Read More"
 btn_class: "btn--inverse"
 - image_path: /assets/images/unsplash-gallery-image-3-th.jpg
 title: "Placeholder 3"
 excerpt: "This is some sample content that goes here with **Markdown** formatting."
</code></pre></div></div>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code>{% include feature_row %}
</code></pre></div></div>

<ul>
 <li>Figure 
캡션을 가진 하나의 이미지를 생성할 때 사용한다</li>
</ul>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>{% include figure image_path="/assets/images/unsplash-image-10.jpg" alt="this is a placeholder image" caption="This is a figure caption." %}
</code></pre></div></div>

<ul>
 <li>Gallery 
캡션을 가질 수 있는 2개 이상의 이미지를 생성할 때 사용하며 갤러리를 배치하려면 추가적으로 yaml 파일 생성이 필요하다</li>
</ul>

<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code>gallery:
 - url: /assets/images/unsplash-gallery-image-1.jpg
 image_path: /assets/images/unsplash-gallery-image-1-th.jpg
 alt: "placeholder image 1"
 title: "Image 1 title caption"
 - url: /assets/images/unsplash-gallery-image-2.jpg
 image_path: /assets/images/unsplash-gallery-image-2-th.jpg
 alt: "placeholder image 2"
 title: "Image 2 title caption"
 - url: /assets/images/unsplash-gallery-image-3.jpg
 image_path: /assets/images/unsplash-gallery-image-3-th.jpg
 alt: "placeholder image 3"
 title: "Image 3 title caption"
</code></pre></div></div>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code>{% include gallery caption="This is a sample gallery with **Markdown support**." %}
</code></pre></div></div>

<ul>
 <li>Video 
유튜브, 비메오, 구글드라이브 영상을 내용 안에 담을 수 있습니다. 
특정시점으로 부터 영상 재생도 가능한데 
ex) https://www.youtube.com/watch?v=[id] 1:50초부터 영상을 시작하고 싶다면 ?start=110 를 추가하면 된다.</li>
</ul>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code># 유튜브
{% include video id="id" start=110 provider="youtube" %}

# 비메오
{% include video id="id" provider="vimeo" %}

# 구글드라이브 예) https://drive.google.com/file/d/[id]/preview
{% include video id="id" provider="google-drive" %}
</code></pre></div></div>

<ul>
 <li>TOC(Table of contents) 
글 옆에 보이는 목차를 나타내주는 역할을 합니다.
Toc : true를 통해 표시할 수 있습니다
다음과 같은 선택으로 커스터마이징이 가능합니다
 <ul>
 <li>Toc_label : TOC의 이름</li>
 <li>Toc_icon : TOC 아이콘</li>
 <li>Toc_sticky : TOC
Liquid 문법으로 다음과 같이도 사용가능합니다.</li>
 </ul>
 </li>
</ul>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>{% include toc %}
</code></pre></div></div>

<ul>
 <li>
 nav-list 
메뉴 상단 리스트 
_data/navigation.yml에서 설정할 수 있으며 children : 태그를 통해 하위 메뉴를 생성하는 것도 가능하다
 </li>
 <li>
 analytics 
_config.yml에서 작성한 애널리틱스를 바탕으로 analytics-provides와 이어주는 역할을 한다
 </li>
 <li>
 archieve-single 
포스트 페이지들 링크를 모아둔 아카이브 페이지에서 각 포스트 링크가 어떻게 보여질지에 대한 문서
 </li>
 <li>
 author-profile / author-profile-custom-links 
_config.yml 사이트 저자에 대한 설명을 나타낼 때 사용하는 문서
 </li>
 <li>
 breadcrumbs 
페이지의 상대경로를 계층식 구조로 표시하는 역할을 해주는 문서 
config.yml에서 설정이 가능하며 기본값으로 <code class="language-plaintext highlighter-rouge">false</code>이다
 </li>
</ul>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code># breadcrumbs : false # true, false (default)
</code></pre></div></div>
<ul>
 <li>
 browser-upgrade 
IE9 브라우저로 접속할 경우 업그레이드를 요청한다
 </li>
 <li>
 category-list / tag-list 
각 카테고리/태그와 관련된 리스트를 만드는 문서 
이 글의 하단에서 카테고리는 <code class="language-plaintext highlighter-rouge">Blog</code>, 태그 <code class="language-plaintext highlighter-rouge">Jekyll</code>을 확인할 수 있다
 </li>
 <li>
 comment / comments 
댓글에 관련된 정보를 다루는 문서
 </li>
 <li>
 document-collection 
collection은 아카이브페이지와 유사하지만, 태그/카테고리 별로 자동으로 분류되는 아카이브페이지와는 달리 
서로 관련성이 있는 포스트를 사용자 정의로 그룹화한 페이지를 말한다
 </li>
 <li>
 footer / head 
페이지 하단/상단의 내용을 가지고 있는 문서
 </li>
 <li>
 masthead 
홈페이지 전체의 구조 중 네비게이션과 검색부분이 있는 상단 바로 아래 지평선
 </li>
 <li>
 page_date / page_hero / page_hero_video / page_meta 
페이지의 상단의 역할을 맡고있다 
날짜, 상단의 이미지 또는 비디오, 상단의 보이는 <code class="language-plaintext highlighter-rouge">~분 소요</code>시간을 나타낸다
 </li>
 <li>
 page__taxonomy 
페이지의 태그와 카테고리를 나타내는 역할을 한다
 </li>
 <li>
 paginator / post_pagination 
페이지 하단에 보면 <code class="language-plaintext highlighter-rouge">이전글</code>, <code class="language-plaintext highlighter-rouge">다음글</code>에 관련된 문서
 </li>
 <li>
 posts-category / posts-tag 
각 카테고리, 태그를 모아놓은 아카이브 페이지
 </li>
 <li>
 scripts 
JavaScript, 검색 엔진, 댓글 플랫폼 관련 등 소스를 불러오는 곳
 </li>
 <li>
 seo 
검색 엔진 최적화(Search Engine Optimization : 내 웹사이트를 구글이나 네이버와 같은 검색엔진의 검색결과 상단에 노출시킬 수 있도록 최적화하는 방법)를 다루는 문서
 </li>
 <li>
 sidebar 
이 홈페이지 왼쪽 부분에 표시되는 사이드바 관련 문서
 </li>
 <li>
 skip-links 
홈페이지 내 간단하게 구현된 바로가기(숏컷)에 대한 문서
 </li>
 <li>
 social-share 
소셜서비스와 연관된 문서, 트위터/페이스북/링크드인 하이퍼링크로 구성되어 있다
 </li>
 <li>
 toc 
TOC의 기능을 모아놓은 문서
 </li>
</ul>

<h3 id="_layouts">_layouts</h3>
<blockquote>
 포스트를 포장할 때 사용하는 템플릿이다. 
각 포스트 별로 레이아웃을 선택하는 기준은 머리말이며, <code class="language-plaintext highlighter-rouge">{{ content }}</code>와 같이 Liquid 태그를 사용하면 페이지에 컨텐츠가 주입된다.
</blockquote>

문서를 포스팅할 때 가장 큰 틀이며 기본적으로 default를 사용합니다. 
만약 매 문서마다 같은 양식을 사용하고 싶다면 이 부분에서 수정하므로서 가능해집니다.
파일 내 코드를 살펴보면 <code class="language-plaintext highlighter-rouge">{{ content }}</code> 이 부분에 작성한 글의 내용이 삽입이 되는 구조입니다.

예시로 <a href="https://many258.github.io/blog/start-wtih-jekyll/">나만의 블로그 설정 준비하기</a>문서는 single이라는 레이아웃으로 설정하였습니다.

<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code>---
layout: single
title: "[Jekyll X BLOG] 나만의 블로그 설정 준비하기(feat. Jekyll)"
categories:
 - blog
tags:
 - Jekyll
sidebar:
 nav: "docs"
...
---
</code></pre></div></div>

<h3 id="_posts">_posts</h3>
<blockquote>
 한마디로 말하면, 당신의 컨텐츠다. 
중요한 것은 파일들의 명명규칙인데, 반드시 이 형식을 따라야 한다: YEAR-MONTH-DAY-title.MARKUP. 
고유주소는 포스트 별로 각각 정의할 수 있지만, 날짜와 마크업 언어 종류는 오로지 파일명에 의해 결정된다.
</blockquote>

실질적으로 우리가 앞으로 작성할 글(포스팅한 문서)들이 모여있는 폴더입니다.

<h3 id="_sass">_sass</h3>
<blockquote>
 이것은 당신의 main.scss 에 임포트할 수 있는 Sass 조각들로서, 
하나의 스타일시트 파일 main.css 로 가공되어 당신의 사이트에서 사용하는 스타일들을 정의한다. 
Jekyll 은 Sass 를 기본적으로 지원하고 루비 젬을 통해 CoffeeScript 와 연동할 수 있습니다. 사용 방법은, 일단 적절한 확장자 (.sass 나 .scss, .coffee 중 하나) 로 파일을 생성하고 파일의 시작부분에 3 개의 대시문자 두 줄을 입력해야 합니다(YAML 헤더)
</blockquote>

혹시나 css에 대해 들어본 적 있으신가요? 
덕분에 이쁘고 스타일리쉬하게 웹페이지를 만들 수 있었지만, 점점 늘어날수록 코드가 복잡해진다는 단점을 가지고 있었습니다.

이 단점을 보완하기 위해 탄생한 아이가 Sass입니다. 
sass는 css 전처리(Preprocessor)이며 Css가 동작하기 전에 작동하는 방식으로 기존 css의 확장의 개념이다라고 생각하시면 편할 것 같습니다. 
scss 파일을 모아놓은 폴더 위 설명과 같이 모든 scss 파일이 뭉쳐 main.css로 가공됩니다.

<h3 id="_site">_site</h3>
<blockquote>
 Jekyll 이 변환 작업을 마친 뒤 생성된 사이트가 저장되는 (디폴트) 경로이다. 
대부분의 경우, 이 경로를 .gitignore 에 추가하는 것은 괜찮은 생각이다.
</blockquote>

Jekyll로 사이트를 빌드하면 해당 최종 결과물이 디렉토리에 생성됩니다. 차후 이 폴더에 있는 내용들로 배포를 할 예정입니다.

<h3 id="assets">Assets</h3>
main.scss, images(없으면 새 폴더 추가해줍니다.) , javascript로 구성된 폴더
특히, 사진이나 이미지들은 images에서 주로 관리하게됩니다.

<h3 id="_configyml-설정하기">_config.yml 설정하기</h3>
이번 문서에서 가장 중요한 작업입니다 
기존값 또는 기본값을 자신의 설정대로 변경하는 작업을 주로 다루겠습니다.

기본 사이트 설정

<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code>locale : "ko" # 한국어로 설정
title : "" # 사이트 제목
name : "" # 이름
description : "" # 사이트 설명
url : "" # "https://[github ID].github.io" 결과적으로 github 리포지토리의 이름과 동일해야합니다.
</code></pre></div></div>

사용하는 답글 플랫폼이 있다면 해당 플랫폼 설정

<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code>comments:
 provider : # false (default), "disqus", "discourse", "facebook", "staticman", "staticman_v2", "utterances", "custom"
 disqus:
 shortname : # https://help.disqus.com/customer/portal/articles/466208-what-s-a-shortname-
 discourse:
 server : # https://meta.discourse.org/t/embedding-discourse-comments-via-javascript/31963 , e.g.: meta.discourse.org
 facebook:
 # https://developers.facebook.com/docs/plugins/comments
 appid :
 num_posts : # 5 (default)
 colorscheme : # "light" (default), "dark"
 utterances:
 theme : # "github-light" (default), "github-dark"
 issue_term : # "pathname" (default)
 staticman:
 branch : # "master"
 endpoint : # "https://{your Staticman v3 API}/v3/entry/github/"
</code></pre></div></div>

사이트 저자 관련 정보

<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code>author:
 name : "" 
 avatar : # 보여질 이미지 경로 ex) "/assets/images/bio-photo.jpg" 
 bio : "" # 부가 텍스트
 location : "" # 주소
 email :
 links:
 - label: "Email"
 icon: "fas fa-fw fa-envelope-square"
</code></pre></div></div>

블로그 하단에 표시할 사이트 저자 정보

<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code>footer:
 links:
 - label: "Twitter"
 icon: "fab fa-fw fa-twitter-square"
 # url:
 - label: "Facebook"
 icon: "fab fa-fw fa-facebook-square"
 # url:
 - label: "GitHub"
 icon: "fab fa-fw fa-github"
 # url:
 - label: "GitLab"
 icon: "fab fa-fw fa-gitlab"
 # url:
 - label: "Bitbucket"
 icon: "fab fa-fw fa-bitbucket"
 # url:
 - label: "Instagram"
 icon: "fab fa-fw fa-instagram"
 # url:
</code></pre></div></div>

가장 기초적인 설정은 위 내용만 수정해도 충분할 것이라 생각됩니다.

<h2 id="최종테스트">최종테스트</h2>
<a href="https://many258.github.io/blog/start-wtih-jekyll/#%EB%A1%9C%EC%BB%AC%EC%84%9C%EB%B2%84%EC%97%90-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0">이전 문서</a>에서 사용했던 것처럼 사이트를 빌드하고 로컬 서버에 적용해 접속하였을 때 정상적으로 블로그가 나타난다면 성공!

<h2 id="마무리">마무리</h2>
초라했던 블로그가 이제 제법 세련되어졌습니다.

이제 본격적으로 글을 작성해볼텐데 주로 Markdown(.md)을 사용합니다.

다음엔 이 마크다운 문법에 대해서 알아보도록 하겠습니다.

이상입니다. 고생많으셨습니다.

감사합니다 :)

<h2 id="참고사이트">참고사이트</h2>
<a href="https://ansohxxn.github.io/blog/jekyll-directory-structure/">https://ansohxxn.github.io/blog/jekyll-directory-structure/</a>

수정이 필요하거나, 개선사항이 있을시 답글을 남겨주시면 빠른 시일안에 해당 항목을 수정하겠습니다.

개요

저번 문서에서는 기본적으로 환경을 어떻게 설정하는가 기본 작업을 살펴보았습니다
하지만, 빈 화면에 덩그러니 Hello World만 있으니 뭔가 휑하게 느껴집니다.
세련되고 멋지게 해보고 싶은데 방법이 없을까…?
생각을 해보셨다면 이 문서를 천천히 읽어주시길 바라겠습니다.

사실 이번에 할 일은
위대한 선조님들이 이 고민을 할 우리들을 위해 틀을 이미 만들어 놓았기 때문에 이번에 해야할 일은 많지 않습니다.

그럼 시작해도록 하겠습니다.

테마 선택하기

다음 웹사이트에서 원하는 테마를 미리 데모로 실행해보고 다운받을 수 있습니다.

지킬 테마 홈페이지

여기서 각자 선호하는 테마를 선택하여 블로그에 적용시킬 수 있습니다.
저의 경우는 minimal-mistakes 라는 보통 많이 사용하는 테마를 사용하였습니다.

1. GitHub 계정이 있다면?

해당 홈페이지에서 Fork를 해서 내려받고
리포지토리의 이름을 username.github.io 변경하거나

2. GitHub 계정이 없다면?

minimal-mistakes 홈페이지에 접속하여 압축파일을 설치할 수 있습니다.

또는

차후 배포할 때 계정이 필요하니 지금 이순간에 회원가입을 하시길 권유드립니다.

그럼 이 블로그에 현재 적용된 테마에 대해 조금 더 면밀히 알아보도록 하겠습니다.

디렉토리 기본 설정하기

현재 버전에서 최초 파일 구조는 다음과 같습니다.

.editorconfig
.gitattributes
.github
/docs
/test
CHANGELOG.md
README.md
screenshot-layouts.png
screenshot.png

여기서 위 파일은 불필요한 파일이기에 삭제를 진행합니다.

이어서 _posts, _draft(선택) 폴더가 없다면 새로 추가해줍니다.

디렉터리 구조

이제 하나씩 구성요소를 분석해보겠습니다.

_data

사이트에 사용할 데이터를 적절한 포맷으로 정리하여 보관하는 디렉토리.
Jekyll 엔진은 이 디렉토리에 있는 (확장자와 포맷이 .yml 또는 .yaml, .json, .csv, .tsv 인) 모든 데이터 파일을 자동으로 읽어들여 site.data 로 사용할 수 있도록 만든다.
만약 이 디렉토리에 members.yml 라는 파일이 있다면, site.data.members 라고 입력하여 그 컨텐츠를 사용할 수 있다.

문장이 어려울 수 있으나, 단순히 말하자면 데이터 파일들이 모여있는 폴더라는 의미입니다. 여기서 데이터 파일은 테마를 커스텀하기 위해 사용됩니다.

예제: 구성원 목록 이 링크에서 예제를 확인할 수 있습니다

이 테마에서는 기본적으로 다음과 같은 데이터파일 2개가 존재합니다

navigation.yml
상단에 표시되는 메뉴들,
메뉴클릭시 지정된 URL페이지로 이동하여 문서를 보여줍니다
ui-text.yml
일종의 언어팩. 기본은 영어로 되어있으나 config 설정을 통해 한국어로 변경할 수 있으며, 해당 옵션을 다른 글로 변경하여 내 설정에 맞게 블로그에 반영할 수 있습니다

_includes

재사용하기 위한 파일을 담는 디렉토리로서, 필요에 따라 포스트나 레이아웃에 쉽게 삽입할 수 있다.
{% include file.ext %} 와 같이 Liquid 태그를 사용하면 _includes/file.ext 파일에 담긴 코드가 삽입된다.

재사용이 가능한 자잘자잘한 구성 요소들. 이 구성요소들로 커다란 틀(레이아웃)을 꾸미거나 기능을 추가할 때 이용합니다.

Analytics-provides
어떤 애널리틱스를 사용하는지에 따라 설정이 가능하며 config.yml analytics 부분에 정보를 입력해주면 됩니다

comments-providers
내 글에 댓글기능을 삽입할 수 있는데 여러 플랫폼이 있어 사용자가 원하는 플랫폼을 선택하여 추가할 수 있게끔 해준다(필자는 disqus로 설정!)
footer/head
각 폴더 내 커스텀 html 파일에서 사용자 취향에 맞게 설정할 수 있다
search
검색 엔진을 어떤 것으로 설정할 지 선택할 수 있는 폴더
comment-provider, analytics-provides와 마찬가지로 config.yml파일에서 해당 항목을 설정하여 적용시킬 수 잇다
Feature_row
여러 이미지를 한 줄로 나타낼 때 사용합니다.
갤러리와 유사하나 사진마다 제목과 부가설명이 있다는 차이점을 가지고 있습니다

feature_row:
  - image_path: /assets/images/unsplash-gallery-image-1-th.jpg
    alt: "placeholder image 1"
    title: "Placeholder 1"
    excerpt: "This is some sample content that goes here with **Markdown** formatting."
  - image_path: /assets/images/unsplash-gallery-image-2-th.jpg
    alt: "placeholder image 2"
    title: "Placeholder 2"
    excerpt: "This is some sample content that goes here with **Markdown** formatting."
    url: "#test-link"
    btn_label: "Read More"
    btn_class: "btn--inverse"
  - image_path: /assets/images/unsplash-gallery-image-3-th.jpg
    title: "Placeholder 3"
    excerpt: "This is some sample content that goes here with **Markdown** formatting."

{% include feature_row %}

Figure
캡션을 가진 하나의 이미지를 생성할 때 사용한다

{% include figure image_path="/assets/images/unsplash-image-10.jpg" alt="this is a placeholder image" caption="This is a figure caption." %}

Gallery
캡션을 가질 수 있는 2개 이상의 이미지를 생성할 때 사용하며 갤러리를 배치하려면 추가적으로 yaml 파일 생성이 필요하다

gallery:
  - url: /assets/images/unsplash-gallery-image-1.jpg
    image_path: /assets/images/unsplash-gallery-image-1-th.jpg
    alt: "placeholder image 1"
    title: "Image 1 title caption"
  - url: /assets/images/unsplash-gallery-image-2.jpg
    image_path: /assets/images/unsplash-gallery-image-2-th.jpg
    alt: "placeholder image 2"
    title: "Image 2 title caption"
  - url: /assets/images/unsplash-gallery-image-3.jpg
    image_path: /assets/images/unsplash-gallery-image-3-th.jpg
    alt: "placeholder image 3"
    title: "Image 3 title caption"

{% include gallery caption="This is a sample gallery with **Markdown support**." %}

Video
유튜브, 비메오, 구글드라이브 영상을 내용 안에 담을 수 있습니다.
특정시점으로 부터 영상 재생도 가능한데
ex) https://www.youtube.com/watch?v=[id] 1:50초부터 영상을 시작하고 싶다면 ?start=110 를 추가하면 된다.

# 유튜브
{% include video id="id" start=110 provider="youtube" %}

# 비메오
{% include video id="id" provider="vimeo" %}

# 구글드라이브 예) https://drive.google.com/file/d/[id]/preview
{% include video id="id" provider="google-drive" %}

TOC(Table of contents)
글 옆에 보이는 목차를 나타내주는 역할을 합니다. Toc : true를 통해 표시할 수 있습니다 다음과 같은 선택으로 커스터마이징이 가능합니다
- Toc_label : TOC의 이름
- Toc_icon : TOC 아이콘
- Toc_sticky : TOC Liquid 문법으로 다음과 같이도 사용가능합니다.

{% include toc %}

nav-list
메뉴 상단 리스트
_data/navigation.yml에서 설정할 수 있으며 children : 태그를 통해 하위 메뉴를 생성하는 것도 가능하다
analytics
_config.yml에서 작성한 애널리틱스를 바탕으로 analytics-provides와 이어주는 역할을 한다
archieve-single
포스트 페이지들 링크를 모아둔 아카이브 페이지에서 각 포스트 링크가 어떻게 보여질지에 대한 문서
author-profile / author-profile-custom-links
_config.yml 사이트 저자에 대한 설명을 나타낼 때 사용하는 문서
breadcrumbs
페이지의 상대경로를 계층식 구조로 표시하는 역할을 해주는 문서
config.yml에서 설정이 가능하며 기본값으로 false이다

# breadcrumbs            : false # true, false (default)

browser-upgrade
IE9 브라우저로 접속할 경우 업그레이드를 요청한다
category-list / tag-list
각 카테고리/태그와 관련된 리스트를 만드는 문서
이 글의 하단에서 카테고리는 Blog, 태그 Jekyll을 확인할 수 있다
comment / comments
댓글에 관련된 정보를 다루는 문서
document-collection
collection은 아카이브페이지와 유사하지만, 태그/카테고리 별로 자동으로 분류되는 아카이브페이지와는 달리
서로 관련성이 있는 포스트를 사용자 정의로 그룹화한 페이지를 말한다
footer / head
페이지 하단/상단의 내용을 가지고 있는 문서
masthead
홈페이지 전체의 구조 중 네비게이션과 검색부분이 있는 상단 바로 아래 지평선
page_date / page_hero / page_hero_video / page_meta
페이지의 상단의 역할을 맡고있다
날짜, 상단의 이미지 또는 비디오, 상단의 보이는 ~분 소요시간을 나타낸다
page__taxonomy
페이지의 태그와 카테고리를 나타내는 역할을 한다
paginator / post_pagination
페이지 하단에 보면 이전글, 다음글에 관련된 문서
posts-category / posts-tag
각 카테고리, 태그를 모아놓은 아카이브 페이지
scripts
JavaScript, 검색 엔진, 댓글 플랫폼 관련 등 소스를 불러오는 곳
seo
검색 엔진 최적화(Search Engine Optimization : 내 웹사이트를 구글이나 네이버와 같은 검색엔진의 검색결과 상단에 노출시킬 수 있도록 최적화하는 방법)를 다루는 문서
sidebar
이 홈페이지 왼쪽 부분에 표시되는 사이드바 관련 문서
skip-links
홈페이지 내 간단하게 구현된 바로가기(숏컷)에 대한 문서
social-share
소셜서비스와 연관된 문서, 트위터/페이스북/링크드인 하이퍼링크로 구성되어 있다
toc
TOC의 기능을 모아놓은 문서

_layouts

포스트를 포장할 때 사용하는 템플릿이다.
각 포스트 별로 레이아웃을 선택하는 기준은 머리말이며, {{ content }}와 같이 Liquid 태그를 사용하면 페이지에 컨텐츠가 주입된다.

문서를 포스팅할 때 가장 큰 틀이며 기본적으로 default를 사용합니다.
만약 매 문서마다 같은 양식을 사용하고 싶다면 이 부분에서 수정하므로서 가능해집니다. 파일 내 코드를 살펴보면 {{ content }} 이 부분에 작성한 글의 내용이 삽입이 되는 구조입니다.

예시로 나만의 블로그 설정 준비하기문서는 single이라는 레이아웃으로 설정하였습니다.

---
layout: single
title: "[Jekyll X BLOG] 나만의 블로그 설정 준비하기(feat. Jekyll)"
categories:
  - blog
tags:
  - Jekyll
sidebar:
  nav: "docs"
...
---

_posts

한마디로 말하면, 당신의 컨텐츠다.
중요한 것은 파일들의 명명규칙인데, 반드시 이 형식을 따라야 한다: YEAR-MONTH-DAY-title.MARKUP.
고유주소는 포스트 별로 각각 정의할 수 있지만, 날짜와 마크업 언어 종류는 오로지 파일명에 의해 결정된다.

실질적으로 우리가 앞으로 작성할 글(포스팅한 문서)들이 모여있는 폴더입니다.

_sass

이것은 당신의 main.scss 에 임포트할 수 있는 Sass 조각들로서,
하나의 스타일시트 파일 main.css 로 가공되어 당신의 사이트에서 사용하는 스타일들을 정의한다.
Jekyll 은 Sass 를 기본적으로 지원하고 루비 젬을 통해 CoffeeScript 와 연동할 수 있습니다. 사용 방법은, 일단 적절한 확장자 (.sass 나 .scss, .coffee 중 하나) 로 파일을 생성하고 파일의 시작부분에 3 개의 대시문자 두 줄을 입력해야 합니다(YAML 헤더)

혹시나 css에 대해 들어본 적 있으신가요?
덕분에 이쁘고 스타일리쉬하게 웹페이지를 만들 수 있었지만, 점점 늘어날수록 코드가 복잡해진다는 단점을 가지고 있었습니다.

이 단점을 보완하기 위해 탄생한 아이가 Sass입니다.
sass는 css 전처리(Preprocessor)이며 Css가 동작하기 전에 작동하는 방식으로 기존 css의 확장의 개념이다라고 생각하시면 편할 것 같습니다.
scss 파일을 모아놓은 폴더 위 설명과 같이 모든 scss 파일이 뭉쳐 main.css로 가공됩니다.

_site

Jekyll 이 변환 작업을 마친 뒤 생성된 사이트가 저장되는 (디폴트) 경로이다.
대부분의 경우, 이 경로를 .gitignore 에 추가하는 것은 괜찮은 생각이다.

Jekyll로 사이트를 빌드하면 해당 최종 결과물이 디렉토리에 생성됩니다. 차후 이 폴더에 있는 내용들로 배포를 할 예정입니다.

Assets

main.scss, images(없으면 새 폴더 추가해줍니다.) , javascript로 구성된 폴더 특히, 사진이나 이미지들은 images에서 주로 관리하게됩니다.

_config.yml 설정하기

이번 문서에서 가장 중요한 작업입니다
기존값 또는 기본값을 자신의 설정대로 변경하는 작업을 주로 다루겠습니다.

기본 사이트 설정

locale                   : "ko" # 한국어로 설정
title                    : "" # 사이트 제목
name                     : "" # 이름
description              : "" # 사이트 설명
url                      : "" # "https://[github ID].github.io" 결과적으로 github 리포지토리의 이름과 동일해야합니다.

사용하는 답글 플랫폼이 있다면 해당 플랫폼 설정

comments:
  provider               : # false (default), "disqus", "discourse", "facebook", "staticman", "staticman_v2", "utterances", "custom"
  disqus:
    shortname            : # https://help.disqus.com/customer/portal/articles/466208-what-s-a-shortname-
  discourse:
    server               : # https://meta.discourse.org/t/embedding-discourse-comments-via-javascript/31963 , e.g.: meta.discourse.org
  facebook:
    # https://developers.facebook.com/docs/plugins/comments
    appid                :
    num_posts            : # 5 (default)
    colorscheme          : # "light" (default), "dark"
  utterances:
    theme                : # "github-light" (default), "github-dark"
    issue_term           : # "pathname" (default)
  staticman:
    branch               : # "master"
    endpoint             : # "https://{your Staticman v3 API}/v3/entry/github/"

사이트 저자 관련 정보

author:
  name             : "" 
  avatar           : # 보여질 이미지 경로 ex) "/assets/images/bio-photo.jpg" 
  bio              : "" # 부가 텍스트
  location         : "" # 주소
  email            :
  links:
    - label: "Email"
      icon: "fas fa-fw fa-envelope-square"

블로그 하단에 표시할 사이트 저자 정보

footer:
  links:
    - label: "Twitter"
      icon: "fab fa-fw fa-twitter-square"
      # url:
    - label: "Facebook"
      icon: "fab fa-fw fa-facebook-square"
      # url:
    - label: "GitHub"
      icon: "fab fa-fw fa-github"
      # url:
    - label: "GitLab"
      icon: "fab fa-fw fa-gitlab"
      # url:
    - label: "Bitbucket"
      icon: "fab fa-fw fa-bitbucket"
      # url:
    - label: "Instagram"
      icon: "fab fa-fw fa-instagram"
      # url:

가장 기초적인 설정은 위 내용만 수정해도 충분할 것이라 생각됩니다.

최종테스트

이전 문서에서 사용했던 것처럼 사이트를 빌드하고 로컬 서버에 적용해 접속하였을 때 정상적으로 블로그가 나타난다면 성공!

마무리

초라했던 블로그가 이제 제법 세련되어졌습니다.

이제 본격적으로 글을 작성해볼텐데 주로 Markdown(.md)을 사용합니다.

다음엔 이 마크다운 문법에 대해서 알아보도록 하겠습니다.

이상입니다. 고생많으셨습니다.

감사합니다 :)

참고사이트

https://ansohxxn.github.io/blog/jekyll-directory-structure/

수정이 필요하거나, 개선사항이 있을시 답글을 남겨주시면 빠른 시일안에 해당 항목을 수정하겠습니다.

Twitter Facebook LinkedIn

SG Yoo.