HEXO로 github 블로그 만들기

지금 티스토리로 개발 관련 내용을 정리하고 기록하고 있지만, 누구나 아는 기업들은 github로 블로그를 만들어서 사용한다고 합니다. 그래서 github로 당장 이사 가지는 못하지만 혹시 나중에 이사 갈 수도 있다는 생각으로 미리 github 블로그를 만드는 방법을 공부했습니다.

 

github 블로그의 장점으로는 자유롭게 커스텀마이징을 할 수 있다는 점입니다. 또한 개발이 아니더라도 포스팅 시 커밋 내역이 남아서 잔디를 심을 수 있습니다. 그리고 io라는 멋진 주소를 가질 수 있습니다.

 

이번 시간에는 다른 프레임워크보다 간단하게 사용할 수 있는 HEXO를 이용해서 github 블로그를 만들어보겠습니다.

1. 사전 준비

먼저 https://nodejs.org/ko/에서 node를 설치해줍니다.

다음에 https://gitforwindows.org/에서 git을 설치해줍니다.

다음 github에서 블로그로 사용할 repository를 만들어줍니다. repository의 제목은 '계정명.github.io'로 만들어 줍니다. (예시 : geum-yong.github.io)

2. HEXO 설치

윈도우에서는 git bash를, 맥에서는 terminal을 통해 hexo를 설치해줍니다.

다음 명령어를 입력해줍니다.

 

npm install hexo-cli -g

 

그리고 hexo 파일을 넣어둘 폴더를 만들어줍니다.

 

hexo init [폴더명]
cd [폴더명]   ->   hexo 설정 파일이 들어있는 폴더로 이동
npm install

 

이렇게 npm을 설치해주면 어느 정도 블로그 형태가 갖추어집니다.

 

hexo server

 

다음 명령어를 입력해서 로컬 서버를 열고 localhost:4000을 주소창에 입력 후 확인해보면 HEXO로 만든 블로그가 보입니다.

3. config 설정

그리고 HEXO 파일이 설치된 폴더를 열어서 파일들을 확인해보면 '_config.yml'이라는 파일을 볼 수 있습니다. 해당 파일을 열어서 설정 작업을 해주어야 됩니다.

 

우선 6번째 줄에 블로그 타이틀을 설정할 수 있고 7번째 줄에서 서브 타이틀을 설정할 수 있습니다. description과 keywords에 사용자의 검색에 영향을 미칠 설명과 키워드들을 넣을 수 있습니다.

16번째 줄에 깃허브 블로그 주소를 적어줍니다.

105번째 줄에 다음과 같이 설정해줍니다.

 

deploy:
  type: git
  repo: https://github.com/geum-yong/geum-yong.github.io.git
  branch: master

 

repo 부분에는 자신의 github 블로그를 위해 만들었던 repository 주소를 써줍니다.

 

그리고 git bash에서 다음 명령어를 입력합니다.

 

hexo clean && hexo generate
hexo deploy

 

이렇게 초기화, 생성, 배포까지 하면 끝입니다. 자신의 github 블로그 주소에 들어가면 방금 자신이 확인했던 hexo로 만든 블로그가 그대로 보입니다.

4. 테마 적용

hexo는 다양한 테마를 지원합니다. 저는 hueman 테마를 적용해 보겠습니다.

git bash에서 다음 명령어를 통해 hueman 테마 파일을 clone 합니다.

 

git clone https://github.com/ppoffice/hexo-theme-hueman.git themes/hueman

 

그리고 '_config.yml'에서 101번째 줄 theme: landscape를 theme: hueman으로 수정해줍니다.

마지막으로 themes 폴더 안에 있는 hueman 폴더에서 _config.yml.example을 _config.yml로 수정합니다.

 

만약 hueman 테마의 insight search 검색엔진을 사용하려면 다음 명령어로 파일을 설치해주어야 됩니다.

 

npm install -S hexo-generator-json-content

 

그리고 아까와 같이 초기화, 생성, 배포 명령어를 입력해주고 자신의 github 주소로 들어가면 테마가 적용된 것을 볼 수 있습니다.

5. 포스팅

git bash에서 'hexo new post "포스팅명"'을 입력하면 포스팅에 올릴 내용을 마크다운할 수 있습니다.

추가적으로 새로운 페이지를 생성하려면 'hexo new page "페이지명"'을 통해 생성할 수 있습니다.