Written by Poogle
on 

Jekyll로 GitHub 블로그 만들기 - 2

이번 포스팅에서는 Jekyll로 만든 블로그에 여러가지 기능을 커스텀하는 방법을 알아보겠습니다. 우선 제가 사용하는 블로그의 기본 테마는 Jekyll의 Tale이라는 테마인데요.


Tale 테마에서는

1) 전체 게시물을 보여주는 Posts 페이지,

image

2) 게시물의 태그를 관리해주는 Tags 페이지,

image

3) 자기소개를 할 수 있는 About 페이지를 제공합니다.

image

저는 이 세 가지 페이지 외에도 대분류를 할 수 있는 카테고리 페이지, 블로그 내 포스트들을 검색할 수 있는 검색 페이지를 추가로 구현하려고 합니다.


카테고리 페이지 만들기

저의 경우에는 한 포스팅에 대해 태그는 여러 개가 붙을 수 있고, 대분류로 나눠진 카테고리는 하나만 설정하도록 하고 싶었습니다. 사실 사이드 바와 같은 기능을 추가하고 싶었는데 현재 사용하고 있는 템플릿 자체의 scss 코드를 여러모로 수정해야 하는 대공사가 될 것 같아 아주 간단한 형식의 카테고리 페이지만을 추가하려고 합니다.

결과적으로 원하는 형태는,

image

image

이러한 구조로 만들기 위해서…

1) 우선 카테고리 페이지의 전체 형식을 구성하기 위해 _layouts/category.html 파일을 작성합니다.

---
layout: default
---

<h1>Jekyll로 GitHub 블로그 만들기 - 2</h1>
<ul class="posts-list">
    
    
</ul>

2) 카테고리 폴더(categories)를 만들고 사용할 카테고리들의 md 파일을 작성합니다.

---
layout: category

title: BackEnd
---

image

3) 설정파일인 _config.yml 파일에 카테고리 위치와 리스트에 대한 정보를 추가합니다.

category_dir: categories/
category_list: [ Project, BackEnd, Algorithm, TIL, Others]

4) 카테고리 개별 페이지를 위한 categories/index.html 파일을 작성합니다.

image

Utterances (GitHub) 댓글 적용하기

Tale은 Disqus 댓글 기능을 기본적으로 제공하고 있습니다만, 아무래도 GitHub Pages를 활용해서 만든 블로그인 만큼 Disqus보다는 Utterances 댓글을 사용하려고 합니다. 작성된 댓글을 issue로 확인할 수 있다는 점에서도 더욱 편리하게 느껴졌습니다.

image

image

Utterances를 적용하는 방법은 간단합니다.

저의 경우 issue-term은 pathname으로 theme은 github-light 으로 설정했습니다.


Google에 내 블로그 검색 노출시키기

자신의 블로그, 그리고 블로그에 작성한 글들을 구글 검색에 노출시키는 방법에 대해 알아보도록 하겠습니다. 제가 사용할 방법은 Google Search Console에 제 블로그를 등록하는 방법입니다.

Google Search Console에 블로그 등록하기

Google Search Consel: https://search.google.com/search-console/about

image

image

<meta name="google-site-verification" content="~" />

# Gems
plugins:
  - jekyll-feed
  - jekyll-paginate
  - jekyll-seo-tag
  - jekyll-algolia
  **- jekyll-sitemap**

group :jekyll_plugins do
    gem 'jekyll-sitemap'
end

image

image

image

User-agent: *
Allow: /
Sitemap: http://{user}.github.io/sitemap.xml

image