Hexo 기본 사용법

Hexo 는 이전 포스트 에서 알아본 간단한 커맨드만 있어도 충분히 사용 가능합니다. 하지만 Hexo 는 편하게 블로깅할 수 있는 여러가지 기능을 제공합니다. 이번 포스트에서는 기본적인 사용법을 좀 더 자세히 알아보겠습니다. 알아볼 기능들은 다음과 같습니다.

• 스캐폴딩을 기반으로 초안을 생성
• 본문을 작성할 때 사용할 수 있는 태그 플러그인
• 작성을 완료한 후에 퍼블리쉬
• 자원은 전역/ 포스트 폴더에서 관리
• 로컬 서버에서 테스트
• 정적 파일 생성과 배포

포스팅하기 (Writing)

마크다운 파일 생성하기

마크다운을 작성할 파일을 만드는 것부터 시작합니다. 다음 명령어를 통해 작성할 마크다운 파일이 해당 경로에 생성됩니다.

$ hexo new [layout] <title>

• layout : 기본 레이아웃은 3가지 종류가 있고 각기 다른 경로에 보관됩니다.
  • post
  • page
  • draft
  • layout 을 생략할 경우 post 로 생성됩니다.
• title : 파일 제목을 입력합니다.

레이아웃 (Layout)

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

포스트 (Post)

홈페이지에 게시가 되는 기본적인 글입니다. 블로그에 새 글을 작성하는 것이라고 볼 수 있습니다. 기본 레이아웃이라서 레이아웃 종류를 입력하지 않아도 포스트로 자동 인식합니다. 기본 레이아웃은 _config.yml 의 default_layout 항목에서 변경 가능합니다.

페이지 (Page)

포스트처럼 새 글을 추가하는 것이 아니라 해당 경로로 접근해야 볼 수 있는 페이지를 작성할 때 사용합니다.

초안 (Draft)

draft 는 바로 게시하지 않고 작성할 수 있는 초안입니다. 따라서 포스트를 작성할 때 먼저 초안으로 작성하고, 다 작성한 후에 publish 명령어로 배포하는 형식으로 게시할 수 있습니다. 여러 개의 포스트를 작성 중일 때, 바로 반영 안할 포스트는 로컬에 따로 저장해놨다가 나중에 복붙하는 작업이 귀찮았는데 그럴 필요가 없었군요.

저는 초안을 자주 사용해서 draft 를 기본 레이아웃으로 변경했습니다. _config.yml 의 default_layout 을 draft 로 변경하면, hexo new <title> 로 생성했을 때 포스트가 아닌 드래프트가 만들어집니다.

하지만 작업하면서 실제 화면에서 어떻게 보일지 궁금합니다. 로컬 서버 돌릴 때 --draft 옵션을 주면 로컬서버에서 draft 로 작성한 것도 확인할 수 있습니다.

$ hexo server --draft

매번 이렇게 실행하는 것이 귀찮으시다면, _config.yml 파일에서 render_drafts 항목을 true 로 주시면 됩니다. 하지만 이 경우에는 원격 서버에도 초안이 드러나기 때문에 굳이 이렇게 설정할 필요는 없을 것 같네요.

_config.yml

# Writing
render_drafts: true

파일명

$ hexo new [layout] <title>

여기서 입력하는 title 이 기본적으로 파일명이 됩니다. 파일명이 곧 페이지의 url 이 되기 때문에 파일명은 본문 내용의 핵심 키워드를 조합해서 만드는 것이 좋습니다. 그래야 검색에 잘 노출되기 때문이죠.

$ hexo new post 'test page'

위와 같은 명령어를 치면, test-page.md 라는 파일이 생성됩니다. 만약 날짜로 prefix 를 붙이고 싶다면 :year:month:day-:title.md 이런 식으로 placeholder 를 이용해서 커스터마이징 할 수 있습니다. 제가 현재 사용하는 방법인데 앞에 날짜가 붙어 있으면 날짜 별로 구분할 수 있어서 좋습니다.

_config.yml

# Writing
new_post_name: :year:month:day-:title.md

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

Placeholder	설명
:title	포스트 제목 (소문자만 가능, 공백 (space)은 하이픈 (-)으로 변경됨)
:year	생성 연도, e.g. 2015
:month	생성 월 (0 포함), e.g. 04
:i_month	생성 월, e.g. 4
:day	생성 날짜 (0 포함), e.g. 07
:i_day	생성 날짜, e.g. 7

스캐폴드 (Scaffolds)

스캐폴드는 사전에서 찾아보면 ‘높은 곳에서 공사를 할 수 있도록 임시로 설치한 가설물’ 이라고 나옵니다. 즉, 포스트, 페이지, 드래프트를 만들 때 처음에 나오는 구조를 정의하는 파일입니다. 물론 커스텀 스캐폴드를 만들어서 사용할 수도 있겠죠.

/scaffolds/post.md

---
title: {{ title }}
date: {{ date }}
tags:
---

기본적으로 이렇게 되어있죠. 그래서 포스트를 생성하면 이런 형식으로 나오게 됩니다. 제가 사용하는 방식은 다음과 같습니다.

/scaffolds/post.md

---
title: {{ title }}
date: {{ date }}
categories:
  -
tags:
  -
thumbnail:
---

### Related Posts

카테고리를 항상 추가하기 때문에 여기에 직접 넣었습니다. 사용할 수 있는 placeholder 는 다음과 같습니다. 기능이 다양하진 않지만 그냥 처음 생성되는 파일의 레이아웃을 정한다고 생각하시면 되겠습니다.

Placeholder	설명
layout	레이아웃
title	제목
date	파일 생성 일자

Front-matter

Front-matter 는 포스트 최상단에 있는 블락으로 해당 파일의 정보를 입력하는 곳입니다. 이미 앞에서 보셨듯이 --- 로 구분되어져 있는 블락입니다. YAML 이나 JSON 으로 설정 가능한데 그냥 기본적인 YAML 로 사용하겠습니다.

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

설정

생각보다 여러가지 기능이 있습니다. 많이 사용하시는 것들은 스캐폴드에 정의해놓으시면 편하게 사용하실 수 있습니다.

설정	설명	기본값
layout	레이아웃
title	제목
date	배포한 날짜	파일 생성 날짜
updated	수정된 날짜	파일 생성 날짜
comments	코멘트 기능 여부	true
tags	태그 (Page 에서는 사용 불가)
categories	카테고리 (Page 에서는 사용 불가)
permalink	포스트의 URL 을 수동으로 설정 가능
thumbnail	썸네일 지정	본문 첫번째 이미지

카테고리와 태그

카테고리와 태그는 Post 와 Draft 에서만 사용 가능합니다. 여기서 카테고리를 지정하면 메인 화면의 메뉴에 자동으로 추가됩니다. 카테고리는 여러개를 지정할 경우 아래에 있는게 서브카테고리가 됩니다. 태그는 그냥 여러개 설정하셔도 됩니다. 여러개 설정할 경우 다음과 같이 작성하시면 됩니다.

categories:
- Web
- Hexo
tags:
- hexo
- blog
- famework

태그 플러그인 (Tag Plugins)

태그 플러그인은 쉽게 포스트를 적성하기 위한 Hexo 자체적인 문법입니다. 자동 코드 생성 문법이라고 할 수 있죠. 양이 방대해서 따로 포스트를 작성했으니 참고하기 바랍니다.

Hexo 태그 플러그인 (Tag plugins) 살펴보기

자원 폴더 (Asset Folders)

자원 폴더는 해당 포스트에서 사용하는 여러가지 자원 즉 이미지, 동영상, 링크 등을 저장하는 폴더입니다. Hexo 는 source 상에 있는 자원을 가지고 public 폴더를 생성합니다. public 폴더가 실제 서버에 올라가는 폴더입니다. 그렇다고 public 폴더에 자원을 추가하면 안됩니다. public 폴더는 generate 할 때마다 새롭게 생성되기 때문이죠. 따라서 자원은 source 폴더 내에서 관리해야 합니다.

전역 자원 폴더 (Global Asset Folders)

전역 자원 폴더는 /source/에 있는 폴더입니다. 여기에 폴더를 만들어서 접근할 수 있습니다. 예를 들어 /source/images 라는 폴더를 생성하면 소스 내에서 /images/ 경로로 바로 접근이 가능합니다. 어느 포스트나 동일하게 사용이 가능합니다.

포스트 자원 폴더 (Post Asset Folders)

모든 자원을 전역 폴더 하나에서 관리하기보다 포스트마다 각각 폴더를 만들어 관리하는 방법도 있습니다.

_config.yml

# Writing
post_asset_folder: true

위와 같이 _config.yml 에서 설정을 변경하면 $ hexo new [layout] <title> 커맨드로 새 글을 생성할 때마다 함께 폴더가 생성됩니다.

그러면 그 폴더 안에 이미지 등을 넣고 절대 경로가 아닌 상대경로로 바로 접근 가능합니다. 기존에 /images/~~/example.png 라고 접속했다면, 이제는 ‘example.png’ 라고 바로 접근할 수 있게 됩니다.

![](example.png)

테스트 해보면 잘 되실겁니다. 하지만 문제는 그냥 포스트 상에서는 되지만 카테고리, 태그, 어카이브 등으로 해당 포스트를 접속할 경우 url 이 달라져서 이미지에 접근이 안됩니다. 이럴 때는 마크다운 문법으로 접근하면 안되고 태그 플러그인 포스트 에서 살펴봤던 자원 삽입 태그를 이용해야 합니다.

{% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}

따라서 위의 예제는 이렇게 해야 제대로 나옵니다.

{% asset_img example.png Example %}

그래서 여러 포스트에서 공통적으로 사용할 이미지는 전역 폴더에, 포스트 상에서만 사용할 경우는 포스트 폴더에 저장해서 활용하시면 되겠습니다.

로컬 서버 (Server)

로컬 서버는 리파지토리에 push 하기 전에 어떻게 표시되는지 확인하는 용도로 사용됩니다. 로컬 서버는 기본적으로 Hexo 패키지에 포함되어 설치되는데, 만약 설치되어있지 않을 경우, 다음과 같은 명령어로 설치가 가능합니다.

$ npm install hexo-server --save

로컬 서버는 다음과 같이 기동합니다.

$ hexo server
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

http://localhost:4000/ 으로 접속하면 로컬 서버 기동된 것을 확인할 수 있습니다. server 명령어에 지정할 수 있는 옵션은 다음과 같습니다.

옵션	설명	기본값
-i, --ip	서버 IP 지정합니다.	0.0.0.0
-p, --port	포트 번호를 지정합니다.	4000
-s, --static	정적 (static) 파일만 게시합니다.	false
-l, --log	서버로그를 표시합니다.	false
-o, --open	서버 기동과 동시에 브라우저 창으로 접속합니다.	false
–draft	초안도 게시합니다.	false

정적 파일 생성 (Generating)

서버에 배포하기 전에 정적 파일을 최신버전으로 생성해야 합니다. 다음 명령어로 간단하게 생성할 수 있습니다.

$ hexo generate

--watch 옵션을 사용하면 실시간으로 파일을 생성할 수 있습니다. 계속 돌아가면서 파일 변화가 있으면 즉시 생성합니다.

$ hexo generate --watch

하나의 명령어로 생성과 배포를 이어서 할 수 있습니다.

$ hexo generate --deploy

혹은

$ hexo deploy --generate

위와 같은 명령어로 실행할 수 있습니다. 두 명령어는 동일한 기능을 수행합니다. 이 명령어는 다음과 같이 더 줄일 수 있습니다.

$ hexo generate -d
$ hexo deploy -g

배포 (Deployment)

로컬에서 작성한 내용들을 원격 서버로 올려 실제로 반영하기 위한 작업을 배포 (Deployment) 라고 합니다. 다음 명령어로 배포할 수 있습니다.

$ hexo deploy

원격 서버에 배포하기 위해서는 원격 서버를 미리 설정해야 합니다. 앞선 포스트에서 모두 Git 을 기준으로 작성했기 때문에 배포도 Git 서버를 기준으로 설명하겠습니다.

먼저 Git 서버 배포 플러그인을 설치합니다.

$ npm install hexo-deployer-git --save

_config.yml 을 수정합니다.

_config.yml

deploy:
  type: git
  repo: <repository url>
  branch: [branch]
  message: [message]

사용할 수 있는 옵션은 다음과 같습니다.

옵션	설명
repo	GitHub 리파지토리 URL
branch	브랜치 이름. 브랜치 이름은 자동으로 설정된다.
message	커밋 메시지 설정

Hexo 에 다양한 기능을 살펴봤습니다.

• 스캐폴딩을 기반으로 초안을 생성
• 본문을 작성할 때 사용할 수 있는 태그 플러그인
• 작성을 완료한 후에 퍼블리쉬
• 자원은 전역/ 포스트 폴더에서 관리
• 로컬 서버에서 테스트
• 정적 파일 생성과 배포

다음 포스트에서는 유용한 Hexo 플러그인 패키지를 살펴보겠습니다.

Related Posts

• 워드프레스보다 쉬운 Hexo 블로그 시작하기
• Hexo 추천 테마, Hueman 적용하기
• Hexo 기본 사용법
• Hexo 태그 플러그인 (Tag plugins) 살펴보기
• Hexo 네임카드 추가하기 (Github Card)
• Hexo 에 Github 저장소 타임라인 (Repository timeline) 정보 추가하기
• 구글(Goolge) 사이트 등록(Search Console)과 검색엔진 최적화(SEO)
• 네이버 사이트 등록(웹마스터 도구)과 검색엔진 최적화(SEO)
• Hexo 블로그에 구글 애드센스(Adsense) 추가하기
• 오픈 그래프 (Open Graph) 태그와 페이스북 도메인 인사이트 (Domain Insight)
• 구글(Google) 검색 원리와 검색이 잘 되게 하는 방법
• 검색 엔진 최적화(SEO)에 유용한 Hexo 플러그인
• Hexo 블로그에서 포스트 삭제하는 방법