/ JEKYLL

Jekyll 기반의 GitHub Page 생성(2)

Jekyll 기반의 GitHub Page 생성은 여러 절로 구성되어 있습니다.


영상설명

이번 영상은 자신의 local 컴퓨터에 생성한 블로그를 내 입맛에 맞게 수정하는 방법과 새로운 post를 올리는 방법, 그리고 GitHub Page에 내 블로그를 개설하는 방법에 대한 내용입니다.

Jekyll 기반의 GitHub Page 생성(2) - 블로그 수정 영상 (환경설정파일 수정)


Jekyll 기반의 GitHub Page 생성(2) - 블로그 수정 영상 (author와 tag 수정)


Jekyll 기반의 GitHub Page 생성(2) - 블로그 수정 영상 (메뉴 수정 및 post올리기)


Jekyll 기반의 GitHub Page 생성(2) - 블로그 수정 영상 (Archive 설정)


Jekyll 기반의 GitHub Page 생성(2) - 블로그 수정 영상 (post의 목차설정)


Jekyll 기반의 GitHub Page 생성(2) - GitHub Page에 Blog 올리기


블로그 수정

이전 포스트에서 Jasper2 theme를 이용한 블로그가 실행되는 것 까지 확인을 했습니다.

Jasper2나 혹은 다른 theme를 사용하실 때도 이제부터가 문제입니다. 자신의 입맛에 맞도록 theme를 수정해야 하는데 이게 쉬운일이 아닙니다. 개발쪽에 있으신 분들은 쉽게 접근하실 수 있지만 그렇지 않은 경우 상당히 난해합니다. “그냥 Tistory 쓰고말지” 라는 말이 나올정도로요.

사실 GitHub Page에서 블로그를 운영하는 사람들 중 많은 사람이 Front-End 개발이 가능한 사람들 입니다.

Jekyll은 정적 사이트 생성기 입니다. Liquid template을 기반으로 markdown형식의 텍스트파일을 HTML로 변환해주는 변환 도구라고 보시면 됩니다.

이전 포스트에서 Jasper2 theme를 압축해제한 폴더를 기억하시나요? C:/blogmaker 였습니다. 이 폴더가 Jekyll Source Folder가 됩니다.

이 Jekyll Source Folder 안의 _post라는 폴더에 우리가 작성하려는 글을 markdown 형식으로 작성합니다. 그런 후 bundle exec jekyll serve 명령을 이용하여 build시키면 저장된 글에 대해 컴파일이 진행되고 결과물이 destination 폴더에 생성됩니다.

추후에 GitHub Page에 올려 사용하는 실제적인 블로그가 바로 이 destination 폴더 안에 있는 내용입니다. 따라서 Git을 이용하여 변환된 결과물(destination 폴더안의 내용)을 GitHub Page와 연동되는 GitHub Repository에 push해 주어야 합니다.

그리고 사용하는 IDE는 WebStorm을 이용하도록 하겠습니다.

그럼 천천히 진행해 보겠습니다.


환경설정 파일(_config.yml) 수정

Jekyll은 설정파일로 YAML 파일을 이용합니다. YAML에 대한 설명은 YAML이란 링크에 간단히 정리되어 있습니다.

이 설정에 대한 파일이 바로 _config.yml입니다. 블로그 생성에 대한 전체 환경 세팅을 담당하는 파일이라고 생각하시면 됩니다.

C:/blogmaker폴더안에서 _config.yml을 찾아 해당내용을 자신에 맞게 수정해서 사용해야 합니다.

아래는 제가 사용하는 _config.yml에 대한 내용과 그 설명입니다. 주석이 달린 부분을 중심으로 자신에 맞게 수정해서 사용하시면 됩니다.


위의 설정파일에
destination: ./output/으로 설정되어 있기 때문에 command 창에서 “bundle exec jekyll serve” 명령을 수행하면 C:/blogmaker/output/ 폴더가 생성되고 여기에 컴파일된 결과파일들이 저장되게 됩니다.

결과파일을 C:/blogmaker ( Jekyll Source Folder )밑의 output folder로 지정한 이유는 나중에 Travis-CI와 연동하기 위해서 입니다. ( git submodule로 처리하기 위함입니다. )

Travis-CI를 이용하지 않고 그냥 수동으로 결과파일을 자신의 GitHub Page에 올리려면 설정파일에 destination: ../[GitHubPage]/과 같은 형식으로 설정하시면 됩니다. 설정 후 “bundle exec jekyll serve” 명령을 수행하면 C:/[GitHubPage]/라는 폴더가 생성되고 여기에 컴파일된 결과파일들이 저장되게 됩니다.

Jekyll build 작업을 할 때 한가지 주의해야 할 점이 있습니다.

기본적으로 Jekyll build는 development 세팅으로 진행됩니다. 만약 실제 GitHub Page에 Publishing할 목적으로 build하는 것이라면 JEKYLL_ENV 환경변수의 값을 production으로 설정한 후 build를 진행해야 합니다. (참고링크)

위의 작업을 하지 않으면 정상적으로 URL이 생성되지 않습니다. localhost로 세팅됩니다.


author 수정

Jasper2는 여러 사람이 자신의 ID로 각자 글을 작성할 수 있습니다. 쉽게 말하자면 홍길동, 신사임당 이라는 사람이 있다면 각각 자신의 글을 작성해서 블로깅할 수 있다는 말입니다. 블로그를 보는 사람은 각 author별로 post를 모아서 볼 수 있습니다.

저는 개인 블로그를 개설하는것을 전제로 설명하기 때문에 author를 1명만 만들어 사용하지만 만약 회사에서 사용하는 회사 블로그인 경우 글을 작성하는 사람이 다수일 수 있으므로 author를 여러명 지정해서 사용 할 수 있습니다.

아래는 제가 사용하는 authors.yml파일의 내용입니다. 해당 파일은 _data 폴더안에 위치하고 있습니다.


tag 수정

tag는 글의 범주를 정해줄 수 있는 기능입니다. 다른 author라도 같은 tag의 글을 작성할 수 있으며 author별로 post를 모아볼 수 있듯이 같은 tag(같은 주제)별로 post를 모아볼 수 있습니다.

아래는 tags.yml파일의 내용(예시)입니다. 해당 파일은 _data 폴더안에 위치하고 있습니다.


메뉴 수정

우리 blog의 메뉴 부분의 내용을 변경하려면 _includes 폴더의 navigation.html을 수정해야 합니다.

아래는 navigation.html파일의 내용(예시)입니다.

Jekyll에 의해서 자동으로 생성된 archive.html 파일에는 모든 post가 시간순서로 나열되어 있는것을 확인할 수 있습니다. 또한 author_archive.html 파일에는 이름과 다르게(?) tag별로 post가 나누어져 있는 것을 확인할 수 있습니다.


post 작성

이제 post를 하나 작성해 보도록 하겠습니다. 적당한 author와 tag를 설정했으면 tag명과 같은 폴더를 _posts 폴더 하단에 생성합니다. 그리고 .md로 되어 있는 파일을 아무거나 하나 복사해서 다음과 같이 파일명을 수정합니다.

2020-06-07-python-basic.md

앞에부분은 파일 작성날짜를 의미하고 python-basic 부분이 해당 파일을 jekyll로 컴파일 한 후 생성할 파일의 파일명으로 사용하게 됩니다.

해당파일의 내용을 간단하게 살펴보면 다음과 같이 시작하는 것을 볼 수 있습니다.

---
layout: post
current: post
cover:  assets/built/images/python-logo.png
navigation: True
title: Python 강좌(1) - Python 기본 
date: 2018-09-27 16:40:00
tags: [python]
class: post-template
subclass: 'post tag-python'
author: moon9342
---

포스트를 작성했으면 다시 실행하여 결과를 확인합니다.


Archive 설정

우리가 글을 posting하면 이 글들이 시간 순서대로 메인화면에 올라가게 됩니다. 내가 작성한 모든 글들을 시간순으로 보려면 어떻게 해야할까요? 또는 모든 Tag별로 각 포스트의 제목만을 시간순으로 정렬해서 보려면 어떻게 해야할까요?

아래와 같은 2개의 파일을 우리 Jekyll Source Folder 루트 밑에 만들어 두시면 됩니다.

archive.md

author_archive.md


post 목차 설정

각 tag별로 post들을 모아 볼 수 있긴 하지만 블로그의 특성 상 여러 글들이 뒤섞여 있을 수 밖에 없는데 목차를 이용하면 이런 문제들을 조금 완화할 수 있습니다.

단, 이런 목차는 Jasper2가 제공하는 기능은 아니고 특정 CSS를 작성하고 목차에 대한 html 파일을 생성한후 우리 post에 끼워 넣는 식으로 처리해야 합니다.

저의 블로그 post를 보시면 post 시작부분에 목차가 먼저 나오는데 이 부분을 어떻게 설정하면 되는지 알아보겠습니다.

먼저 목차를 구성하는 HTML 파일(python-table-of-contents.html)을 하나 준비해야 합니다. 이 파일은 _includes 폴더에 저장해서 관리하는게 좋습니다.

예시로 다음의 내용을 이용하도록 하겠습니다.

관련된 CSS style이 있어야 화면에 정상적으로 표현되기 때문에 CSS style을 지정합니다.

이부분은 제공된 파일내용(assets/css/custom.css)을 그대로 이용합니다.

이 CSS 파일은 Gulp를 통해서 minified 되어야 사용할 수 있습니다. 다음의 설정내용을 이용해서 Gulp를 수행시킵니다. (Gulp 설치와 CSS compile 부분은 동영상을 참고하시기 바랍니다.)

간단하게 설명하면 Node.js를 설치한 후 NPM을 이용하여 필요한 module을 설치합니다. 여기서 주의할 점은 Node.js의 버전이 12버전이면 js파일에서 오류가 발생할 수 있습니다. Gulp의 버전과 Node.js의 버전에 따라서 compile 오류가 발생할 여지가 있기 때문에 만약 오류가 발생하면 버전문제를 해결해야 합니다. (저의 경우는 Node.js 버전을 11버전으로 낮추어서 사용했습니다.)

compile이 성공하면 결과 파일은 /assets/built 폴더 하단에 minified CSS파일로 저장되게 됩니다.

gulpfile.js의 내용은 아래의 코드를 이용합니다.

참고로 npm install에 사용되는 package.json은 다음의 내용을 이용해야 합니다.

마지막으로 이렇게 설정된 python-table-of-contents.html 파일을 우리의 post안에 포함시키시면 됩니다.

---
layout: post
current: post
cover:  assets/built/images/python-logo.png
navigation: True
title: Python 강좌(1) - Python 기본 
date: 2018-09-27 16:40:00
tags: [python]
class: post-template
subclass: 'post tag-python'
author: moon9342
---

{% include python-table-of-contents.html %}


GitHub Page에 Blog 올리기

Travis-CI에 대한 설정은 다른 포스트에서 살펴보기로 하고 여기서는 수동으로 결과 파일을 GitHub Repository (GitHub Page에 대한 Repository)에 올리는 것으로 설명합니다. (destination: ../[GitHubPage]/ 으로 설정되어 있다고 가정합니다.)

이제 C:/[GitHubPage]/파일안의 내용을 GitHub Page에 Publishing하시면 됩니다.

먼저 GitHub에 접속해서 새로운 Repository를 생성합니다. 주의할 점은 Repository의 이름을 (자신의 github id).github.io로 지정해야 합니다.

Git을 이용하여 방금 만든 C:/[GitHubPage]/ 안의 내용을 Repository에 push합니다.

정상적으로 push가 진행되었다면 이제 https://(자신의 github id).github.io로 접속해서 블로그가 잘 개설이 되었는지 확인합니다.

이 포스트에서는 GitGitHub에 대한 기본적인 사용법에 대해서는 다루지 않습니다. 해당 부분은 저의 다른 포스트나 혹은 여기를 이용하여 살펴보시면 될 듯 합니다.

GitHub Page에 블로그가 잘 개설되었나요? 블로그가 잘 개설되었다면 이제 메뉴를 원하는 형식으로 바꾸고 새로운 내용의 post도 작성해서 블로그에 올리시면 됩니다. 새로운 내용을 만들고 포스팅 작업을 해 보세요.

End.