Jekyll을 이용해 GitHub에 블로그 만들기 (2)

지난 글에서 Jekyll을 설치하고 실행하는 단계까지 진행했습니다.

이번에는 테마를 적용하고 새로운 글을 작성하는 방법을 확인해보겠습니다.

테마 적용하기

처음 Jekyll을 실행하면 심플한 기본 테마의 페이지를 보여줍니다. 기본 테마도 이미 충분히 훌륭합니다. 만약 기본 테마가 맘에 든다면 이번 단계는 건너 뛰어도 됩니다. 하지만 새로운 테마를 적용하고 싶다면, 아래 몇 가지 단계를 거쳐서 손쉽게 테마를 변경할 수 있습니다.

테마 다운로드하기

1. GitHub에는 훌륭한 여러 테마가 공개되어 있습니다. jekyll-theme 등의 토픽을 확인해서 맘에 드는 테마를 고릅니다.

2. 맘에 드는 테마를 골랐다면 소스코드를 다운로드합니다. 조금 더 고급스럽게 작업하고 싶다면 Repository를 Clone하는 방법도 있습니다.

테마 적용하기

1. 다운 받은 테마의 모든 파일을 Jekyll을 설치한 디렉토리로 복사합니다.

2. 아래 명령어를 이용해 테마에서 요구하는 플러그인을 설치합니다.

$ bundle install

3. 모든 설치 과정이 완료되면 아래 명령어를 이용해 서버를 시작합니다.

$ bundle exec jekyll serve

4. 테마가 변경된 것을 확인할 수 있습니다.

빈 페이지가 표시되는건 현재 테마가 별도의 첫 페이지를 보여주기 때문입니다.

배포하기

지난번과 같이 모든 코드를 GitHub로 올리면 잠시 후 실제 사이트에 반영됩니다.

바로 전 이미지와 같아보이지만 자세히 보면 Safari의 주소가 다릅니다.

설정 변경하기

블로그 제목이나 주소 등의 설정을 변경해서 올바르게 표시되도록 수정합니다. 모든 설정은 _config.yml 파일에 있습니다.

이 설정은 몇가지 공통적인 설정을 제외하고는 테마에 따라 내용이 다릅니다. 때문에 반드시 테마 제작자가 작성한 설명서를 확인해야합니다.

아래 설정 예제를 공유합니다.

## => Site Settings
##############################
text_skin: forest
highlight_theme: default
url     : https://jeta-kor.github.io
baseurl : 
title   : jetalog
description: >
  Description


## => Language and Timezone
##############################
lang: ko
timezone: Asia/Seoul


## => Author and Social
##############################
author:
  type      : person
  name      : jETA
  url       : https://jetalog.net
  avatar    : 
  bio       : 
  email     :
  facebook  : 
  twitter   : 
  weibo     : 
  googleplus: 
  telegram  : 
  medium    : 
  zhihu     : 
  douban    : 
  linkedin  : 
  github    : jETA-Kor
  npm       : jetalog


## => GitHub Repository (if the site is hosted by GitHub)
##############################
repository: jETA-Kor/jeta-kor.github.io
repository_tree: master


## => Paths
##############################
paths:
  root    : /archive.html
  home    : /archive.html
  archive : 
  rss     : 

# ...

새 글 작성하기

Jekyll은 아주 정적입니다. 조금 풀어서 이야기하자면 DB로부터 새로운 글을 가져오거나, 사용자에 따라 보여줄 글을 판단하거나 하지 않습니다. _posts 디렉토리에 있는 글을 목록으로 만들고 보여줄 뿐입니다.

새 글 작성

1. _posts 디렉토리에 새 파일을 만듭니다. 이 때, 파일 이름은 정해진 규칙에 따라 지정해야 합니다.

포스트 파일 생성하기

새 포스트를 생성하려면, _posts 디렉토리에 파일을 생성하기만 하면 됩니다. 이 때 중요한 것은 생성하는 파일의 이름입니다. Jekyll 이 이 파일을 블로그 포스트로 인식하게 하려면 파일명을 다음 형식에 맞춰야 합니다:
YEAR-MONTH-DAY-title.MARKUP

여기서 YEAR 는 네 자리의 숫자, MONTH 와 DAY 는 두 자리 숫자이고, 확장자 부분의 MARKUP 은 파일에 사용된 마크다운 포맷입니다. 올바른 포스트 파일명을 예로 들면 다음과 같습니다:
2011-12-31-new-years-eve-is-awesome.md
2012-09-12-how-to-write-a-blog.md

포스트 작성하기 | Jekyll

이번 예제에서는 다음과 같이 지정합니다: 2019-10-01-My-First-Article.md

2. 생성한 파일에 포스트 내용을 작성합니다. 이 때, 상단엔 YAML 형식의 Header를 반드시 포함해야 합니다. Header에는 적용한 테마에 따라 여러 추가 정보가 요구될 수 있습니다. 아래에 새 글 예제를 첨부합니다.

---
title: My First Article
tags: jETA Sample
---

# Welcome

## 개요
이 글은 Jekyll을 연습하기 위해 임시로 생성한 글입니다.
자세한 내용을 확인하려면 다음 목록의 페이지를 참조하세요.

## 목록
- [Jekyll을 이용해 GitHub에 블로그 만들기 (1)](https://jetalog.net/86)
- [Jekyll을 이용해 GitHub에 블로그 만들기 (2)](https://jetalog.net/87)
- [Jekyll 공식 홈페이지](https://jekyllrb-ko.github.io)

3. 일반적으로는 파일을 저장함과 동시에 Bundler가 자동으로 새로 빌드합니다. 아카이브 페이지에서 새 글이 등록되어있는지 확인합니다.

4. 새 글을 클릭하면 조금 전에 작성한 글이 잘 표시되는 것을 확인할 수 있습니다.

배포

로컬에서 확인한 결과 문제가 없다면 역시 GitHub로 Commit과 Push를 합니다.

참고 문서

Jekyll: https://jekyllrb-ko.github.io

저작자표시 비영리 동일조건

jetalog.net

테마 적용하기

설정 변경하기

새 글 작성하기

티스토리툴바