WebHexo

Github Pages와 Hexo를 이용한 블로그 만들기

blogging, github, hexo

첫 포스팅으로 Github와 Hexo를 이용한 블로그 개설을 기념하여 블로그 개설시 삽질한 내용을 공유한다.

필자는 naver blog를 시작으로 tistory, thoth, wordpress 등 웬만큼 유명한 블로그 플랫폼을 지식 저장소 개념으로 이용해 왔으나 항상 포스팅 및 글 편집에 있어서 불만족스러웠다.

markdown을 지원하는 서비스 형 블로그들이 등장하였으나 소수에다 언제 서비스가 종료될 지 모르고 설치형의 경우 정보전달 보다는 개인 기록물 정도로 블로깅을 하는 필자로서는 서버 호스팅 비용이 부담스럽기에 이 두가지 단점을 모두 해결할 수 있는 Github Pages + Hexo 를 선택하게 되었다.

블로그를 개설하고 보니 그렇게 어려운 부분은 없었으나 뭐가 됐든 항상 초입은 삽질이 필수였으므로 블로그 개설 시 참고한 자료와 내용을 첫 포스팅으로 기록한다.

Github Page 개설

Github Page 개설은 Github Pages 홈페이지에 아주 친절하게 설정 과정을 설명하고 있기에 본 포스팅에서는 생략하고 링크로 대신한다.

Hexo

Hexo는 Jekyll와 함께 대표적으로 정적 페이지를 쉽게 만들 수 있도록 도와주는 서비스이다. 두 서비스 역시 블로그 지향적인 서비스이며 Hexo의 경우에는 npm을 통해 쉽게 설치가 가능하고 한 줄의 Command Line을 통해 Github에 바로 배포 할 수 있으며, Jekyll과 마찬가지로 다양한 플러그인과 테마를 지원하고 있다.

개인적으론 Jekyll 보다는 Hexo가 블로그용으론 더 강력하다고 생각됨

설치 전 준비

Hexo를 이용하기 위해서는 먼저 아래의 구성 요소들이 사전에 설치가 되어 있어야 한다. 이미 설치가 되어 있다면 생략해도 좋다.

  • Node.js
  • Git

Hexo CLI 설치 및 블로그 생성

1
2
3
4
$ npm install hexo-cli -g
$ hexo init blog
$ cd blog
$ npm install

설정파일 업데이트

Command Line을 통해 Hexo를 설치하고 블로그 생성이 완료가 되면 root 디렉토리에 _config.yml 이라는 설정파일이 생성이 되는데 이 곳에 블로그에 대한 대부분의 설정을 할 수 있다. 설정 값에 대한 자세한 정보는 Hexo의 Document를 통해 확인이 가능하다.

Site 정보

블로그의 이름과 간략한 소개등을 수정 할 수 있다

1
2
3
4
title: 블로그 타이틀 (브라우저의 탭 타이틀로 표시됨)
subtitle: 블로그 부제
description: 블로그 간단 설명
author: 저자명

URL 정보

블로그 URL정보를 설정 할 수 있다

1
2
3
4
url: https://USERNAME.github.io
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

만약 본인의 Custom Domain을 적용하고 싶다면 url값은 이후에 Custom Domain 설정시 CNAME 파일을 생성 할 때도 참조한다.

Github 정보

자신의 Repository 정보를 입력하면 이후에 손쉽게 배포가 가능하다.

1
2
3
4
# Deployment
deploy:
  type: git
  repo: https://USERNAME@github.com/USERNAME/USERNAME.github.io

위와 같이 설정 후 실제 배포 시에 아래와 같은 에러가 발생하는 경우 추가 플러그인을 설치해야 한다.

1
2
> ERROR Deployer not found: git
>

hexo-deployer-git 설치

1
2
> npm install hexo-deployer-git --save
>

로컬에서 테스트

기본적인 설정이 완료가 되면 아래의 Command Line을 통해 로컬에서 서버를 구동 할 수 있다.

1
$ hexo server

서버가 구동이 되면 아래의 주소를 통해 브라우저에서 블로그에 접속 할 수 있다.

Github에 배포

로컬에서 정상적으로 블로그에 접속이 되었다면 이미 생성한 Github Page Repository에 손쉽게 배포가 가능하다.

Hexo 설정을 통해 정적 리소스 생성하기

1
$ hexo generate

배포하기

1
$ hexo deploy

Generate와 Deploy 동시 실행

1
$ hexo deploy --generate

배포가 완료가 되면 브라우저에서 USERNAME.github.io로 접속해 정상적으로 배포가 되었는지 확인한다.

주의사항

간혹 hexo의 deploy기능을 통해 정상적으로 배포가 되었음에도 불구하고 페이지가 업데이트 되지 않는 현상이 있는데, 이 경우에는 아래와 같이 페이지를 clean후에 배포를 하면 해결된다.

1
2
$ hexo clean
$ hexo deploy --generate

테마 적용

USERNAME.github.io를 통해 성공적으로 블로그 접속이 되었다면, 멋진 디자인을 적용한 테마(Theme)를 적용하고 싶을 것이다. Hexo에서는 아래의 페이지에서 다양한 Theme가 적용된 페이지를 소개하고 있다.

https://hexo.io/themes/

구체적인 테마 적용 방법은 아래 링크를 참고한다.

포스트 작성

아래의 Command Line을 입력하면, root 디렉토리의 source/_posts 폴더에 Markdown 파일이 하나 생성되는데 Hexo에서는 Markdown문서를 통해 포스트를 작성해 나가면 된다.

새 포스트 만들기

1
$ hexo new post [post_name]

예제

1
$ hexo new post github-page-and-hexo

아래와 같은 경로에 Markdown 문서가 생성 된다

1
2
3
ㄴ source
   ㄴ _posts
          - github-page-and-hexo.md

생성된 Markdown 문서에서 아래와 같이 제목을 수정 할 수 있다

1
2
3
4
---
title: Github Page와 Hexo를 통해 30분만에 기술 블로그 만들기
date: 2017-04-16 22:37:53
---

Github Markdown Guide

기존 서비스형 블로그와 같이 초안 작성 및 세부 설정과 같은 내용은 아래 링크를 참고한다.

참고 자료

공유하기