hexo blog 테마 변경하기 1

튜닝의 끝은 순정이다

튜닝의 튜닝을 거듭한 사람 - 순정파(곽철용)

라는 말이 있습니다. 이 말은 튜닝을 해봐야 순정의 좋은점을 알게 된다는 의미가 아닐까라는 생각이 들어 블로그의 테마를 변경해봤습니다. 이번 post에서는 테마를 바꾸면서 하게된 여러가지 삽질에 대해 적어보도록 하겠습니다.

Prologue

어떤 Theme을 적용해야 할까

기존 테마

 이전 post를 보고 오셨다면 hexo의 default theme가 어떻게 생겼는지 어느정도 확인하셨을겁니다. 깔끔하니 좋은 듯 하지만 썩 마음에 들진 않으니 바꿔보도록 하겠습니다.

테마를 고르는 기준

 무언가를 바꾸기 위해서는 기존의 것과 다른 차별점이 있어야 합니다. 기껏 좋아보여서 바꿨는데 이전 것과 똑같으면 뭐하러 움직였나 하면서 괜히 기분만 나쁘기 때문입니다.

theme 선택 시 중요하게 했던 것은 크게 3가지 입니다.

• 디자인이 너무 과하지 않을 것
• 영어 문서가 있을 것
• 필요한 기능(댓글, google analytics, code block의 highlighting 지원 등)

다음과 같은 기준으로 hexo themes에서 후보군을 정했습니다.

• Aria
• Alpha Dust
• Archer

 결론부터 말하자면 Aria로 변경했습니다. 영어를 지원하고 가장 무난했으며 무엇보다 code block의 디자인이 정말 마음에 들었습니다. 솔직히 code block의 디자인만 보고 결정했습니다.

 Alpha Dust는 특유의 중2병스러운 감성과 깔끔함이 마음에 들었지만 blog에 적용했을 때 code block high lighting이 정상 동작하지 않는 치명적인 단점이 있었습니다. 또한 최근 업데이트도 없는 것으로 보아 포기하게 되었습니다.

 Archer는 code block과 Theme 자체는 깔끔했으나 제가 원하는 깔끔함이 아니였습니다. 본인 옷을 이렇게 신경 썼으면 알바하러 나가면서 츄리닝을 입고 나가진 않았을 것입니다.

Change Theme

 본격적으로 theme를 변경해 보도록 하겠습니다. 과정은 간단하며, theme에 필요한 패키지 설치, blog의 _conifg.yml 변경 순으로 진행됩니다.

Install Packages

필수

$ npm install --save hexo-renderer-njucks hexo-renderer-stylus

 JavaScript template인 nunjucks와 CSS pre-processor인 stylus를 설치하는 명령어 입니다. Aria는 해당 두 패키지를 사용해 랜더링 되기 때문에 필수적으로 설치해야 합니다.

선택

$ npm install --save hexo-generator-search hexo-generator-feed

 해당 패키지들은 블로그 내에서 검색과 RSS feed를 만들어주는 패키지입니다. 저는 굳이 필요 없다고 생각했기 때문에 설치하지 않았습니다.

Install Themes

$ git clone https://github.com/AlynxZhou/hexo-theme-aria themes/aria

 자신이 설정한 blog root에서 theme를 다운받습니다. 특이사항은 없습니다. 사실 post의 길이를 위해서 상당히 많은 헛소리를 했습니다.

Modify Configuration

blog’s _config.yml

./_config.yml

# theme change
theme: aria

# language
language: en

# highlighting setting
highlight:
  enable: true
  hljs: true
  line_number: true
  auto_detect: true
  tab_replace:

 theme를 변경하면서 기본적인 설정도 변경했습니다. 언어는 설정하지 않으면 default language인 중국어로 표시될 것이고, highlighting 설정을 하지않으면 이 theme을 쓰는 이유가 없어지게 되니 설정하도록 합시다. 그 밖에 다른 설정을 변경하시는 분들은 hexo documenation을 참조하시기 바랍니다.

create aria’s _config.yml

$ cp ./theme/aria/_config.yml.example ./theme/aria/_config.yml

 aria의 configuration file을 만들어 줍니다. aria의 설정을 변경하고자 할 때 사용하는 파일입니다.

---

참조

• Hexo Documentation
• Alpha Dust Demo Page
• Aria Demo Page