개요

 
Github Pages를 이용하여 블로그를 운영하기 위한 과정을 Hexo와 함께 설명 하겠습니다.
 
 

Github Pages 소개

 
웹의 정적 파일들을 Git으로 관리하고, Github에 푸시하면 Github Pages를 통해 웹상에 공개해주는 서비스입니다.
잘 알다시피 공개 저장소로 만들면 무료로 사용가능하며, 용량 제한이 없습니다. 그리고 CGI, PHP 등의 동적 페이지를 운영할 수 없으며 정적 파일만 가능합니다. 그런 사유로 인해 Local 환경에서 정적 파일을 생성해주는 프레임워크를 사용하고 생성된 정적 파일을 Github에 Push하는 방식을 사용합니다. 대부분 이런 프레임워크는 커맨드라인과 Markdown 마크업 형식을 취하고 있기 때문에 일반인이 사용하기엔 다소 무리가 있을 수 있습니다.
 
 

Hexo 소개

 
Hexo는 Node.js로 만든 오픈 소스 프레임워크 이며 라이센스는 MIT License 입니다.
Markdown 형식을 사용하여 게시물을 작성하고, 작성된 게시물을 바탕으로 정적 HTML파일들을 생성하며, 그 결과로 정적 파일로 이루어진 블로그가 완성됩니다. 그리고 Disqus, facebook, twitter 등.. 대부분의 메이저급 서비스 플러그인을 포함하고 있어 간단한 설정으로 손쉽게 사용가능합니다.
이 프레임워크는 매우 심플하고, 단순하기 때문에 이해비용이 크지 않고 쉽게 적응할 수 있다는 장점도 가지고 있습니다. 다만 블로그 다운 면모는 다소 부족합니다.
 
 

도움이 되는 링크들

 

 
 

설치하기

Git 저장소 생성

저장소를 생성 해야 합니다. Github 홈페이지에 가서 [New repository] 버튼을 클릭합니다.
hexo_blog.01
원하는 블로그 명과 설명을 작성하고 [Create repository] 버튼을 클릭합니다.
hexo_blog.02

Github Pages

저장소가 생성되었으면 우측 [Settings] 버튼을 클릭하여 설정 창으로 갑니다.
hexo_blog.03
중간정도에 위치한 Github Pages 란에 [Automatic Page Generator] 버튼을 클릭합니다.
hexo_blog.04
적당한 레이아웃을 선택하고 [PUBLISH] 버튼을 클릭합니다.
hexo_blog.06
gh-pages라는 브랜치와 정적 파일들이 생성된것을 확인할 수 있습니다.
hexo_blog.07
약 10분정도 지나면 Github Pages가 활성화 되는것을 볼 수 있습니다. github page의 url은 id.github.io/project명 입니다.
hexo_blog.08

Hexo 설치하기

 

1
npm install -g hexo

 

 Hexo와 Github 연동하기

우선 폴더를 하나 생성하고, Hexo를 init 합니다.

1
2
3
mkdir blog
cd blog
hexo init

hexo_blog.09
이어서 Hexo의 config 파일을 열어서 환경에 맞추어 수정 해줍니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#Site
title: Hello World
subtitle: development diary
description:
author: Hong gil dong
email: honggildong@gmail.com
language:
#URL
url: http://username.github.io/Blog
root: /Blog/
#Deployment
deploy:
  type: github
  repository: https://github.com/UYEONG/Blog.git
  branch: gh-pages

이제 정적 파일을 만들고 git에 push해봅니다.

1
2
hexo generate
hexo deploy

다시 Github Pages에 접속하면 변경된 화면을 볼 수 있습니다.(가끔 동기화가 느려서 몇분 뒤에 적용될 수도 있음)
hexo_blog.10

POST 하기

  • hexo new [title] : title.md 파일을 생성
  • hexo generate : 정적 파일을 생성
  • hexo server : localhost 서버를 활성화
  • hexo deploy : 설정된 github에 정적 파일을 push

hexo_blog.11
 
 
 
 

끝으로

 
여기까지 Hexo를 이용하여 정적 웹 블로그를 사용하는 방법에 대해 알아보았습니다.
.md 파일이 가장 중요한데 public 폴더의 정적 파일들만 저장소로 push 되므로, 엔진 코드도 github로 관리하는 편이 좋을것 같습니다.
Hexo는 사실 블로그의 모든 역활에 충실하지 못하기 때문에 Github Pages와 정적 웹 프레임워크의 플로우를 이해하는 용도로 간단히 사용하고,
좀더 좋은 프레임워크로 바꾸는 전략을 구상하는것도 나쁘지 않을것 같습니다.

카테고리: Review

UYEONG

사케와 힙합을 즐길 줄 아는 프론트엔드 개발자입니다.

1개의 댓글

Kyoungtaek Koo · 2013년 10월 2일 2:21 오후

루비기반의 Jekyll 과 비교하면 어떤 차이가 있을까요..? Hexo는 여기서 처음 접하는데 한번 사용해봐야 할것 같습니다. 감사합니다 🙂

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다