Hexo / 설치

#Hexo를 접하다

 며칠 전, html5 와 css3 에 대한 정보를 찾고자 검색하던 중, 한 블로그를 들어가게 되었다.

필오의 개발 docs

 프론트 엔드 엔지니어 ‘필오’ 님의 블로그. 깔끔하고 요즘 유행하는 다크모드st 에다가, 깔끔하게 정리가 잘 되어 있어서 순식간에 매료되었다.


 마치 잘 정리된 필기장을 보는 느낌. 따라서 만들어 보고 싶었다.

 

 

#설치를 해볼까?

 필오 님의 블로그 하단에 “Powered by Hexo” 를 보고 무작정 Hexo 에 대해 검색하기 시작했다. 이미 많은 분들이 설명을 잘 해주셨는데, 내가 참조했던 곳은 여기다.

Mr.LakuLaku
무려 닉네임이 라꾸라꾸…

 Node.js 에 대해 정말 아무것도 몰라서 따라하다가 약간 해멨는데 그 부분에 대해 아주 약간의 보강하여 순서를 적는다.

 

1. Node.js 설치

Node.js 다운로드
여기에 들어가서 설치하면 된다.

 

2. Node.js command prompt 실행


 설치가 끝나고 윈도우 키를 눌러보면, 새로운 command prompt 가 생겼다.
실행 후, 아래 명령으로 차례로 node module install, hexo install 을 진행하면 된다.

1
2
$ npm install
$ npm install hexo-cli -g
 

3. Hexo 설치

 Hexo 블로그의 뼈대를 만들어 주는 과정이다. 아래 명령을 npm cmd 에서 수행하면 된다.

1
$ hexo init hexo_blog_name

 나는 Github pages 를 통해 호스팅 할 예정이기 때문에 hexo_blog_name 에는 “pictureyou-neo.github.io” 로 적었다. 여기에 다른걸 써줘도 되지만, 이유가 기억이 안난다. 매우 중요한 이유가 있었는데…

 

4. Local server 구동

 Hexo 설치를 하고나면, Github 에 올리기 전에 내 PC 에서 먼저 확인이 가능하다.

1
2
$ cd hexo_path
$ hexo server

 hexo_path 는 hexo가 설치된 경로이다. 한 단계 안으로 들어간 뒤, hexo server 명령을 통해 로컬에서 확인이 가능하다.


 이후, 사용하는 브라우저로 http://localhost:4000/ 에 접속해 보면 Hexo blog 를 처음 만나볼 수 있다. (즐겨찾기에 등록 추천)

 

 

#모방은 창작의 어머니

 사실, 이 블로그는 필오님의 디자인을 거의 따라 만들었다. 어떻게 꾸역꾸역 따라 만들었는지는 차례로 포스팅 해 볼 예정이다. 다음은 Hexo theme 적용하기에 대해 적어볼까 한다.

 

 

#Reference

Share