Hexo on

hexo 블로그에 tranquilpeak 테마 적용하기

Sun, 27 Aug 2017 17:52:56 +0000

여러가지 hexo 테마중에 그나마(?) 영어로 된 문서가 있어서 적용해보게 된 tranquilpeak 라는 테마. 오늘은 해당 테마를 적용하면서 겪은 문제, 그리고 적용 방법에 대해서 간략하게나마 정리해보고자 한다. (다른 테마들은 거의다 중국쪽이나 일본…) 먼저 hexo 공식사이트에서 알려주는 테마들은 다음 사이트에서 확인해 볼수 있다.

https://hexo.io/themes/index.html

기존에는 hueman이라는 테마를 사용하고 있었는데 (링크), 오랜만에 블로그를 다시(?) 시작하는 느낌을 내보고 싶었고 보다 더 심플하고 유행에 안탈것 같은(순전히 필자 생각) 테마를 찾아보다 tranquilpeak이라는 테마를 선택하게 되었다.

공식홈페이지 : https://github.com/LouisBarranqueiro/hexo-theme-tranquilpeak
샘플사이트 : http://louisbarranqueiro.github.io/hexo-theme-tranquilpeak/

우선 간략하게 설치과정을 나열해보면 다음과 같다.

themes 폴더내에 테마파일을 받은후 압축 해제
테마 폴더 이름을 변경
_config.yml 파일 내에 테마 설정 부분 변경 ( theme: tranquilpeak )
hexo clean → hexo generate → hexo server(or hexo deploy)

이렇게 하면 아주 간단하게 테마가 변경이 된다. 혹여나(필자처럼) 기존 테마를 커스터마이징 하고 싶을 경우는 별도의 과정이 추가로 필요하다. 기존에는 css나 js만 변경하면 간단히 수정되었는데 이 테마는 약간의 빌드(?)를 필요로 한다. 따라서 css나 js등 html 요소들을 수정하였다면 다음과 같은 과정이 필요하다.(테마폴더 최상위에서)

npm install
bower install
css 나 js 변경
grunt build
hexo clean → hexo generate → hexo server(or hexo deploy)

나같은 경우는 테마에 적용된 폰트를 바꾸기 위해 블로그 를 참조하였다. (해당 아티클에다 댓글폭탄을 ㅎㅎ;;)

hexo 환경 구축하기

Fri, 23 Sep 2016 10:26:53 +0000

개요

이전포스팅 에서 이야기 한것과 같이 어느곳에서든지(집 또는 회사 등) 블로그 포스팅을 할수 있는 환경을 만들고 싶었다. (git을 이용해서.) 그래서 git repository 를 두개를 만들었고, 하나는 실제 블로그서버로 이용하고 하나는 블로그를 포스팅하는 hexo 환경을 저장하게 된다. 지금부터 이야기 할 내용은 hexo환경을 git repository 에서 pull 받아서 환경구성하는 부분을 이야기 하려고 한다.

환경구성

hexo설치와 git설치는 되어있다고 가정. 먼저 구성할 폴더를 생성하고 이 폴더에 hexo 환경을 구성하겠다고 초기 셋팅을 한다

mkdir blog
hexo init blog

그리고 hexo환경을 저장해둔 repository를 가져와야 하므로 git설정을 한다

cd blog/
git init
git remote add origin https://github.com/taetaetae/hexo.git
git fetch

필요없는초기셋팅이 되는 파일은 지우고

rm source/_posts/hello-world.md
rm -r themes/landscape/ #해당 테마를 사용하고 있다면 지울필요가 없다.

hexo환경 repository 를 pull받는다

git reset --hard origin/master
git pull origin master

hueman테마의 검색 기능을 사용한다는 가정하에 필요한 플러그인과, 나중에 deploy 할때 필요한 플러그인을 설치해준다

npm install hexo-deployer-git --save
npm install -S hexo-generator-json-content

이렇게 되면 기존처럼 환경설정이 마무리 되고, 포스팅을 할수 있게 된다.

추가

canonical 속성 npm install –save hexo-auto-canonical
사이트맵 속성 npm install hexo-generator-seo-friendly-sitemap –save
feed 속성 npm install hexo-generator-feed –save

hexo + github + blog 연동하기

Sun, 18 Sep 2016 15:38:34 +0000

들어가기에 앞서

예전부터 블로그를 운영해야지 하구서 tistory, naver blog 등 다양한 플랫폼으로 시작을 했었지만 이렇다할 운영이 안되었고 ~~사실 열정이 부족했었다.~~ 직접 홈페이지를 만들기에는 너무 많은 허들이 있다보니 (서버구축, 호스팅, 도메인 등 …) 계속 차일피일 미루고 있었다. 그러다 github에서 제공하는 pages라는 걸 이용해서 무료로 도메인과 웹호스팅을 할수 있다는 부분을 알게되었고, 거기에다 jekyll을 이용하면 설치형 블로그를 운영할수 있다는것에 놀라웠다. 하지만 jekyll을 적용해보려고 이것저것 하다보니 ruby라는 언어로 만들어져있고 커스터마이징이 어렵다는 부분을 확인, 좀더 알아보다 hexo 라는 걸로 해당 블로그를 만들게 되었다. 필자처럼 남들과는 다른 블로그를 만들고 싶거나, git command 공부도 하면서 블로그를 운영해볼 사람들은 해당 글을 천천히 따라오면 좋을것 같다.

hexo 시작하기

hexo 라는걸 시작하기 위해 몇가지 준비물이 있다.

node 설치
git 설치
github에 블로그로 사용할 빈 repository 생성
github에 hexo 설정을 저장할 빈 repository 생성

위 4가지(?!)가 전부 설치 되었다고 가정을 하고 시작을 해보겠다.

hexo 설치

간단하다. hexo 페이지에도 나와있는것처럼 아래 명령어를 실행해주면 된다.

$ npm install -g hexo-cli

블로그로 운영할 폴더 hexo 초기화

폴더 구조로 구성이 되기 때문에 임의의 폴더를 하나 만들고 해당 폴더를 hexo 명령어로 초기화 시켜준다.

$ mkdir <디렉토리명>
$ hexo init <디렉토리명>

로컬서버 띄워보기

이제 로컬에서 서버를 띄워서 블로그가 어떻게 나오는지 확인을 해보면 된다.

$ hexo s (or server)

간혹 서버가 실행이 안되거나 오류가 발생, 수정한 부분이 반영이 안된다면 clean 명령어를 한번 해준 다음에 다시 서버를 실행해주면 되는 경우도 있다.

$ hexo clean
$ hexo s (or server)

http://localhost:4000 을 접속해서 정상적으로 페이지가 나오는지 확인을 해보자. 페이지가 정상적으로 나온다면 성공!

글 작성

아래 명령어를 실행하면 /source/_post/ 아래에 .md 파일이 생성이 된다.

$ hexo new <글 제목>

해당 파일을 사용하기 편한 에디터로 열어서 마크다운 문법에 맞추어 수정을 하면 끝!

왜 두개의 repository가 필요한가

아래에서 이야기 하겠지만, 하나는 실제 블로그 내용이 올라갈 저장소이고 다른 하나는 블로그를 운영하고 있는 hexo 자체를 저장할 저장소이다. hexo 정보를 가지고 있지 않을꺼라면(필자처럼 다양한 PC에서 업로드 환경을 구축하지 않을꺼라면) 하나의 레파지토리만 필요할수도 있다.

github 셋팅

지금부터가 알짜배기다. 즉 이글을 포스팅 하는 의미. 다른 글들에서도 hexo 사용법을 친절하게 알려 주셨으나 github와의 연동, 그리고 어떤식으로 운영해야할지는 찾기 힘들었다. 필자는 감으로 그런가보다(?)하고서 터득한 바를 공유하려한다. (이게 정답은 아니지만, 나는 이렇게 사용하는게 맞겠다 싶어..)

일반적으로 github에서 블로그로 사용할 repository를 만들게 되면 http://(github아이디).github.io/(repository이름) 으로 블로그가 만들어 지는데 뭔가 조금 이상해서 ~~간지가 안나서~~ 찾고 찾아서 아래와 같은 방식으로 하게 되었다. 필자의 github 아이디는 taetaetae 이고 도메인은 아이디 그대로를 사용하여 http://taetaetae.github.io 으로 사용하고 싶었다. 따라서 github에 repository이름을 taetaetae.github.io로 만들어야 한다. 여기까지만 하면 일단 github에 배포할수 있는 준비가 되어있는 상태

hexo로 배포하기

포스팅한 글이 정상적으로 등록이 된 것을 로컬서버에서 확인이 되었으면 이 상태를 조금전 만든 github repository으로 배포(정확히 말하면 git push)해줘야 한다. 그전에 최상위 폴더에 있는 _config.yml 파일을 열어서 github 정보를 입력해 줘야 한다. 하단 영역 Deployment 부분에 다음과 같이 작성하고 저장한다.

# Deployment
deploy:
 type: git
 repo: https://github.com/taetaetae/taetaetae.github.io
 branch: master

그 다음 hexo 에서 github로 배포할수있는 플러그인을 설치해준다.

$ npm install hexo-deployer-git --save

이제 설정한 github에 배포를 하면 끝!

$ hexo deploy

1분~3분 뒤에 도메인을 접속하여 정상적으로 페이지가 나오는지 확인하고, github에 파일들이 push가 잘 되었는지를 확인한다.

향후 관리 hexo 정보 저장

나중에 다른 PC에서도 블로그를 포스팅 할 경우가 있으니 hexo를 이용하여 포스팅 한 환경 자체를 저장 해야할 필요가 생겼다. 따라서 만들었던 폴더 또한 github에 업로드를 해놓는게 좋을것 같다 (지극히 개인적인 생각) git command 설명은 따로 정리하지 않겠다.