**라이벌(Rival)**은 동등 혹은 그 이상의 실력은 가진 경쟁자를 의미한다 적수라고도 한다.

위키백과

 라이벌이라는 존재는 존재 자체만으로 동기부여가 됩니다. 이번 포스트에서는 블로그를 시작하면서 생긴 라이벌 code block을 다뤄보도록 하겠습니다.

Prologue

Code Block

Before Patch

 aria 테마를 설치하고 처음 code block을 보고 이야 이거 물건이다라는 생각이 들었습니다. 뭐랄까 감성을 자극했다고 해야되나요? 쨌든 잘 다듬어서 써야겠다 라고 생각했습니다. 하지만 포스트 몇개를 올리게 되고, 블로그의 세팅을 변경하다보니 깨닫게 된 사실이 있었습니다.

초기 code block은 왼쪽 상단의 복사 버튼, 동작은 하지 않지만 우측 상단의 최소화, 최대화, 닫기 버튼이 있고, 작업 표시줄 부분엔 code라는 문자열이 고정되어 있습니다.

Another dead pixel

 그렇다면 무엇이 문제일까요. 눈치가 빠르신 분이라면 아시겠지만 code block의 제목 부분이 code로 고정되어있습니다. 한가지 더 문제점이 있는데 이는 Mark Down 파일 작성 시 code block에 파일명을 넣어서 작성하는 경우 입니다.

오늘 수고해주실 코드블럭입니다.

A wasted of Time

First step

사태 파악

 변경을 위해선 먼저 저 제목 부분이 어떤 tag를 달고 있는지 확인해야 합니다. chorme 개발자 도구를 활용해 봅시다.


확인해 보니 file name 부분은 figcaption tag를 사용하고 있고, title bar 부분은 div.code-titlebar tag를 사용하고 있습니다.

modify

 첫 삽질은 title bar에 code를 지우는 것이였습니다. 먼저 원본 코드를 보도록 하겠습니다.

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

<script defer type="text/javascript" src="{{ url_for("js/index.js") }}"></script>
<script type="text/javascript">
$(document).ready(function () {
  var cb = null;
  var els = $(".post figure.highlight");
  if (els.length) {
    // Enabled Hexo highlight line number.
    $(els).each(function (i, e) {
      // $(e).before("<button class=\"copy button\">{{ __("clipboard.copy") }}</button>");
      $(e).before([
        "<div class=\"code-titlebar\">",
          "<div class=\"titlebar-left\">",
            "<button class=\"copy\" aria-label=\"{{ __("clipboard.copy") }}\"><i class=\"far fa-copy\"></i></button>",
          "</div>",
          "<div class=\"titlebar-center\">",
            "{{ __("") }}", //"{{ __("code") }}",
          "</div>",
          "<div class=\"titlebar-right\">",
            "<button class=\"button-dot dot-minimize\" aria-label=\"Decoration\"></button>",
            "<button class=\"button-dot dot-maximize\" aria-label=\"Decoration\"></button>",
            "<button class=\"button-dot dot-close\" aria-label=\"Decoration\"></button>",
          "</div>",
        "</div>"
      ].join(""));
    });

16번째 줄을 보면 “code”문자열을 지우면 제목 표시줄의 code를 지울 수 있습니다.

제목 표시줄이 깔끔해졌습니다.

하지만 file name을 사용한다면 디자인이 구려집니다. 그렇다고 제목을 포기할 수는 없습니다. 저는 code block에 제목을 다는 법을 알게 되버렸으니까요.

Second step

사태파악

 두번째로 생각한 내용은 제목 표시줄에 표시할 수 없다면 file name css의 디자인을 code block에 맞추는 것이었습니다. 그리고 제목 표시줄 왼쪽에 copy 기능이 file name을 적으면 copy 기능이 제대로 동작하지 않는 버그도 발견했습니다. 아쉽게도 이번 step에서는 해당 버그를 고치진 못했고 버그가 있다는 것만 확인했습니다.

modify

 변경해야될 figcaption tag의 css파일을 찾을 수 없었기에 index.styl 파일에 추가했습니다.

1
2
3
4
5
6
7
8
9
10
11

figcaption{
  color: $color-code-titlebar-font;
  background: #4f5258;
  border-radius: $corner-radius;
  padding: 0.25em;
  padding-left: 1em;
  padding-right: 1em;
  position: relative;
  display: inline;
  text-align: center;
}

file name에 css가 적용되었습니다.

 한동안 figcaption에 css를 적용해 code block을 사용했습니다. 아무래도 front end 부분은 깊게 다뤄본 적이 없어서 지금 수준으론 문제를 해결할 수 없다고 판단해 공부를 더 했습니다.

The end

 시간이 날때마다 aria의 코드를 보고 나름 구조를 파악하다 보니 DOM의 사용법과 JS의 사용법 등을 실험하다보니 copy버그와 titebar를 수정 할 수 있었습니다.

Copy

 code block에 file name을 사용한다면 copy 기능이 왜 동작하지 않는지 알아야 했습니다. 수정 전의 원본 코드를 확인해보겠습니다.

1
2
3
4
5
6

cb = new ClipboardJS("button.copy", {
  "target": function (trigger) {
      // Get target element by DOM API.
      return trigger.parentNode.parentNode.nextElementSibling.firstChild.firstChild.firstChild.lastChild.firstChild.firstChild;
  }
});

해당 코드는 _layout.njk 파일의 일부입니다. copy button을 click하면 return에 해당하는 object를 clip board에 copy하는 기능을 가지고 있습니다. 해당 코드가 실행되면 file name이 없는 경우에는 정상적으로 copy하지만 file name이 있는 경우에는 아무런 동작을 하지 않습니다.

 file name이 있어도 code를 return 할 수 있도록 return 부분을 수정해 보도록 하겠습니다.

1
2
3
4
5
6
7

cb = new ClipboardJS("button.copy", {
  "target": function (trigger) {
      // Get target element by DOM cd API.
      return trigger.parentNode.parentNode.nextElementSibling.lastChild.lastChild.lastChild.lastChild;
      //return trigger.parentNode.parentNode.nextElementSibling.firstChild.firstChild.firstChild.lastChild.firstChild.firstChild;
  }
});

file name을 사용하더라도 code만 clip board에 복사 해 올 수 있습니다.

Title bar

 titlebar를 수정하면서 했던 삽질 중에 가장 기억에 남는 것은 code block의 모든 text를 읽어와서 조건문을 사용해 file name만 추출하는 방법이었습니다. 물론 code block 마다 조건문이 동작했기 때문에 포스팅에 code block이 많거나 code block의 text가 많다면 페이지 로딩 시간이 3~5초 길게는 10초 이상도 걸렸던 적이 있습니다.
 copy 기능의 버그를 수정하면서 했던 몇가지 실험을 성공해 title bar에도 적용할 수 있었습니다. 아래는 원본 코드의 일부분입니다.

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

$(document).ready(function () {
  var cb = null;
  var els = $(".post figure.highlight");
  if (els.length) {
    // Enabled Hexo highlight line number.
    $(els).each(function (i, e) {
      // $(e).before("<button class=\"copy button\">{{ __("clipboard.copy") }}</button>");
      $(e).before([
        "<div class=\"code-titlebar\">",
          "<div class=\"titlebar-left\">",
            "<button class=\"copy\" aria-label=\"{{ __("clipboard.copy") }}\"><i class=\"far fa-copy\"></i></button>",
          "</div>",
          "<div class=\"titlebar-center\">",
            "{{ __("code") }}",
          "</div>",
          "<div class=\"titlebar-right\">",
            "<button class=\"button-dot dot-minimize\" aria-label=\"Decoration\"></button>",
            "<button class=\"button-dot dot-maximize\" aria-label=\"Decoration\"></button>",
            "<button class=\"button-dot dot-close\" aria-label=\"Decoration\"></button>",
          "</div>",
        "</div>"
      ].join(""));
    });

$(e).before에서 e가 code block의 내용을 담고 있는 object라는 걸을 유추 할 수 있습니다. 그렇다면 e를 어떻게 지지고 볶으면 원하는 file name을 얻어 낼 수 있지 않을까 해서 조져봤습니다.

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
26
27
28
29
30
31

$(document).ready(function () {
      var cb = null;
      var els = $(".post figure.highlight");
      if (els.length) {
        // Enabled Hexo highlight line number.
        $(els).each(function (i, e) {
          var codeTitle = "";
          var codeContents = e.firstChild.innerText;
          // codeContents - 1 or file name
          if (codeContents[0] == 1){
            codeTitle = "CMD";
          }else{
            codeTitle = codeContents
          }
          // $(e).before("<button class=\"copy button\">{{ __("clipboard.copy") }}</button>");
          $(e).before([
            "<div class=\"code-titlebar\">",
              "<div class=\"titlebar-left\">",
                "<button class=\"copy\" aria-label=\"{{ __("clipboard.copy") }}\"><i class=\"far fa-copy\"></i></button>",
              "</div>",
              "<div class=\"titlebar-center\">",
                codeTitle,
              "</div>",
              "<div class=\"titlebar-right\">",
                "<button class=\"button-dot dot-minimize\" aria-label=\"Decoration\"></button>",
                "<button class=\"button-dot dot-maximize\" aria-label=\"Decoration\"></button>",
                "<button class=\"button-dot dot-close\" aria-label=\"Decoration\"></button>",
              "</div>",
            "</div>"
          ].join(""));
        });

추가한 코드에 대해 간략히 설명하면 다음과 같습니다

• codeTitle - code title이 저장될 변수
• codeContents - DOM을 저장할 변수
• if 문 - file name이 없다면 codeTitle에 “CMD”를 저장, file name이 없다면 codeTitle에 codeContents(file name)을 저장

 css를 적용했던 figcaption tag가 안보이도록 변경하겠습니다. 주의 사항으로는 visibility: hidden 속성을 주면 DOM에도 포함이 안되기 때문에 title bar에도 표시되지 않습니다. css를 다음과 같이 변경합니다.

1
2
3

figcaption {
  font-size: 0;
}

약간 편법 같지만 원하는 디자인으로 나와줄 것입니다.

원하던 모양으로 code block이 완성되었습니다. 상당히 마음에 듭니다.

Epilogue

 블로그 초기부터 꽤나 고치고 싶었던 부분이였는데 원하는 디자인으로 변경할 수 있어 상당히 뿌듯합니다.

 모니터를 샀을 때 가장 신경쓰이는 것은 불량화소 입니다. 불량화소가 10개가 넘어가면 아 불량품 받았네 하고 별 생각 없이 교환을 받거나 반품 받겠지만 불량화소가 1개, 2개 있다면 정말 난감해집니다. 괜히 신경쓰이고 그렇다고 이거 하나 때문에 바꿔야되나 싶고 내 뽑기운이 이정도 밖에 안되는건가? 하며 자괴감 들고 괴롭기도 합니다. 하지만 블로그는 다릅니다. 마음에 안드는 게 있다면 바꿀 수 있기 때문입니다. 이번 포스트에서는 불량화소 같은 것들을 바꿔보도록 하겠습니다.

Prologue

뭐가 그렇게 마음에 들지 않는걸까

???: 언니 저 맘에 안들죠?
!!!: 눈을 왜 그렇게 떠?

튜닝을 할꺼면 어중간하게 해서는 안됩니다. 마음에 들 때 까지 해야 꽤 오랜시간 신경 안쓰고 사용할 수 있기 때문입니다. 조금 쓰다가 이거 맘에 안든다고 바꿔버리고, 저거 맘에 안든다고 바꿔버리면 정작 본 작업에 집중 할 수 없게 되니까요.

이번에 바꿀 것들은 다음과 같습니다.

• Archive, Catetories, Tags 페이지의 문구
• 줄간격
• Scroll 두께

aria theme의 구조

 분해는 조립의 역순이라는 말의 뜻은 분해를 해봐야 다시 조립을 할 수 있다는 의미입니다. 그렇다고 하나하나 코드를 들여다 보기엔 시간도 별로 없고 귀찮기도 하고 그래서 간단하게 훑고 지나가겠습니다.

1
2
3
4
5
6
7
8
9
10

. # ./theme/aria/
├── languages      # blog 언어 파일
├── layout         # Nunjucks 파일
├── scripts        # tag에 사용할 정규 표현식 js 파일
├── source         # blog 디자인의 대부분을 담당하는 폴더
|   ├── css          # css 파일
|   └── fonts        # font 파일
|   └── images       # logo, background, avatar 이미지파일
|   └── js           # javascript 파일
├── some files

.njk 파일도 있으면서 css파일도 있고, scripts 폴더도 있으면서 js 폴더도 있는 신기한 구조지만 뭐 어쩌겠습니까. 제가 만든것이 아니기 때문에 이것만으로도 감지덕지 하면서 고쳐 써야죠.

 손댄 부분은 languages, layout, ./source/css이 세가지 부분 입니다. 간단한 부분부터 시작하겠으나 이번 경우엔 특히나 삽질을 많이 했던 부분입니다. 했던 삽질을 같이 첨부하고 싶지만 포스트가 너무 길어질것 같으니 다음 포스트로 작성하겠습니다.

Change

Archive, Categories, Tags 문구 변경

Whats the matter?

저는 깔끔한게 좋으니 치워버리겠습니다.

modify

1
2
3
4
5
6
7
8
9
10
11
12
13
14

postcount:
  none: '' #You have no post, write now!
  one: '' #You have %d post, keep on!
  more: '' #You have %d posts!

tagcount:
  none: '' #You have no tag, create now！
  one: '' #You have %d tag, keep on!
  more: '' #You have %d tags!

categorycount:
  none: '' #You have no category, create now!
  one: '' #You have %d category, keep on!
  more: '' #You have %d categories!

좋습니다. 하지만 아직도 지워야 할 것들이 있습니다. 지워보도록 합시다.

1
2
3
4
5
6
7
8
9
10
11
12
13

<div id="archive" class="archive page">
  <!--<h1 class="page-title">{{ __("archive") }}</h1>
   <h2 class="page-counter">
    {% if site.posts.length > 1 %}
    {{ _p("postcount.more", site.posts.length) }}
    {% elif site.posts.length === 1 %}
    {{ _p("postcount.one", site.posts.length) }}
    {% else %}
    {{ __("postcount.none") }}
    {% endif %}
  </h2> -->
  (...skip...)
</div>

1
2
3

<header class="post-header">
   <!--<h1 class="post-title" itemprop="name headline">{{ __(page.title) }</h1>-->
</header>

1
2
3

<header class="post-header">
  <!-- <h1 class="post-title" itemprop="name headline">{{ __(page.title) }}</h1> -->
</header>

 총 3개의 파일을 변경했습니다. 사실 njk파일들을 변경한다면 en.yml 파일은 변경하지 않아도 되긴 하지만 njk파일이 en.yml을 읽은 뒤 페이지를 렌더링 하기 때문에 혹시나 몰라서 변경해 두었습니다.

깔끔하니 보기 좋습니다. 파일 여러개를 수정해서 복잡한 것 같지만 주석 처리만 했기 때문에 어렵지 않습니다.

줄간격

Whats the matter?

 원래가 중국어 폰트를 사용하는 블로그라 그런지 줄간격이 좁았습니다. 특히 이 문제는 plan text와 inline block을 같이 사용할 때 발생하는 문제점이였습니다. 그리고 조절하는 김에 h1~h5 와 p, li tag의 간격도 조절했습니다.

바지 지퍼 올리다가 찝힌 기분입니다.

modify

 아프니 바로 바꿔보도록 하겠습니다.

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

.post-main {
  h1{
    line-height:1em;
    margin-block-start: 1.5em;
    margin-block-end: 0.2em;
  }
  h2{
    line-height:1em;
    margin-block-start: 0.6em;
    margin-block-end: 0.5em;
  }
  h3{
    line-height:1em;
    margin-block-start: 0.6em;
    margin-block-end: 0.2em;
  }
  p{
    line-height:1.5em;
    margin-block-start: 0.3em;
    margin-block-end: 0.7em;
  }
  (...skip...)
}

post.styl는 .post-main부분에 각 태그의 스타일을 추가해주면 됩니다.

1
2
3
4

li{
  margin-block-start: 0.2em;
  margin-block-end: 0.2em;
}

index.styl는 다른 tag와 겹치지 않는 선에서 마음에 드는 부분에 추가하면 됩니다.

Scroll 두께 조절

Whats the matter?

  기존 스크롤은 상당히 얇아서 마우스로 클릭하기가 힘들었습니다. 그래서 늘렸습니다.

modify

1
2
3
4

::-webkit-scrollbar {
  width: 0.8em;
  height: 0.4em;
}

해당 부분의 widht의 값을 조정하는 것으로 scroll bar의 두께를 조절할 수 있습니다. 마지막으로 code block까지 변경했으나 포스트의 길이 관계 상 다음 포스트로 작성하겠습니다.

마누라와 자식만 빼고 다 바꿔라

삼성전자 회장 - 이건희

 저는 마누라는 커녕 여자친구도 없으니 전부 바꿔보도록 하겠습니다.

Prologue

Aria Blog Sample

 sample은 aria theme을 만든 Alynx Zhou의 blog입니다. 취향은 존중해야 하니 변경할 부분들만 다시 확인하도록 하겠습니다.

변경할 부분

• Header 설정(blog 이름, Aria 로고 지우기)
• 메뉴바 설정
• 사이드바 설정
• Footer 설정(copy right 변경, github Pages 링크 변경)
• Fonts, Code Highlighting

Change Configuration file

Header Setting

Blog name

 일단 블로그의 이름을 먼저 바꿔줘야 합니다. 기껏 만들어놓고 대문에 남의 이름 써있으면 기분이 묘해집니다. 해당 설정은 hexo의 _config.yml파일을 수정합니다.

1
2
3
4
5
6
7
8

# Site
title: ColorLion's IT Blog
subtitle: EZ bloging
description:
keywords: ColorLion
author: ColorLion
language: en
timezone: Asia/Seoul

바꾸는 김에 timezone, language 등을 변경했습니다. 나머지는 적어둘만한 것이 생각나지 않아 생략했습니다.

Logo

 aria theme을 사용하긴 하지만 로고는 사용하기 애매한 부분이 있어 없애버렸습니다. 로고는 ./blog_root/theme/aria/_config.yml의 logo 부분을 주석 처리 해주는 것으로 없앨 수 있습니다.

1

#logo: images/logo.png

블로그의 header가 깔끔해졌습니다.

Menu bar Setting

 메뉴 부분에서는 home, archives, tags, categories 이 4가지만 사용할 것입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

menu:
- name: home
  link: /
  icon: <i class="fas fa-home"></i>
- name: archives
  link: archives/
  icon: <i class="fas fa-archive"></i>
- name: categories
  link: categories/
  icon: <i class="fas fa-th-list"></i>
- name: tags
  link: tags/
  icon: <i class="fas fa-tags"></i>
# - name: about
#   link: about/
#   icon: <i class="fas fa-user-edit"></i>

설정을 변경한 menu입니다. 4가지 항목을 사용했고, about 부분은 나중에 유명해 진다면 사용하는 걸로 합니다.쓰지 않겠다는 말입니다.

Create Tags page

 home과 archives는 블로그 theme 적용 시점부터 바로 사용할 수 있지만 categories와 tags는 따로 만들어 줘야 합니다. 먼저 tags 페이지를 만들어 봅시다.

1

$ hexo new page "tags"

생성된 tags 페이지의 index.md파일을 다음과 같이 변경합니다.

1
2
3
4
5

---
title: All tags
type: "tags"
#date: 2020-03-17 00:00:54
---

tag페이지가 정상적으로 동작하는 것을 확인할 수 있습니다.

Create Categories page

categories 페이지도 만들어 봅시다.

1

$ hexo new page "categories"

생성된 categories 페이지의 index.md파일을 다음과 같이 변경합니다.

1
2
3
4
5

---
title: Categories
type: "categories"
#date: 2020-03-17 00:10:41
---

categories 페이지 역시 잘 동작하는군요

만약 제대로 동작하지 않는다면 위의 _config.yml의 설정중 link 부분을 확인해보시길 바랍니다. 해당 경로는 /blog_root/themes/aria/가 아닌 /blog_root/source/ 에 존재하는 디렉토리로 지정됩니다.

Sidebar Setting

 Sidebar는 없애기로 결정했습니다. 올려둘만한 프로필 사진도 없고, 링크를 걸어둘만한 사이트도 없기 때문입니다.

1
2

# `left`, `right`, `false`
sidebar: false

초라하게 있는 것 보단 없는게 더 깔끔해 보입니다. 미니멀리즘이 이런건가?라고 생각해보는 시간이었습니다.

Footer Setting

Footer Information

 github 페이지 링크를 변경하는 작업입니다.

1
2

# Custom info in footer.
custom_info: github<i class="fab fa-github-alt"></i><a href="https://github.com/ColorLion" target="_blank">GitHub Pages</a>

완성입니다.

Fonts/Code Highlighting Setting

Change Fonts

 기본 font를 사용한다면 영어는 적용되지만 한글이 적용이 안되기 때문에 변경해주도록 하겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13

# Select all your webfont in a CDN like Google Fonts, and then copy `href` property in the `<link>` tag, like `link: //fonts.googleapis.com/css?family=Lato|Roboto+Condensed|Skranji|Ubuntu|Ubuntu+Mono`.
# Then set different fonts to different parts here.
custom_font:
  enable: true
  link:
   - //cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css
   - //cdn.rawgit.com/innks/NanumSquareRound/master/nanumsquareround.css
   - //cdn.jsdelivr.net/gh/joungkyun/font-d2coding/d2coding.css
  all: 'NanumSquare'
  title: 'NanumSquare'
  subtitle: 'NanumSquare'
  main: 'NanumSquareRound'
  code: 'D2Coding'

개인적으로 naver의 폰트를 정말 좋아합니다. 가독성도 좋고 둥글 둥글 하니 귀엽기도 한 것같고 그렇습니다.

Change Code Highlighting

 저는 code highlignting은 무조건 atom-one-dark theme을 사용합니다. vscode도 그렇고 theme를 변경할 수 있다면 대부분 atom-one-dark를 사용합니다.

1
2

# Available: atom-one-dark | atom-one-light | solarized-dark | solarized-light
highlight: atom-one-dark

aria theme을 사용하게 된 가장 큰 이유중 하나가 atom-one-dark를 사용할 수 있고, 가장 잘 어울렸기 때문입니다.

튜닝의 끝은 순정이다

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

라는 말이 있습니다. 이 말은 튜닝을 해봐야 순정의 좋은점을 알게 된다는 의미가 아닐까라는 생각이 들어 블로그의 테마를 변경해봤습니다. 이번 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

필수

1

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

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

선택

1

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

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

Install Themes

1

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

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

Modify Configuration

blog’s _config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13

# 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

1

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

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

참조

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

blog를 꾸미기 위해서는 먼저 post를 작성하는 방법을 알아야 합니다. 작성보다 더 중요한 것은 삭제와 변경입니다. 나름 공부를 하고 post를 썼지만 해당 글이 잘못된 정보를 전파하는 똥글이 되버린다면 아 내가 이런 똥글을 썼다고? 인 상황이 발생할 수 있으니까요.

Posting

Writing

1

hexo new [layout] <title>

post, draft, page를 생성하기 위한 명령어입니다. 저는 post를 쓸 때 한번에 쓰는 법이 없기 때문에 draft로 작성 후 post로 publish합니다. draft에 대한 설명은 아래를 참고해 주세요.

Modify the Post

1
2

# source/_posts에서 .md파일 변경 후
hexo g -d

post의 내용을 변경하는 방법은 매우 간단합니다. 기존에 작성한 post파일을 수정하기만 하면 됩니다. 변경 후 다시 랜더링이 필요합니다.

Delete

1
2

# source/_posts에서 .md파일 삭제 후
hexo g -d

post를 삭제하는 방법은 변경 방법과 동일합니다. source/_posts 폴더에 삭제하고자 하는 post 파일(.md)을 삭제한 후 deploy 하면 됩니다.

layout

Hexo에는 Layout이라는 개념이 존재합니다. 각 Layout의 이름과 저장되는 위치는 다음과 같습니다.

• post(게시글) : source/_posts
• page(페이지) : source/
• draft(초안) : source/_draft

저는 주로 post와 draft를 사용해 글을 작성합니다. page는 제가 post를 만들면서 한번도 사용해 보진 않았습니다. 앞으로도 사용할 일은 없을 것 같습니다.

1

default_layout = post   # (page/draft)

default layout은 post입니다. default layout을 변경하고자 할 땐 _config.yml의 default_layout 수정하면 됩니다.

Draft

1

hexo new draft <title>

draft는 post를 작성할 때 임시 저장의 개념으로 사용할 수 있습니다. Draft로 작성 한 파일은 랜더링 되지 않습니다. 제가 블로그에 post를 작성할 때 맨 처음 생성하는 파일입니다.

1

hexo g -d --draft

draft도 랜더링 하고자 할 땐 랜더링 시 --draft옵션을 추가 해주면 됩니다.

1

render_drafts = true

_config.yml의 render_drafts 옵션을 true로 설정하면, --draft 옵션 없이 랜더링 해도 draft가 같이 랜더링 됩니다.

1

hexo publish post <title>

작성이 완료된 draft를 post로 변경하는 방법입니다. 이 명령어를 칠 때가 가장 뿌듯합니다.

파일명

post의 제목과 동일하게 작성됩니다. _config.yml파일의 new_post_name 옵션을 변경 해 기본 파일명을 변경할 수 있습니다.

사용할 수 있는 placeholder는 다음과 같습니다

• :title - post 제목(소문자, 공백은 ‘-‘ 하이픈으로 변경)
• :year - 연도 생성
• :month - 월 생성(ex. 04)
• :i_month - 월 생성(ex. 4)
• :day - 일 생성(ex. 07)
• :i_day - 일 생성(ex. 7)

Asset Folder

전역 Asset 폴더

1

![](/images/image.jpg)

source 폴더에 위치해 있으며 image, CSS, JavaScript가 저장되는 폴더입니다.
포스트에서 이미지를 사용하고싶을 땐 /source/image 폴더에 이미지를 넣고 다음과 같이 호출하면 이미지를 사용할 수 있습니다.

Post Asset 폴더

1

post_asset_folder = true

post 단위로 멀티미디어 파일을 관리하고자 할 땐 _config.yml 파일의 post_asset_folder를 true로 설정하면 포스트 생성 시 동일한 이름의 폴더가 생성됩니다. 해당 폴더는 각 포스트의 Asset 폴더로 사용됩니다.
저는 늘어가는 post와 함께 증식해가는 image의 이름을 구분해 저장하는 것은 매우 귀찮을 것 같아 Post Asset 폴더를 사용했습니다.

참조

• Hexo Documentation

blog를 꾸미기 위해서는 먼저 post를 작성하는 방법을 알아야 합니다. 작성보다 더 중요한 것은 삭제와 변경입니다. 나름 공부를 하고 post를 썼지만 해당 글이 잘못된 정보를 전파하는 똥글이 되버린다면 아 내가 이런 똥글을 썼다고? 인 상황이 발생할 수 있으니까요.

Posting

Writing

1

hexo new [layout] <title>

post, draft, page를 생성하기 위한 명령어입니다. 저는 post를 쓸 때 한번에 쓰는 법이 없기 때문에 draft로 작성 후 post로 publish합니다. draft에 대한 설명은 아래를 참고해 주세요.

Modify the Post

1
2

# source/_posts에서 .md파일 변경 후
hexo g -d

post의 내용을 변경하는 방법은 매우 간단합니다. 기존에 작성한 post파일을 수정하기만 하면 됩니다. 변경 후 다시 랜더링이 필요합니다.

Delete

1
2

# source/_posts에서 .md파일 삭제 후
hexo g -d

post를 삭제하는 방법은 변경 방법과 동일합니다. source/_posts 폴더에 삭제하고자 하는 post 파일(.md)을 삭제한 후 deploy 하면 됩니다.

layout

overview

Hexo에는 Layout이라는 개념이 존재합니다. 각 Layout의 이름과 저장되는 위치는 다음과 같습니다.

• post(게시글) : source/_posts
• page(페이지) : source/
• draft(초안) : source/_draft

저는 주로 post와 draft를 사용해 글을 작성합니다. page는 제가 post를 만들면서 한번도 사용해 보진 않았습니다. 앞으로도 사용할 일은 없을 것 같습니다.

1

default_layout = post   # (page/draft)

default layout은 post입니다. default layout을 변경하고자 할 땐 _config.yml의 default_layout 수정하면 됩니다.

Draft

1

hexo new draft <title>

draft는 post를 작성할 때 임시 저장의 개념으로 사용할 수 있습니다. Draft로 작성 한 파일은 랜더링 되지 않습니다. 제가 블로그에 post를 작성할 때 맨 처음 생성하는 파일입니다.

1

hexo g -d --draft

draft도 랜더링 하고자 할 땐 랜더링 시 --draft옵션을 추가 해주면 됩니다.

1

render_drafts = true

_config.yml의 render_drafts 옵션을 true로 설정하면, --draft 옵션 없이 랜더링 해도 draft가 같이 랜더링 됩니다.

1

hexo publish post <title>

작성이 완료된 draft를 post로 변경하는 방법입니다. 이 명령어를 칠 때가 가장 뿌듯합니다.

파일명

post의 제목과 동일하게 작성됩니다. _config.yml파일의 new_post_name 옵션을 변경 해 기본 파일명을 변경할 수 있습니다.

사용할 수 있는 placeholder는 다음과 같습니다

• :title - post 제목(소문자, 공백은 ‘-‘ 하이픈으로 변경)
• :year - 연도 생성
• :month - 월 생성(ex. 04)
• :i_month - 월 생성(ex. 4)
• :day - 일 생성(ex. 07)
• :i_day - 일 생성(ex. 7)

Asset Folder

전역 Asset 폴더

1

![](/images/image.jpg)

source 폴더에 위치해 있으며 image, CSS, JavaScript가 저장되는 폴더입니다.
포스트에서 이미지를 사용하고싶을 땐 /source/image 폴더에 이미지를 넣고 다음과 같이 호출하면 이미지를 사용할 수 있습니다.

Post Asset 폴더

1

post_asset_folder = true

post 단위로 멀티미디어 파일을 관리하고자 할 땐 _config.yml 파일의 post_asset_folder를 true로 설정하면 포스트 생성 시 동일한 이름의 폴더가 생성됩니다. 해당 폴더는 각 포스트의 Asset 폴더로 사용됩니다.
저는 늘어가는 post와 함께 증식해가는 image의 이름을 구분해 저장하는 것은 매우 귀찮을 것 같아 Post Asset 폴더를 사용했습니다.

참조

• Hexo Documentation

예전부터 카카오 기술 블로그나 네이버 D2 기술 블로그의 글들을 보면서 블로그를 시작해 보고싶었습니다. 처음부터 멋진 글을 쓰는 것은 불가능하다는 것을 잘 알기에 포스트를 하나하나 늘려가는 것 부터 시작하는 것을 목표로 삼고 시작하고자 합니다.

설치 전에

블로그를 시작할 때 고려한 것들

블로그를 시작하면서 Jekyll, Octopress 같은 정적 사이트 생성기(Static Site Generator)를 사용할지, 네이버 블로그, Tistory같은 블로그 플랫폼을 사용해야 하는가에 대한 고민을 했습니다. 이런 고민을 하다 보니 어떤 것을 사용해야 할지 감이 잡히지 않아 블로그를 만들 때 생각해 봐야 할 것들을 목록화 했습니다.

• 마크다운(Markdown) 언어를 사용할 수 있는가?
• 포스트 생성 및 관리가 간편한가?
• 호스팅 비용은 무료거나 저렴한 편인가?
• 내 기준으로 설치와 커스터마이징이 간편한가?

위의 기준을 가지고 후보군을 찾았고 이들 중에서 제 기준에 가장 적합한 것을 사용하는 것으로 사용하자고 했고. 결론부터 말하면 Github + Hexo로 블로그 구축을 결정했습니다.

• Github + (jekyll or Hexo)
• Wordpress
• Tistory

왜 Hexo를 사용했나?

제 기준에 있어서 설치와 커스터마이징이 쉽다는 것이 크게 작용했습니다. jekyll은 ruby on rails를 기반으로 하기에 커스터마이징과 코드를 수정하기 위해서 따로 공부를 해야 하지만 Hexo는 node.js를 사용하기 때문에 추가적인 공부가 필요 없었기 때문입니다. 그와 더불어 Hexo 공식문서가 한글로 번역되어 있다는 점, 플러그인 적용이 쉽다는 것도 선택의 이유가 되었습니다.

Install

설치 환경은 다음과 같습니다

• windows10 버전 1903
• git version 2.22.0.windows.1
• node.js v10.16.3

Hexo 설치는 Git과 node.js가 설치되어 있었기에 npm을 사용해 설치했습니다.

1

C:\Users\ColorLion> npm install -g hexo-cli

Init

블로그를 저장할 폴더와 블로그의 기본 구조를 만들었습니다.

1
2
3

C:\Users\ColorLion> hexo init Blog
C:\Users\ColorLion> cd Blog
C:\Users\ColorLion> npm install

생성된 구조는 다음과 같습니다.

1
2
3
4
5
6
7
8

. # 프로젝트 루트 폴더(./Blog)
├── _config.yml    # 설정 파일
├── package.json  
├── scaffolds      # 스캐폴드(양식)
├── source         # 소스 폴더
|   ├── _drafts        # 초안
|   └── _posts         # 포스트
└── themes         # 테마 폴더

Local Server로 확인

1
2
3

c:\Work\Blog> hexo server
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

localhost:4000으로 접속하면 블로그가 만들어진 것을 확인할 수 있습니다.

Deploy

배포는 github의 pages기능을 사용했습니다.

블로그 배포용 github repo 만들기

주의사항

• repo의 이름은 [username].github.io로 만들어야 합니다.

Deploy Setting

빌드된 결과물을 deploy하기 위해 hexo-deployer-git 플러그인을 설치하고 repo를 설정했습니다.

hexo-deployer-git 플러그인 설치

1

C:\Work\Blog> npm install hexo-deployer-git --save

블로그 설정파일(_config.yml) 설정

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# Site
title: ColorLion's IT Blog
subtitle: Sec & ML & Dev
description:
keywords: Security, Machine Learning, Programming
author: ColorLion
language: en
timezone: Asia/Seoul

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/ColorLion/ColorLion.github.io.git

배포

1
2

C:\Work\Blog> hexo generate
C:\Work\Blog> hexo deploy

배포 확인

참조

• Hexo Documentation
• 워드프레스보다 쉬운 Hexo 블로그 시작하기

Headers

문서 제목(Title)

1
2

이것은 문서 제목입니다 h1 태그와 동일합니다
=====================

이것은 문서 제목입니다 h1 태그와 동일합니다

문서 부제목(Sub title)

1
2

이것은 문서 부제목입니다 h2 태그와 동일합니다
----------------------

이것은 문서 부제목입니다 h2 태그와 동일합니다

글머리(h1 ~ 6))

1
2
3
4
5
6

# 이것은 h1 입니다
## 이것은 h2 입니다
### 이것은 h3 입니다
#### 이것은 h4 입니다
##### 이것은 h5 입니다
###### 이것은 h6 입니다

이것은 h1 입니다

이것은 h2 입니다

이것은 h3 입니다

이것은 h4 입니다

이것은 h5 입니다

이것은 h6 입니다

Block Quote

블록 인용 문자 > 를 사용한다

1

> 이것은 블록인용 문자 입니다

이것은 블록인용 문자 입니다

중첩해서 사용이 가능하다

1
2
3

> 이것은 첫 번째 블록인용 문자 입니다
>> 이것은 두 번째 블록인용 문자 입니다
>>> 이것은 세 번째 블록인용 문자 입니다

이것은 첫 번째 블록인용 문자 입니다

이것은 두 번째 블록인용 문자 입니다

이것은 세 번째 블록인용 문자 입니다

인용문 안에 다른 Markdown 요소를 넣을 수 있다

1
2

> ##### 이것은 인용문 안의 h5 태그 입니다
>> ~~~이것은 인용문 안의 코드블록 입니다~~~

이것은 인용문 안의 h5 태그 입니다

this is code block

목록

순서 있는 목록(번호)

1
2
3

1. first
2. second
3. third

1. first
2. second
3. third

어떤 번호를 입력해도 내림차순으로 정렬된다

1
2
3

1. first
3. third
2. second

1. first
2. third
3. second

순서 없는 목록(글머리 기호)

1
2
3
4
5
6
7
8
9
10
11

- first
    - second
        - third

+ first
    + second
        + third

* first
    * second
        * third

• first
  • second
    • third

• first
  • second
    • third

• first
  • second
    • third

• 깊이를 조절하기 위해 tap을 사용한다

혼합해서 사용하는 것도 가능하다

1
2
3

1. first
    2. second
        3. third

1. first
   2. second
      3. third

Code

Code Blocks

코드 첫줄과 마지막 줄에 ``` 혹은 ~~~을 붙여 사용한다

1
2
3
4
5

```
   이것은
   코드 코드블럭
   입니다
```

1
2
3

이것은
코드 코드블럭
입니다

1

array.map(callback[, thisArg])

언어 자동 식별 기능을 통해 코드 하이라이팅이 가능하다

1
2
3
4
5

```python 
import os

print(os.path)
```

1
2
3

import os

print(os.path)

Inline code block

1

`인라인 코드 블록`

인라인 코드 블록

강조 Emphasis

기울여 쓰기(italic)

1
2

*기울여 쓰고싶은 것*
_기울여 쓰고 싶은 것_

기울여 쓰고싶은 것
기울여 쓰고 싶은 것

굵게 쓰기(bold)

1
2

**굵게 쓰고 싶은 것**
__굵게 쓰고 싶은 것__

굵게 쓰고 싶은 것
굵게 쓰고 싶은 것

취소선

1

~~취소선 입니다~~

취소선 입니다

수평선<hr>

1
2
3

---
***
___

윗첨자

1

이것은 윗첨자<sup>입니다</sup>.

이것은 윗첨자^입니다.

아랫첨자

1

이것은 아랫첨자<sub>입니다</sub>.

이것은 아랫첨자_입니다.

링크(link)

외부 링크(External links)

인라인 링크

1

[ColorLion](https://ColorLion.github.io)

ColorLion
참조 링크

1
2
3
4
5

[ColorLion][1]
[google][2]

[1]:https://ColorLion.github.io"ColorLion"
[2]:https://google.com "구글"

ColorLion
google

• 링크와 아래 참조 부분을 띄워야 한다

URI 링크

1
2

<https://ColorLion.github.io>
<example@email.com>

https://ColorLion.github.io
example@email.com

내부 링크(Internal Link)

1

[내가 보려고 만든 사용법](https://colorlion.github.io/2019/10/21/Markdown-%EC%82%AC%EC%9A%A9%EB%B2%95/)

내가 보려고 만든 사용법

• 뭐 원하는 그림은 아니지만 어떻게든 됐다

테이블(Table)

테이블 생성

1
2
3
4

Header1 | Header2
--------|--------
Content1 | Content2
Content3 | Content4

테이블 정렬

1
2
3

Header1 | Header2 | Header3
:------- | :-------: | -------: 
Left | center | right

이미지

인라인 이미지

1

![이미지 텍스트](/img/Markdown-사용법/cap.png)

링크 이미지

1

![이미지 텍스트](https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png)

기타

이스케이프

1
2
3

\*
\\
\_

*
\
__