16 January 2018 / JEKYLL

Jekyll 기반의 GitHub Page 생성(3)

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

웹 폰트 설정

블로그를 운영할 때 가장 신경써야 하는 부분 중 하나는 readability입니다. Jasper2는 영문일 경우 상당히 가독성이 좋은데 한글을 사용하니 폰트때문에 가독성이 확 떨어지더군요. 그래서 폰트를 좀 바꾸어봤습니다.

당연한 말이지만 이 부분은 “이게 정답이다” 라는게 아닙니다. 전 이렇게 바꾸었어요~ 하는 부분이지요. 하지만 대부분의 Jekyll theme가 비슷한 구조를 가지고 있기 때문에 다른 theme를 사용하실 때 비슷하게 적용하실 수 있을 듯 합니다.

먼저 사용할 웹 폰트를 물색해야 합니다. 구글에서 찾아보면 원하시는 웹 폰트를 쉽게 찾을 수 있습니다. 만만한 나눔고딕 폰트를 이용해 보겠습니다.

<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/nanumgothic.css">

나눔고딕 폰트에 대한 링크입니다.

이제 _layout/default.html 파일을 열어서 해당 폰트 링크를 넣어줍니다. 다음과 비슷하게 되겠네요.

<!DOCTYPE html>
<html>
<head>

    <!-- Document Settings -->
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <!-- Base Meta -->
    ...
    ...

    <!-- 웹 폰트 설정 -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/nanumgothic.css">

이제 css파일을 수정해서 특정 class에 대한 font-family에 나눔고딕 폰트를 추가해 주면 되겠네요. Jasper2에서 일반적인 포스트는 모두 .post-full-content css class의 영향을 받습니다. 다른 theme를 이용하시는 분은 포스트들이 어떤 css class에 영향을 받는지를 확인하셔서 그 class를 찾아 수정하시면 됩니다.

assets/css/screen.css 파일을 열어서 .post-full-content 부분을 찾아 다음과 같이 수정합니다. Georgia는 영문폰트이기 때문에 영문은 일단 이 폰트를 먼저 이용하게 되고 한글 부분은 Nanum Gothic을 사용하게 됩니다.

.post-full-content {
    position: relative;
    margin: 0 auto;
    padding: 70px 100px 0;
    min-height: 230px;
    font-family: Georgia, 'Nanum Gothic', serif;
    font-size: 2.2rem;
    line-height: 1.6em;
    background: #fff;
}

css가 변경되었으니 gulp를 이용하여 css task를 수행합니다. Jasper2 theme는 gulp에 대한 설정을 포함하고 있습니다. NPM(Node Package Manager)를 이용해 gulp를 설치하고 gulpfile.js 파일을 이용해 css task를 수행하면 결과적으로 assets/built 폴더에 수정된 내용으로 minified된 css파일이 생성되게 됩니다.

이제 다시 bundle exec jekyll serve을 수행하면 새로 만들어진 css를 이용하여 블로그가 생성될 것이고 한글로 쓴 내용의 폰트가 나눔고딕으로 변경되는 것을 볼 수 있습니다.

End.

Jekyll 기반의 GitHub Page 생성(3)

Jekyll 기반의 GitHub Page 생성(4)

Jekyll 기반의 GitHub Page 생성(2)

Search IT Blog