hexo 블로그를 설치해 보자!!

안녕하세요.

굳헬로 @goodhello 입니다.

어제는 블로그 개설을 위해 도메인을 구매하고 DNS를 설정해 보았는데요.

이제 본론으로 들어가서 hexo(헥소)를 이용해서 스팀잇에 올린 글을 가져와서 블로그를 만들어 보려고 하는데요.

개념적인 것들을 천천히 공부해 보면서 진도를 나가볼까 생각중입니다.

그래도 너무 진도가 더디면 그것도 지루하기 때문에, 적절히 진행해 보도록 하겠습니다.

그럼 오늘은 hexo 설치부터!!

먼저 hexo는 저도 처음 들어 보는데요.

hexo란 빠르고 간단하고 파워풀한 블로그 프레임워크라고 하는데요. 스팀잇에서 사용하는 Markdown 방식의 포스트를 멋진 테마를 입혀 블로그처럼 만들 수 있는 기능을 제공합니다.

이 hexo를 설치하려면 먼저 node.js를 설치해야 합니다.

대부분의 개발자분들은 맥OS 혹은 리눅스 환경에서 작업하시는데요.

저는 이번에 윈도우 환경에서 node.js를 설치하고 hexo를 설치해 보겠습니다.

node.js는 아래의

https://nodejs.org/

사이트에서 다운을 받아서 설치를 할 수 있습니다.

저는 64비트 윈도우 환경의 12.16.1 LTS 버전을 다운 받았습니다. (본인의 컴퓨터 환경이 32비트이면 32비트 버전을 다운 받아서 설치하시면 되겠습니다.)

다운 받은 파일을 실행하여

다음 다음 해서 그냥 설치하면 됩니다.

설치가 정상적으로 되었다면 윈도우 시작 버튼을 누르고 cmd라고 치면 명령프롬프트 라고 나오는데

윈도우 10에서는

윈도우 7에서는

이렇게 나오는데 얘를 실행해서

node -v

를 실행해서 다음과 같이 나오면

설치가 성공적으로 된 것입니다.

만약 실행할수 있는 프로그램 파일이 아니라고 나오면 설치가 정상적으로 되지 않았거나 path 가 설정이 안되서 그런건데... 다시 재설치를 해주시면 되겠습니다.

node.js가 정상적으로 설치되었다면 하나 더 git 도 설치를 해주어야 하는데요.

하는김에 github 사이트에 접속해서

https://github.com/

가입도 해주시면 좋겠네요.

그리고 아래의 git 다운로드 페이지에서

https://git-scm.com/downloads

최신 버전을 다운받아서 설치해 주시면 되겠습니다.

설치를 할때 Choosing the default editor used by Git 이라는 에디터를 설정하는 메뉴에서 본인이 사용하는 에디터를 골라 주시면 좋을 것 같네요.

저 같은 경우 비주얼 스튜디오 코드를 사용하기 때문에 저것을 선택해서 설치했답니다.

git을 설치했으면 이제 hexo를 설치해야 하는데.. 그전에 git 명령어를 사용하기 위해서 위해서 사용했던 명령 프롬프트 창을 닫고 새로 cmd 창을 실행합니다.

새로운 명령 프롬프트 창에서

npm install -g hexo-cli

위의 npm 명령어를 이용하여 hexo를 설치합니다.

npm install -g hexo-cli
C:\Users\Administrator\AppData\Roaming\npm\hexo -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\hexo-cli\bin\hexo
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_modules\hexo-cli\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]
added 74 packages from 319 contributors in 5.585s

음... 경고 메시지가 보이긴 하지만(찾아보니 윈도우에서 지원되는 환경이 아니라서.. 아마도 맥이나 리눅스용 옵션인가 봅니다.) 아마도 특별한 상황이 아니라면 hexo가 설치될 것입니다.

hexo가 설치되었다면 이제 블로그를 만들어 보도록 하겠습니다.

블로그를 설치하고 싶은곳으로 이동해서 ( 저같은 경우 D:\blog)

D:\blog>hexo init steemblog

명령어를 입력하여 steemblog 를 생성하였습니다.

그러면

D:\blog>hexo init blog
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
Cloning into 'D:\blog\blog'...
remote: Enumerating objects: 30, done.
remote: Counting objects: 100% (30/30), done.
remote: Compressing objects: 100% (24/24), done.
remote: Total 161 (delta 12), reused 12 (delta 4), pack-reused 131
.
.
.

뭔가가 좌르륵 출력되면서 steemblog 이름으로 hexo 블로그가 생성되게 됩니다.

윈도우 탐색기에서 보면

위와같이 여러가지 파일과 폴더들이 생성되었네요.

이제 명령 프롬프트에서 다음과 같은 명령으로

D:\blog>cd steemblog

D:\blog\steemblog>npm install

생성한 steemblog 폴더 안으로 이동해서 npm install 명령을 실행하여 노드 모듈을 설치해 줍니다.

여기까지 해서 hexo 설치 작업은 끝났구요.

이제 hexo serve -o 명령어를 이용해서 hexo 서버를 실행해 줍니다.

D:\blog\steemblog>hexo serve -o
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

그러면 위와같은 메시지가 출력되면서

웹 브라우저에 http://localhost:4000/ 사이트가 열리면서

방금 설치한 hexo 블로그 사이트를 확인할 수 있습니다.

이제 다음 시간에는 이 hexo 블로그에 스팀 글을 가져와서 올리는 것을 해보도록 하겠습니다.

아마도 쉽지 않은 작업이 될 것 같은데... 열심히 연구해 보겠습니다.

그럼 여러분들 주말 잘 보내시구요~

오늘 하루도 행복하세요~