Hexo Blog 블로그 구축 (Tranquilpeak 테마)

Hexo를 선택하게 된 이유

평소에 웹사이트를 만들어서 운영하고 싶은 생각이 많았지만 디자인이나 웹프로그래밍의 장벽은 높고, 막상 만들어도 퀄리티가 좋지 않아서 금방 포기하던 차에 정적 웹사이트 생성기에 대해서 알게 되었습니다. 그 중 Github블로그로 핫한 Hexo에 대해서 알게 되었고, 다양한 테마와 함께 커스터마이징이 가능해서 입맛에 따라 나만의 블로그를 가지게 된다는 점이 마음에 들었습니다.

또한 싸이월드처럼 서비스가 종료되면 해당 플랫폼에 게시되었던 모든 글과 사진들을 백업하고 복구하느라 많은 시간이 소모되지만, Hexo 블로그는 자신의 컴퓨터에 모든 데이터가 저장되어 있고 이를 바탕으로 deploy하기 때문에 안전하다는 느낌을 받았습니다.

Hexo는 Markdown을 사용하여 포스트를 작성하면 설정한 테마에 따라 정적인 파일을 순식간에 생성해주는 방식입니다.

사전작업: Git과 Node.js의 설치

Hexo 블로그를 사용하기 위해서는 아래의 프로그램 설치가 요구됩니다.

• Node.js
• Git

Hexo 프로젝트 생성

저는 Windows를 사용하므로 Windows기준으로 설명드리겠습니다.

1. Win + R 키를 눌러 실행창을 엽니다.

2. cmd를 입력하고 Enter키를 누릅니다.

3. 경로가 C:\Users\유저이름 으로 나올텐데, 여기에 Hexo 프로젝트를 생성하도록 하겠습니다.

   1 2 3 4 5 6 7

   # 아래의 명령으로 hexo-cli를 설치해줍시다. $ npm install hexo-cli -g # 아래 명령으로 hexo 기본 프로젝트를 생성합니다. $ hexo init <folder> $ cd <folder> $ npm install

Tranquilpeak 테마 적용

• 데모페이지는 여기를 클릭해주세요.
• 최신버전은 여기를 클릭해주세요.

1. 다운로드 받은 후 압축을 푼다.
2. 풀린 디렉토리 이름을 tranquilpeak로 변경한다.
3. 이 디렉토리를 위에서 생성한 hexo 기본 프로젝트 내의 themes 디렉토리에 넣는다.
4. 위에서 생성한 프로젝트의 _config.yml을 연다. (themes/tranquilpeak/_config.yml이 아닙니다!)
5. 맨아래로 주르륵 내려가서 테마를 theme: tranquilpeak로 변경한다.

1

$ hexo server

로컬에서는 http://localhost:4000에서 테스트가 가능합니다.
Hello World라는 예제가 잘 나타나면 성공입니다.

category, tags 활성화

블로그에서 카테고리와 태그를 사용하기 위해 활성화시켜 줍니다.

1
2

$ hexo new page "all-categories"
$ hexo new page "all-tags"

위 두 명령을 실행했다면 아래의 파일들이 생겼을겁니다.

• source/all-categories/index.md
• source/all-tags/index.md

위 두 파일을 각각 아래처럼 수정해줍시다.

1
2
3
4
5

---
title: "all-categories"
layout: "all-categories"
comments: false
---

1
2
3
4
5

---
title: "all-tags"
layout: "all-tags"
comments: false
---

사이드바 바꾸기

가로 1280px 이상이면 사이드바가 매우 넓은데요.
저는 컨텐츠 영역을 더 크게 보고 싶기때문에 이 옵션을 약간 변경했습니다.

1. themes/tranquilpeak/_config.yml를 연다.
2. sidebar_behavior를 찾는다.
3. sidebar_behavior: 2로 변경한다.

참고로 주석에 많은 설명들이 있으니 본인이 원하는 것으로 지정하면 되겠습니다.

cover 바꾸기

사이드바 영역의 이미지를 바꾸고 싶다면 아래와 같이 합니다.

1. themes/tranquilpeak/source/_images 에 원하는 이미지를 넣는다.
2. themes/tranquilpeak/_config.yml를 연다.
3. cover_image라고 쓰여진 부분을 찾는다.
4. cover_image: <파일명>으로 변경한다.

참고로 기본 커버이미지들은 1920x1080 입니다. 저는 일단 같은 사이즈의 이미지로 교체하였습니다.

font 바꾸기

이 프로젝트가 영문, 중문 등만 지원하다보니 한글 폰트가 매우 안타깝게 나타나는데요.
맘에 안드니 폰트를 교체해보도록 하겠습니다. 참고로 저의 경우 나눔스퀘어라운드를 사용하였습니다.
소스코드 폰트는 Source Code Pro입니다.

1. themes/tranquilpeak/source/_css/tranquilpeak.scss를 엽니다.
2. 파일 하단에 이것을 추가합시다.

   1 2	@import url(https://cdn.rawgit.com/innks/NanumSquareRound/master/nanumsquareround.css);

   cdn에 올라가있는 나눔폰트 관련 css를 import 해주었습니다.

다음은 기본 폰트 설정을 바꿔줘야합니다.

1. themes/tranquilpeak/source/_css/utils/_variables.scss를 열어봅시다.
2. Font families 부분을 아래와 같이 수정합시다. (불안하면 한 벌 복사해서 주석처리해둡시다.)

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

   // Font families $merriweather-serif: 'Merriweather', serif; // 이건 지우면 에러나더라고요 $nanum-sans-kr: 'NanumSquareRound', "Helvetica Neue", sans-serif; // 기본 폰트 $nanum-coding: 'Source Code Pro', "NanumSquareRound", Consolas; // 코드 폰트 $font-family-base: $nanum-sans-kr; // 기본폰트 바꾸기 // 아래처럼 'code'와 'highlight'만 코드 폰트로 변경하고 // 나머지는 전부 나눔스퀘어라운드로 변경합시다. $font-families: ( // base 'headings': $nanum-sans-kr, // components 'code': $nanum-coding, 'caption': $nanum-sans-kr, 'image-gallery': $nanum-sans-kr, 'post-header-cover': $nanum-sans-kr, 'post-meta': $nanum-sans-kr, 'post-content': $nanum-sans-kr, 'post-excerpt-link': $nanum-sans-kr, 'highlight': $nanum-coding, // layout 'sidebar': $nanum-sans-kr, );

사실 이렇게 해도 적용이 안되고 별도의 빌드 과정이 필요합니다.

grunt

grunt란 javascript기반의 빌드 툴이며, 테마 안의 css, js 등을 변경한 후에 필수적으로 진행해야 하는 작업입니다.

1
2
3
4

$ npm install -g grunt-cli

$ cd themes/tranquilpeak
$ npm install grunt --save-dev

초기 설정은 이렇게 하면 됩니다.
앞으로 테마 안의 css, js 등을 수정한 후엔 아래의 명령을 날립시다.

1

$ grunt build

그 후 hexo server를 구동시키면 폰트가 바뀌어있을 것입니다.

_config.yml 설정 변경

모든 것을 다룰 수는 없고 제가 편집한 내용만 보여드리겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# Site
title: "Devlog"
subtitle: "개발블로그"
description: "개발을 공부하고 기록합니다"
keywords:
author: "Daniel Yang"
language: "en"
timezone: ''Asia/Seoul"

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://honeykitten.github.io/
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: "git"
  repo: https://github.com/honeykitten/honeykitten.github.io
  branch: master

이렇게 설정하면 github pages의 master브랜치로 파일들이 배포됩니다.

배포하기

Github에 관련 페이지들을 배포하기 위해서는 git에 deploy용 라이브러리를 설치해야 합니다.

1

$ npm install hexo-deployer-git --save

이제 Github에 deploy를 해봅시다.

1

hexo deploy

테마 설정하기

테마도 필요한 부분은 바꾸어 줍니다.

1
2
3
4
5
6
7
8

# Site
sidebar:
    menu:
        home:
            title: global.home
            url: /
            icon: fa fa-home
    # ... 필요한 것들만 활성화 해주세요

더 필요한 부분은 Tranquilpeak 문서를 참고합니다.
icon에서 추가로 필요한 아이콘들은 fontawesome를 참고해서설정할 수 있습니다.

추가: 버그

1. title 클릭 시 깨짐 문제
포스트 상단의 header 를 클릭하면, home 이 동작해야 하는데 %20 관련 GET 에러가 뜹니다.

위 에러 관련 수정은 아래와 같습니다.

1
2
3
4
5
6
7
8
9

<div class="header-title">
    <a
        class="header-title-link"
        href="<%- url_for('') %>"
        aria-label="<% __('global.go_to_homepage') %>"
    >
        <%= config.title %>
    </a>
</div>

위 href 의 url_for(‘%20’) 부분을 'url_for(‘’) 로 변경하면 됩니다.