etcblog

Hexo blog

blog, hexo

Hexo와 Github Page를 이용한 블로그 개설

[이미지 출처: http://masatolan.com/images/2015/programming/1/hexo-blog-basic1.jpg]

블로그 개설을 결심하고 블로그 제공 서비스들(Naver, Tistory, Blogger, Medium)을 기웃거리면서 구글링 중 github page를 이용한 블로그에 대해 알게 되었다. Jekyll(Ruby 기반), Hugo(Go 기반), Hexo(Node.js 기반)와 같은 Static Website Generator를 이용하여 생성한 블로그를 github에 push하면 블로그 사이트가 만들어 진다. 다양한 서비스들이 있지만 그나마 알고 있는 nodejs기반 Hexo를 이용하기로 했다.

설치

software
OS Windows 10
CLI Git Bash
Editor Atom, Typora

1) 필요환경

2) 헥소설치

Node.js와 Git을 설치한 후 터미널에서 아래 명령어를 입력하면 Hexo가 설치된다.

1
$ npm install -g hexo-cli

3) 헥소 웹사이트 생성

헥소 설치가 완료된 후, hexo init 명령어를 이용하여 블로그 폴더를 생성한다.

1
$ hexo init 폴더명

Start blogging with Hexo!라는 메시지와 함께 생성이 완료된다.

4) Node Package Manager 설치

터미널에서 블로그 폴더까지 이동하여 노드 패키지 매니저인 npm을 설치한다.

1
2
$ cd 폴더명
$ npm install

터미널에서 다음의 명령어로 로컬서버를 돌려, 설치가 잘 되었는지 확인한다.

1
$ hexo server

http://localhost:4000/로컬서버 4000번 포트에서 헥소가 동작하고 있다는 메시지가 나타난다. 해당주소를 확인해보면 다음과 같이 나타난다.

4) 테마 설치

4.1) 헥소 테마를 직접 만드는 경우

4.2) 만들어진 테마를 적용할 경우

헥소 공식사이트에 방문하여 적당한 테마를 선택한다. 해당 테마를 제공하는 사용자의 repository를 방문하면 설치방법이 설명되어 있다. 터미널을 열고 헥소 블로그 최상위 폴더에서 다음과 같이 입력하여 테마를 다운받는다.

1
$ git clone repository주소 themes/테마명

마찬가지로, 최상위 폴더의 _config.yml의 theme 부문을 해당 테마명으로 수정한다.

1
theme: 테마명

테마 업그레이드는 선택사항으로 theme/테마명폴더로 이동하여 git pull을 입력한다.

1
2
$ cd theme/테마명
$ git pull

Github 연동

1) github repository 생성

github page 기능을 이용하기 위해 new repository를 생성하는데 Repository name을 username.github.io로 지정해야 블로그 url을 https://username.github.io/로 지정할 수 있다.

2) hexo 설정 및 github 연동

블로그 파일을 github에 push하기 위해서 몇가지 설정을 해주어야 한다. 블로그 메인폴더에 위치한 헥소 설정파일인 _config.yml파일의 내용을 수정한다.

1
2
3
4
5
6
7
8
9
10
11
# URL
url: http://daehuijo.github.io/		#생성한 repository url#
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
# Deployment
deploy:
  type: git
  repo: https://github.com/DaehuiJo/daehuijo.github.io.git	#github에 배포하기 위한 url#
  branch: master

3) hexo-deployer-git 플러그인 설치

로컬에 있는 마크다운 파일(.md)을 github에 배포하기 위해서는 정적파일(.html)을 생성하여 배포하여 하는데, github에 배포하기 위해서는 node package 중 hexo-deployer-git를 설치해 주어야 한다.

1
$ npm install --save hexo-deployer-git

4) github에 배포

1
2
$ hexo generate 또는 hexo g	#정적 파일 생성#
$ hexo deploy 또는 hexo d	#github 배포#

$ hexo g --d명령으로 한번에 처리할 수 도 있다. https://username.github.io/에 접속하여 github에 push가 잘 되었나 확인한다.

참고사이트

Share