Hexo로 아주 아주 기본적인 Github.io 블로그 만들기

아래 블로그들에서 너무나 설명을 자세히 해주셔서 따라 만들어봤는데 ~~(나는)~~ 생각보다 쉽게 만들어지지 않아서…!! 다음에 혹시나 다시 할 때 또다시 헤매지 않도록 정리를 해놓기로 했다.

reference

시작하기 전 준비사항!

node
git
hexo와 연결시킬 repository (<자기계정명>.github.io)
블로그 관리용 repository

hexo 설치

// hexo-cil를 설치
$npm install hexo-cli-g

// 디렉토리 만들기
mkdir <폴더명>

// hexo 프로젝트 생성
hexo init <폴더명>
cd <폴더명>
$npm install

theme 적용하기

mingpd 님의 블로그처럼 Tranquilpeak 테마를 적용해봤다.

releases의 Assets에서 한 개만 다운로드한 후 압축을 풀어주기
폴더 이름을 tranquilpeak으로 변경하고 위에서 생성한 hexo 프로젝트 내의 themes 폴더 안에 넣기
hexo 프로젝트의 _config.yml파일 안의 theme을 theme:tranquilpeak으로 변경
(주의!!!themes/tranquilpeak/_config.yml 아님)

여기까지 하고 $hexo server를 실행하면 다들 에러 없이 테스트가 작동하는 것 같았는데
나에게는 Cannot find module 'jsdom'이라는 에러가 발생했다..
열심히 구글링 한 결과

1
2
3

cd themes
cd tranquilpeak
npm install && npm run prod

위의 명령문들을 실행해주면 문제가 해결되었다!!
npm run prod를 실행해야 테마가 빌드 되어서 수정사항들이 바뀐다고 한다.

그리고 바로 $hexo server를 해주는 것이 아니라 hexo 프로젝트 폴더로 돌아가서 $hexo server를 실행해주고 http://localhost:4000에 들어가면 Hello World가 나오는 예쁜 블로그를 볼 수 있다.

간혹 실행이 안 될 경우가 있다는데 그럴 때는

1 2	$hexo clean $hexo server

clean 명령어를 실행해준 뒤 다시 server 명령어를 실행시켜주면 작동한다고 한다.

grunt

theme안의 css, js등을 변경한 후에 grunt라는 javascript 빌드 툴을 이용해서 빌드해준다.
초기 설정할 때는

$npm install -g grunt-cli

$cd themes/tranquilpeak
$npm install grunt --save-dev

초기 설정후에 css,js 파일을 수정한 다음에는

1 2	// themes/tranquilpeak 폴더에서 $grunt build

새로 빌드 한 후에 hexo server를 실행하면 변경된 사항을 확인할 수 있다.

포스트 만들기

일반 post와 draft(초안)을 만들 수 있는데 일반 post로 자주 만들 것 같다.

// 일반 post 만들기
$hexo new post "제목"

// draft 만들기
$hexo new draft "제목"

// draft를 post로 만들기
$hexo publish "제목"

템플릿
일반 post => scaffolds/post.md
draft => scaffolds/draft.md

// post.md 파일
---
title: Hexo로 Github.io 블로그 만들기
date: {{ date }}
categories:
- Web
- Hexo
tags: 
- hexo
- github.io
- blog
thumbnail:
permalink: "http://hyerinOh/Hexo로 Github.io 블로그 만들기"
---

카테고리를 어떻게 만드나 한참 찾았는데 categories 하위에 순서대로 넣어주면 알아서 카테고리가 만들어진다. tags는 순서 상관없이 동등한 관계!
parmalink로 원하는 경로를 설정할 수 있다.

Github page 배포하기

먼저 라이브러리를 설치해주고

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

_config.yml의 deploy 부분을

deploy:
    type: git
    repo: https://github.com/자기계정명/자기계정명.github.io.git
    branch: master

이렇게 설정해주고

1	$hexo deploy

배포를 해주면 알아서 리포지토리로 push가 된다! ~~(바보같이 직접 push하려고 고생했…)~~

포스트 쓴 후에 배포하려면

1 2	hexo clean hexo d -g

이렇게하면 아주 아주 기본적인 github.io 블로그가 완성된다!!
뿌듯하니까 첫 포스팅의 주제는 이걸로!;)