Hexo 블로그 관리를 뜨문뜨문하다 보니 Hexo 관련 명령어 등을 까먹는다

Commands

Generate

1
2
hexo generate
hexo g

정적 파일들을 생성합니다.

옵션 설명
-d, --deploy 생성이 종료된 후 deploy 합니다.
-w, --watch 파일의 변경사항을 감시(watch)합니다.

Deploy

1
2
hexo deploy
hexo d

웹 사이트를 deploy 합니다.

옵션 설명
-g, --generate Deploy 하기 전에 generate를 수행합니다.

Clean

1
2
hexo clean
hexo c

캐시 파일 (db.json) 및 생성된 파일들 (public) 을 삭제합니다.

Basic Usage

Writing

1
hexo new [layout] <title>

post 는 기본 layout입니다. 하지만 _config.yml 파일의 default_layout 설정을 변경하여 당신이 만든 것으로 변경할 수 있습니다.

레이아웃 경로
post source/_posts
page source
draft source/_drafts

Front-matter

YAML

1
2
title: Hello World  
date: 2013/7/13 20:46:25

JSON

1
2
"title": "Hello World",  
"date": "2013/7/13 20:46:25"
설정 설명 기본 값
layout 레이아웃
title 타이틀 Filename (posts only)
date 발행일 파일이 생성된 날짜
updated 갱신일 파일이 업로드된 날짜
comments 포스트에서 comment 기능을 사용할지 여부 true
tags 태그 (page에서는 사용 불가능)
categories 카테고리 (page에서는 사용 불가능)
permalink 포스트의 기본 permalink를 override합니다. 
1
2
3
4
5
6
7
categories:  
- Sports  
- Baseball  
tags:  
- Injury  
- Fight  
- Shocking

Tag Plugins

태그 플러그인은 포스트의 태그와는 다릅니다. Octopress로부터 가져온 것으로 특별한 컨텐츠를 당신의 포스트에 빠르게 추가할 수 있도록 도와주는 유용한 방법입니다.

Block Quote

인용구를 post, 소스, 제목에 추가하기 위한 완벽한 방법입니다. 옵션으로 인용구의 원작자를 추가할 수도 있습니다.

Alias: quote

1
2
3
{% blockquote [author[, source]] [link] [source_link_title] %}  
content  
{% endblockquote %}

인자가 없는 일반 인용

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lacus ut purus iaculis feugiat. Sed nec tempor elit, quis aliquam neque. Curabitur sed diam eget dolor fermentum semper at eu lorem.

책 인용하기

Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.

David LevithanWide Awake

웹 게시물 인용하기

Every interaction is both precious and an opportunity to delight.

Code Block

코드 조각(snippet)을 포스트에 추가할 수 있는 유용한 기능입니다.
Alias: code

1
2
3
{% codeblock [title] [lang:language] [url] [link text] [additional options] %}  
code snippet  
{% endcodeblock %}

언어 지정하기

1
[rectangle setX: 10 y: 10 width: 20 height: 20];

Code block에 제목 넣기

Array.map
1
array.map(callback[, thisArg])

제목과 URL 넣기

_.compactUnderscore.js
1
2
_.compact([0, 1, false, 2, '', 3]);  
=> [1, 2, 3]

Pull Quote

pull 인용을 추가하기 위한 방법은 다음과 같습니다.

1
2
3
{% pullquote [class] %}  
content  
{% endpullquote %}

jsFiddle

jsFiddle을 포함시킬 수 있습니다.

1
{% jsfiddle shorttag [tabs] [skin] [width] [height] %}

Gist

Gist를 포함시킬 수 있습니다.

1
{% gist gist_id [filename] %}

iframe

iframe을 포함시킬 수 있습니다.

1
{% iframe url [width] [height] %}

Image

이미지의 사이즈를 지정하여 포함시킬 수 있습니다.

1
{% img [class names] /path/to/image [width] [height] '"title text" "alt text"' %}

target="_blank" 속성으로 링크를 포함시킬 수 있습니다.

1
{% link text url [external] [title] %}

Include Code

source/downloads/code 폴더에 있는 코드를 포함시킬 수 있습니다.

1
{% include_code [title] [lang:language] path/to/file %}

YouTube

YouTube video를 포함시킬 수 있습니다.

1
{% youtube video_id [type] [cookie] %}

tranquilpeak

tranquilpeak theme 관련 내용

Alert

Alert tag is useful to highlight a content like a tips or a warning

1
2
3
{% alert [classes] %}
content
{% endalert %}

Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna.

Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna.

Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna.

Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna.

Highlight Text

Highlight text tag is useful to highlight an interesting part in a text

1
2
3
{% hl_text [(classes | hexa code | rgb color | rgba color)] %} 
content
{% endhl_text %}
highlight red dignissim ultrices libero. Sed imperdiet urna et quam ultrices tincidunt nec ac magna. Etiam vel pharetra elit.highlight green dignissim ultrices libero. Sed imperdiet urna et quam ultrices tincidunt nec ac magna. Etiam vel pharetra elit.highlight blue dignissim ultrices libero. Sed imperdiet urna et quam ultrices tincidunt nec ac magna. Etiam vel pharetra elit.highlight purple dignissim ultrices libero. Sed imperdiet urna et quam ultrices tincidunt nec ac magna. Etiam vel pharetra elit.highlight orange dignissim ultrices libero. Sed imperdiet urna et quam ultrices tincidunt nec ac magna. Etiam vel pharetra elit.highlight yellow dignissim ultrices libero. Sed imperdiet urna et quam ultrices tincidunt nec ac magna. Etiam vel pharetra elit.highlight cyan dignissim ultrices libero. Sed imperdiet urna et quam ultrices tincidunt nec ac magna. Etiam vel pharetra elit.highlight primary dignissim ultrices libero. Sed imperdiet urna et quam ultrices tincidunt nec ac magna. Etiam vel pharetra elit.highlight success dignissim ultrices libero. Sed imperdiet urna et quam ultrices tincidunt nec ac magna. Etiam vel pharetra elit.highlight warning dignissim ultrices libero. Sed imperdiet urna et quam ultrices tincidunt nec ac magna. Etiam vel pharetra elit.highlight danger dignissim ultrices libero. Sed imperdiet urna et quam ultrices tincidunt nec ac magna. Etiam vel pharetra elit.

Tabbed code block

Tabbed code blocks are useful to group multiple code blocks related. For example, the source code of a web component (html, css and js). Or compare a source code in different languages.

1
2
3
4
5
{% tabbed_codeblock [name] [link] %}
<!-- tab [lang] -->
	source code
<!-- endtab -->
{% endtabbed_codeblock %}
example
  • js
  • css
1
2
3
function testFunc(a, b) {  
    console.log('hellow');
}

Wide image

Wide image tag is useful to display wide images in full width. It takes entire window width

1
{% wide_image /path/to/image [title text] %}
A beautiful sunriseA beautiful sunrise