기술 블로그를 위한 Jekyll NexT 테마 튜토리얼

Posted on | In |

개인적으로 공부할 내용을 정리할 기술 블로그를 만들까 생각하던 중, 검색을 하다보니 많은 기술 블로그가 GitHub Pages + Jekyll로 운영되고 있는 것을 알게 되었다. 이 포스트에서는 그 중 NexT라는 Jekyll theme를 활용해 기술 블로그를 만드는 과정에 대해 설명해보려 한다.

Jekyll이란 무엇인가, 그리고 장점들

Jekyll은 정적(static)인 웹사이트를 생성하기 위한 개발 툴이다. Ruby 스크립트로 작성되어 있지만 튜토리얼만 잘 따라하면 Ruby를 몰라도 별 어려움 없이 블로그를 만들 수 있다. Jekyll을 통해 만든 블로그는 다음과 같은 장점들을 가지고 있다.

GitHub Pages로 공짜 호스팅이 가능하다

Jekyll은 GitHub Pages와 연동하여 따로 돈을 낼 필요 없이 간편하게 블로그를 호스팅할 수 있다.

단순하게 다음 사진과 같은 방법을 통해 GitHub Pages Repository를 만들고, 거기에 Jekyll 블로그를 넣으면 GitHub Pages 서비스가 알아서 파싱해서 블로그를 만들어줄 것이다. 얼마나 간단한가!

마크다운 기반으로 글을 작성해 편리하다

마크다운 기반으로 글을 작성할 수 있게 되어 있으며, 따라서 잡다한 디자인 설정 없이도 해당 테마에 맞춰 깔끔한 포스트를 생성해준다. 개인적으로 수업 필기나 공부한 것을 정리할 때 마크다운 기반을 즐겨 사용하고 있는데, 이렇게 만든 마크다운 파일을 GitHub Repository에 업로드하는 것만으로 깔끔한 글로 확인할 수 있어 좋았다.

정적 웹사이트로 빠르고 안정성이 높다

정적인 웹사이트는 이미 만들어져 있는 파일을 전송하기만 하면 되기 때문에 동적 웹사이트가 서버 내 여러 작업들을 해야 하는 것에 비해 빠르게 작동한다. GitHub Pages에 연결하면 서버를 관리해야 할 일도 없고, 만약 정적 웹사이트를 만드는 데 필요한 라이브러리에서 보안 이슈가 발생하면 업데이트를 하라는 알림도 보내준다. 안정성과 관련한 대부분의 이슈는 그쪽에서 처리해준다.

물론 기술 블로그에 필요한 동적으로 작동할 기능이 필요하긴 하다. 바로 독자들의 질문 댓글과 그에 대한 답변이다. 그러나 이 부분은 Disqus라는 훌륭한 서비스가 있어 Jekyll 페이지 하단에 추가하기만 하면 이 기능을 구현할 수 있다. 어떤 테마는 단순히 configuration file에서 Disqus 아이디만 추가해주는 것으로 이 기능을 쓸 수 있다.

NexT 테마를 선택한 이유

많은 개발자들이 Jekyll을 활용한 테마를 만들어 오픈소스로 배포하고 있다. 다양한 좋은 테마들이 존재하는데, 여러 테마들을 살펴본 결과 그 중 NexT로 결정했다.

내 블로그에 꼭 있으면 좋겠다고 생각한 기능은 다음과 같다.

  • 마크다운으로 작성 기능
  • 카테고리 기능
  • 날짜별로 찾기 기능
  • 키워드 검색 기능
  • 태그 설정 및 검색 기능
  • 군더더기 없이 깔끔한 디자인

다양한 Jekyll 테마들 중 내가 원하는 기능을 가장 많이 갖추고 그 중에서도 디자인이 마음에 드는 것은 바로 NexT 테마였다.

NexT 테마는 중국의 개발자가 개발한 듯한데, 원래는 Hexo라는 Jekyll과 같은 블로그 생성 툴로 만든 테마다. 그런데 이것을 다른 개발자가 Jekyll로 포팅해서 만든 Jekyll 테마를 활용했다. 여기에서 Jekyll-NexT 테마를 확인할 수 있다.

NexT 테마 블로그 만들기

Ruby 설치

우선 Jekyll이 Ruby를 필요로 하기 때문에 설치해야 한다.

다음은 Mac OS 환경에서의 설명이다.

먼저 다음과 같은 터미널 명령어를 통해 RVM(Ruby Version Manager)을 설치한다.

1
\curl -L https://get.rvm.io | bash -s stable

그러면 터미널을 종료했다 다시 실행하라는 안내 메세지가 나올 것이다. 안내 메세지에 따라 터미널을 종료 후 다시 실행해준다. 실행 후 다음과 같은 명령어를 입력하면 현재 설치 가능한 Ruby 버전들을 확인할 수 있다.

1
rvm list known

설치하고 싶은 Ruby 최신 버전을 확인 후 다음과 같은 명령어로 설치한다.

1
rvm install [ruby-version]

만약 Ruby가 설치되어 있더라도 Ruby 2.1.0 이상의 버전이 필요하기 때문에 이에 맞춰 최신 버전을 설치해주도록 한다.

Ruby 버전 확인 명령어

1
ruby --version

그 후 의존성 관리 툴인 Bundler를 설치해준다.

1
gem install bundler

NexT 테마 설치

블로그 파일을 설치하고자 하는 위치로 이동해 다음과 같은 명령어로 Next 테마를 클론한다.

1
2
git clone https://github.com/Simpleyyt/jekyll-theme-next.git
cd jekyll-theme-next

Jekyll과 다른 의존성 패키지들을 설치한다.

1
bundle install

이제 설치는 끝났다. 다음과 같은 명령어로 로컬에서 사이트를 돌려볼 수 있다.

1
bundle exec jekyll server

Configuration 파일 설정

NexT 테마에서는 다른 Jekyll 테마와 같이 블로그 대부분의 설정을 _config.yaml 파일을 통해 할 수 있다.

1
2
3
4
5
# Site
title: # 블로그 이름
subtitle:
description:
author: # 블로그 작성자 이름

위와 같이 Site 설정 외에도,

  • menu(메뉴 종류 및 순서)
  • social(GitHub 계정이나 Facebook, Linkedin 링크)
  • avatar(블로그 작성자 사진)
  • sidebar(사이드바 설정)
  • mathjax(수학 수식 입력)
  • disqus(Disqus 설정)
  • google analytics(Google analytics 추적 코드를 넣으면 사용 가능)
  • local search(검색 기능 활성화)

등의 설정을 _config.yaml 파일을 통해 할 수 있다.

포스트 작성

포스트를 작성할 때는 일반 마크다운 문법으로 작성하면 된다.

개인적으로 마크다운 에디터는 MacDown이나 Typora를 추천한다.

포스트를 작성하고 나서는 마크다운 파일을 _posts 폴더 내에 넣으면 반영된다.

포스트 작성 시 염두에 두어야 할 것은 포스트에 제목과 카테고리, 태그 등을 설정하는 방법이다.

다음과 같은 yaml 방식의 코드를 상단에 삽입한다.

1
2
3
4
5
6
7
---
layout: post
title: "기술 블로그를 위한 Jekyll NexT 테마 튜토리얼"
date: 2018-09-08
categories: etc
tags: [tutorial, jekyll, blog, NexT theme, GitHub Pages]
---

이것은 이 포스트의 마크다운 파일 상단에 있는 설정 코드다.

layout, title, date, category, tags 등을 설정할 수 있다.

참고하여 포스트를 작성하면 된다.

0%