01_DevTIL ✍0_DevLog 👻

Hexo 설치

Hexo 설치

hexo, node.js
목차

intro

무언가를 배울때 하루하루의 기록을 남기는 것은 자기계발의 첫 스타트라고 생각합니다. 머리속에 있는 것을 그대로 옮기는 작업은, 정리하며 내것으로 만들기에도 좋고, 그때그때의 생각을 기록하는 용으로도 좋기 때문입니다. 그래서 우리는 일기를 쓰고, 일지를 쓰고, 이렇게 블로그도 만들며 기록합니다. 특히나 개발은 많은 개념을 숙지하면서 공부해야하기 때문에 블로깅 자체가 공부가 됩니다.

이왕 node.js까지 배우고 있으니, jekyll이 아닌, hexo를 사용해서 블로그를 만들었습니다.

## 0. Github 간단 소개

깃에 대해서 잘 알고 있다면 1번으로 넘어가도 됩니다.

 ### 0-1. 원격저장소 [Git](https://backlogtool.com/git-tutorial/kr/intro/intro1_1.html)이란 소스코드를 효과적으로 관리하기 위해 개발된 '분산형 버전 관리 시스템'입니다. git은 저장소에서 관리를 하는데, 내 컴퓨터에 있는 저장소를 `로컬저장소`라고 하고, 웹 상에 있는 저장소를 `원격저장소`라고 합니다. 우리가 흔히 알고 있는 원격저장소를 제공하는 서비스에는 **깃헙, 비트버킷, 깃랩**등이 있습니다다. 헥소를 이용한 블로그 개설을 위해서는 **깃헙**을 사용해야합니다. ### 0-2. 원격저장소 Github이 제공하는 정적웹사이트, Github Pages Github에서 제공하는 Static Website, Github Pages가 있다. 깃헙 저장소에 리소스를 `push`만 해도(push란 저장소에 리소스를 넣을때 사용하는 명령어) 간단하게 웹사이트를 만들 수 있다. 즉, 다른 호스팅 서비스의 도움없이, 원격저장소에 올리기만해도 호스팅이 가능하다. ### 0-3. 호스팅을 편리하게 만들어주는 generator, Jekyll & HEXO

사실, hexo나 jekyll이 없이도, html,css,javascript를 통해서도 호스팅이 가능하나, 블로그 구성상 글을 등록하고, 리스트를 보여주며, 댓글을 달 수 있는, 블로그가 갖고 있는 기능을 편라히게 사용하기 위해서 hexo나 jekyll과 같은 generator를 사용해야 한다.

Static Website generator는 마크다운을(.md 파일)로 편집 후 html로 변환할 수 있도록 돕는다. generator에는 jekyll과 HEXO가 있는데, jekyll은 ruby기반, HEXO는 node.js기반이다.

그럼 generator을 셋팅하기 전, 내 컴퓨터에 디렉토리(폴더)를 생성하고, 원격저장소(github)에 연결을 시켜보자.

 ## 1. Github Pages로 정적 페이지 호스팅하기 Github Pages를 사용하기 위해 Github의 원격저장소에 리소스를 올려야한다는 사실을 잊지말자. 아래 그림의 저장소들이 필요하다. ### 1-1. 로컬에 저장소 생성하기 내 컴퓨터 원하는 장소에 폴더를 생성한다. terminal없이도 생성해도 된다. 아래는 terminal을 이용한 생성방법 
1
2
3
4
<!-- 바탕화면에 생성한다는 가정 
(글쓴이는 운영체제가 mac입니다.) -->
$ cd Desktop
$ mkdir github-blog

바탕화면에 github-blog라는 이름의 폴더가 생성이 되었다.

 ### 1-2. 원격 저장소 생성하기 (Github Repository) github pages를 통해 손쉽게 `USERNAME.github.io`를 통해 정적 페이지를 호스팅 할 수 있다. > 번외 > gh-pages 브랜치를 생성하면, 각 repository마다 `USERNAME.github.io/레포이름`으로 호스팅이 가능하다.

지금부터 말하는 USERNAME은, 당신의 아이디이다. 깃헙주소 뒷부분 /이후 붙는 유저네임을 붙이면된다. 아래 순서로 깃 저장소를 생성한다.

  1. New Repository > 이름은 꼭 USERNAME.github.io로 적용한다.
  2. Public선택.
  3. 원격저장소 생성 완료
 ### 1-3. 원격 저장소와 로컬 저장소 연결하기 내 컴퓨터에 저장소를 만들고, 원격에도 만들었으니, 연결을 해야한다. 연결하는 방법은 간단하다. 지금은 터미널을 열고 명령어를 입력해야하는 타이밍이다.
  1. 1번에서 만들었던 디렉토리로 이동한다.
  2. 해당 디렉토리에서 원격저장소의 git을 clone한다. clone 뒤에 생성한 원격저장소의 주소를 입력하는데, 이는 remote가 동시에 일어나므로, 따로 remote 명령어를 입력안해도 된다.
  3. 연결 테스트겸, READMD.md 파일을 생성한다.
  4. 생성된 README.md파일을 푸시한다. (commit > push)

위의 순서를 코드로 옮기면. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- 1. 해당 디렉토리로 이동 -->
cd Desktop
cd github-blog

<!-- 2. git clone -->
git clone https://github.com/feel5ny/TEST.github.io.git
cd test.github.io


<!-- 3. README.md파일 생성 -->
echo README.md

<!-- 4. 원격저장소에 올리기 -->
git add --all
git commit -m "first commit"
git push -u origin master

step 1이 끝났다! 그리고 벌써 호스팅이 완료되었다.
USERNAME.github.io에 가보자.

–
아직 블로그의 형태를 띄지 않았다. 위에서 말했던 generator를 이용하여 블로그의 구조를 짤 예정인데, 우리는 HEXO를 이용할 것이다.

## 2. Hexo 설치하기 Hexo는 node.js기반이기 때문에 npm을 통해 쉽게 설치가 가능하다. 다양한 plugin과 테마를 지원하고 있다.

2-1. Hexo 설치 전 준비

Hexo는 말했다 싶이 node.js 기반이기 때문에 node.js가 로컬에 기본적으로 설치되어있어야 한다. node.js는 공식 사이트에서 설치가 가능하다. stable버전을 추천한다.

2-2. Hexo npm 설치하기

Node.js를 설치 한 후에 아래 CLI를 순서대로 입력하여 npm을 설치한다.

1
2
3
4
npm install hexo-cli -g
hexo init blog
cd blog
npm install

node.js를 설치하면 npm을 사용할 수 있는데, 패키지 중에 hexo-cli를 설치한다. blog파일을 생성하여 hexo를 초기화한다. blog 디렉토리로 이동후, npm install을 사용하여, blog에 필요한 파일들을 자동으로 설치한다.

2-3. 설정파일 업데이트

위의 순서가 끝나면, root 디렉토리에 _config.yml이라는 설정파일이 생성된다. (yml파일은 사람이 쉽게 읽을 수 있는 데이터 직력화 양식으로,…more) 해당 파일에 블로그 정보를 수정한다. 나머지 정보는 hexo 공식 문서에서.

  1. Site 정보
    블로그 정보를 수정할 수 있다.

    1
    2
    3
    4
    title: 제목(html head에 들어가는 title태그에 들어가는 제목과 같다.)
    subtitle: 
    description:
    author: Nayoung Kim

  2. URL 정보
    블로그 URL 정보를 설정할 수 있다.

    1
    2
    3
    4
    url: https://USERNAME.github.io
    root: /
    permalink: :year/:month/:day/:title/
    permalink_defaults:

  3. Github 정보
    배포를 위해서 저장소 주소를 추가한다.

    1
    2
    3
    4
    # Deployment
    deploy:
      type: git
      repo: https://github.com/feel5ny/TEST.github.io.git

테마별로 구성을 수정하는 스타일이 다르다. 테마 적용하기 파트에서 anatol 레이아웃 수정방법을 설명하겠다.

### 2-4. 로컬에서 테스트하기 
1
hexo server

blog 디렉토리에 위치되어있는 상태에서 서버를 구동한다. blog에 위치되어있지 않으면 서버구동이 안된다. 서버 구동이 완료되면 4000번 포트로 접속이 가능하다.

테스트시 구동이 잘 안될 경우, 서버를 껐다가 다시 실행해 보면된다. 서버를 끄는 방법은 터미널에서 ctrl+c를 두번 입력하면 된다.

## 3. Github에 배포하기 로컬에서 테스트를 완료하면 USERNAME.github.io 주소로 배포해보자.

3-1. hexo 설정을 통해 정적 리소스를 생성하기

1
hexo generate

위 명령어를 입력하면, github에 올라갈 리소스만 정리되어 따로 폴더가 생성된다.

3-2. 배포하기

1
hexo deploy

위 명령어를 입력하면 배고가 완료된다. generate와 deploy를 한번에 진행하고 싶은 경우 아래 명령어를 입력한다. 

1
hexo deploy --generate

약자로 hexo d g를 사용해도 됩니다.

3-3. 배포가 잘 안될 경우

1
2
hexo clean
hexo deploy --generate
profile

author.

Joy Kim @feel5ny

웹 프론트엔드 개발자입니다. 글쓰기와 정리를 좋아합니다.

📚