github 페이지를 활용한 블로그 만들기(HEXO 활용)

약 5년쯤 github page를 활용해서 블로그를 하나 개설해 보고 싶어졌습니다. 
지금도 비슷하겠지만 당시에는 github page를 활용하여 블로그를 개설할 때는 많은 활용 팁들이 jekyll을 활용해서 만드는 법들이 많이 공유도고 있었고 많은 분들이 jekyll를 활용하여 개설을 하고 있는 것으로 알고 있습니다. 현재는 github action에서도 쉽게 사용이 가능하도록 되어 있는 것으로 알고는 있으나 사용해 보질 않아서 잘 모르겠습니다. 

그러나 저는 전문적인 개발자는 아니기에 jekyll 관련된 글을 찾아보면서 Ruby 기반으로 구성되어 있다는 것을 알게 되었습니다.
왠지 비전문가 입장에서 접근하는게 조금은 꺼려지더라구요. 그러던 중 jekyll 처럼 github page를 활용해 블로그를 개설할 수 있는 또 다른 솔루션을 알게 되었습니다. 

그게 바로 "HEXO" 였습니다. 지금은 개설만 해 놓고 거의 방치 상태이지만 HEXO는 Node.js 기반으로 왠지 Ruby 보다는 많이 들어본거 같고 따라 해보면 할 수 있을 거 같은 생각에 도전해 봤던 기억이 있습니다. 삽질을 많이 하긴 했어도 성공적으로 github page에 블로그를 올려으니 대견합니다. 

조금 서론이 길었는데 HEXO 역시 jekyll 처럼 github page를 활용하는 정적인 블로그 툴이라고 보시면 될거 같습니다. 테마도 다양하게 존재해서 원하는 형태의 블로그 구성도 가능합니다. 저도 테마 하나를 약간 변경해 보면서 Google Adsene도 붙여보고 했었네요.
그래서 예전에 정리해 둔 내용을 나중을 위해 다시 한번 작성해 두려고 합니다. 

728x90

 HEXO 문법 및 세팅 관련

먼저 HEXO는 마크다운 구문을 사용하고 있어 기본적인 마크다운 구문 작성법은 숙지하셔야 사용이 가능합니다. 
마크다운 작성 관련은 지난번 작성해 둔 글을 참고하시면 될 듯하네요.

[Web/HTML] - Markdown(마크다운)을 사용하는 이유와 작성법

Markdown(마크다운)을 사용하는 이유와 작성법

---

HEXO 기본 사용방법

포스팅하기(Writing)

마크다운 파일 생성하기

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

$ hexo new [layout] <title>

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

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

포스트(Post)

홈페이지에 게시되는 기본적인 게시물입니다.
기본 레이아웃이라서 레이아웃 종류를 별도로 입력하지 않아도 포스트로 자동 인식됩니다.
기본 레이아웃은 _config.yml의 default_layout 항목에서 변경 가능합니다.

페이지(Page)

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

초안(Draft)

draft는 바로 게시하지 않고 작성할 수 있는 초안입니다.
따라서 포스트를 작성할 때 먼저 초안을 작성하고, 작성완료 후 publish 명령어로 배포하는 형식으로 게시할 수 있습니다.

초안을 기본 레이아웃으로 사용할 경우 _config.yml의 default_layout'을 draft로 변경하면

됩니다.

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

# Writing
render_drafts: true

파일명(title)

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

$ hexo new post 'test page'

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

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

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

Placeholder	Description
:title	포스트 제목(소문자만 가능, 공백(space)는 하이픈(-)으로 대체됨)
:year	생성 연도(e.g. 2024)
:month	생성 월('0' 포함 e.g. 04)
:i_month	생성 월(e.g. 4)
:day	생성 날짜('0' 포함 e.g. 02)
:i_day	생성 날짜( e.g. 2)

스캐폴드(Scaffolds)

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

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

Front-matter

Front-matter는 포스트 최상단에 있는 블록으로 해당 파일의 정보를 입력하는 곳입니다. 상기 예시에서 보신 것과 같이 --- 로 구분되어 있는 블록입니다.
많이 사용하는 것들은 스캐폴드에 정의해 놓으면 편하게 사용할 수 있습니다.

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

카테고리와 태그

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

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)

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

# Writing
post_asset_folder: true

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

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

![](example.png)

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

반응형

HEXO CNAME 플러그인

CNAME 생성을 위한 패키징 설치

npm install hexo-generator-cname --save

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

plugins:
- hexo-generator-cname

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

url: https://blog.kang2oon.com

---

예전 작성해 두었던 글 기반으로 기억을 상기하며 기본적인 사용법만 작성해 보았습니다. 
이번 글을 작성하기 위해 github page를 활용하여 블로그를 만들 수 있는 법을 찾다 보니 확실히 예전보다 많은 솔루션들이 생겨나고 있는 것 같았습니다. 

어떤 솔루션을 사용하던 본인이 가장 편하게 사용할 수 있는 환경을 만들어 놓는 것이 가장 중요한 것 같습니다. 
저도 기회가 된다면 다시 HEXO를 활용해서 새로운 블로그를 하나 더 만들어 보고 싶네요.

그때 로컬 서버 세팅이나 배포 방법, 테마 수정법 등 조금 더 자세한 내용을 더 다루어 보겠습니다.