HEXO 문법 및 세팅 관련

HEXO 문법 및 세팅 관련

Markdown 구문

참고자료0
참고자료1
참고자료2

기본 사용법


HEXO 기본 사용방법

포스팅하기 (Writing)

마크다운 파일 생성하기

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

1
$ 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 명령어로 배포하는 형식으로 게시할 수 있습니다.

초안을 기본 레이아웃으로 사용할 경우 _config.yml의 default_layout'을 draft로 변경하면hexo new <code>로 생성했을 때 포스트가 아닌 드래프트로 만들어 집니다. 하지만 작업하면서 실제 화면에서 어떻게 보일지 궁금할 경우 로컬서버 실행 시</code>–draft` 옵션을 주면 로컬서버에서 draft로 작성한 것도 확인할 수 있습니다.

1
$ hexo server --draft

매번 이렇게 실행하는 것이 귀찮다면, _config.yml파일에서 render_drafts 항목을 true 로 변경하시면 됩니다. 하지만 이 경우 원격 서버에도 초안이 나타나기 때문에 권장하지는 않습니다.

_config.yml
1
2
# Writing
render_drafts: true

파일명

1
$ hexo new [layout] <title>

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

1
$ hexo new post 'test page'

위와 같은 명령어를 입력하면 test-page.md라는 파일이 생성됩니다. 만약 날짜를 prefix로 사용하고 싶다면 :year:month:day-:title.md 이런 형식으로 placeholder를 이용해서 커스터마이징할 수 있습니다.

_config.yml
1
2
# Writing
new_post_name: :year:month:day-:title.md

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

Placeholder Description
:title 포스트 제목 (소문자만 가능, 공백(space)은 하이픈(-)으로 대체됨)
:year 생성 연도 (e.g. 2019)
:momth 생성 월 (0 포함, e.g. 09)
:i_month 생성 월 (e.g. 4)
:day 생성 날짜 (0 포함, e.g. 05)
:i_day 생성 날짜 (e.g. 5)

스캐폴드 (Scaffolds)

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

/scaffolds/post.md
1
2
3
4
5
---
title: {{ title }}
date: {{ date }}
tags:
---

Front-matter

Front-matter는 포스트 최상단에 있는 블록으로 해당 파일의 정보를 입력하는 곳입니다. 상기 예시에서 보신 것과 같이 --- 로 구분되어 있는 블록입니다.

설정

많이 사용하는 것들은 스캐폴드에 정의해 놓으면 편하게 사용할 수 있습니다.

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

카테고리와 태그

카테고리와 태그는 Post와 Draft에서만 사용 가능합니다.
카테고리를 지정하면 메인 화면의 메뉴에 자동으로 추가됩니다. 카테고리는 여러 개를 지정할 경우 아래에 있는게 서브 카테고리가 됩니다.
태그는 여러 개 설정할 수 있습니다.

1
2
3
4
5
6
7
categories:
- Web
- Hexo
tags:
- hexo
- blog
- framework

자원 폴더 (Asset Folders)

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

전역 자원 폴더(Global Asset Folders)

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

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

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

_config.yml
1
2
# Writing
post_asset_folder: true

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

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

1
![](example.png)

하지만 문제는 그냥 포스트 상에서는 되지만 카테고리, 태그, 아카이브 등으로 해당 포스트 접속 시 URL이 달라져서 이미지에 접근이 안됩니다.
그래서 여러 포스트에서 공통적으로 사용할 이미지는 전역 폴더에 포스트 상에서만 사용할 경우는 포스트 폴더에 저장하여 활용하면 됩니다.


HEXO CNAME 플러그인

CNAME 생성을 위한 패키징 설치

1
npm install hexo-generator-cname --save

_config.yml 파일의 플러그인 설정

_config.yml
1
2
plugins:
- hexo-generator-cname

_config.yml 파일의 url 이름이 적용한 Domain과 일치하는지 확인

_config.yml
1
url: https://blog.kang2oon.com

# blog, hexo

Comments

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×