Hexo 란

Hexo

Hexo 는 Node.js 기반의 정적 블로그 프레임워크 입니다.

• Ruby 기반의 Jekyll
• Go 기반의 HUGO

Markdown 으로 문서를 작성하고
HTML 로 Build 해서
Github pages 에 배포해서 블로그를 운영합니다

@startuml
header skyksit.com
title Hexo 블로그 작성 프로세스

actor Writer
participant "Github\n(Repository A)" as Github
participant "Github\n(OOO.github.io)" as GPages
actor User

Writer -> Writer : post 작성 (markdown)
Writer -> Github : push
Writer -> Writer : build (html)
Writer -> GPages : deploy
User -> GPages : view (webbrowser)
@enduml

설치

요구사항

• Node.js
• Git

Git 설치

Git 을 OS 환경에 맞게 다운받아서 설치합니다

• Git Download

Node.js 설치

Node.js 를 OS 환경에 맞게 다운받아서 설치합니다.

• Windows: Install it with nvs or nvm.
• Mac: Install it with Homebrew or MacPorts.
• Linux (DEB/RPM-based): Install it with NodeSource.

Hexo 설치

전역으로 설치해줍니다

$ npm install -g hexo-cli

Hexo setup

Hexo 블로그용 folder 를 만듭니다

$ hexo init <folder>
$ cd <folder>
$ npm install

Hexo 프로젝트는 아래 같은 폴더 구조를 가지고 있습니다

.
├── _config.yml
├── _config.landscape.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

_config.yml

Hexo 사이트의 설정 파일입니다.
v5.0 부터는 테마용 설정파일의 규칙이 _config.테마명.yml 로 변경되었습니다.
2021년 Hexo 의 최신버전은 5.4.0 입니다

{
  "name": "SkyStudy",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy --generate",
    "deployall": "npm run clean && npm run deploy",
    "server": "hexo server -p 8000"
  },
  "hexo": {
    "version": "5.4.0"
  },
  "dependencies": {
    "hexo": "^5.4.0",
    "hexo-generator-archive": "^1.0.0",
    "hexo-generator-category": "^1.0.0",
    "hexo-generator-index": "^2.0.0",
    "hexo-generator-tag": "^1.0.0",
    "hexo-renderer-ejs": "^1.0.0",
    "hexo-renderer-marked": "^4.0.0",
    "hexo-renderer-scss": "^1.2.0",
    "hexo-renderer-stylus": "^2.0.0",
    "hexo-server": "^2.0.0",
  }
}

scaffolds

포스트를 생성할 때 base 가 되는 파일 둡니다.
기본적으로 draft.md, page.md, post.md 가 있습니다.
특정 양식 파일을 만들어서 scaffolds 에 넣어두고
hexo new 로 해당 양식을 활용하여 포스트를 작성하면
편리합니다

source

html 을 생성할 기준이 되는 markdown post 가 있는 폴더 입니다.
hexo new 로 post 를 생성하여 여기에 생성됩니다.

public

html 이 생성되는 폴더 입니다
hexo build 시에 markdown => html 로 생성되고
public 폴더에 누적됩니다

themes

기본 테마는 landscape 입니다.
테마를 변경할 때 해당 폴더에 테마가 생성되거나
Hexo v5.0 이상부터는 node_modules 로 생성될 수 있습니다.
테마 파일을 제공하는 방식마다 상이합니다.
icarus 테마의 경우 npm install hexo-theme-icarus 로 제공합니다.

실행

package.json 파일을 다음과 같이 수정해주고

  "scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy --generate",
    "deployall": "npm run clean && npm run deploy",
    "server": "hexo server -p 8000"
  }

local 에서 hexo 사이트를 실행해주고

$ npm run server

웹브라우저로 http://localhost:8000 에 접속합니다

글(Post) 작성

Post 생성

## 일반적인 글 생성
## source/_posts/write-markdown-file-name.md 가 생성된다
hexo new post "write-markdown-file-name"

## page 생성
## source/write-markdown-file-name/index.md 가 생성된다
hexo new page "write-markdown-file-name"

## 드레프트 작성시
## source/_drafts/write-markdown-file-name.md 가 생성된다
## _drafts 폴더내의 파일은 Html 로 생성되지 않는다
hexo new draft "write-markdown-file-name"

## _drafts 폴더 파일을 _posts 로 이동할 때
hexo publish post "write-markdown-file-name"

글 내용 작성

생성된 md 파일을 markdown 문법으로 작성합니다
markdown 문법은 기본적인 글 작성기능만 제공하기에
Hexo 에서 공식으로 제공하는 Tag Plugin을 이용하면
유튜브 영상을 넣거나 jsFiddle 의 코드를 넣거나 Gist 파일내용을 넣을 수 있습니다

Tag Plugin을 활용해주면 보다 풍성한 내용의 글을 작성할 수 있습니다

글 내용 확인하기

## build 로 html 을 만들고
$ npm run build
## local webserver 로 확인한다
$ npm run server

배포하기

깃허브 페이지에 배포하기

Hexo 블로그는
markdown 파일(원본소스)이 저장될 저장소(Repository A)와
build 된 html 파일이 저장될 저장소(사용자계정명.github.io)가 필요합니다

@startuml
header skyksit.com
title Hexo 블로그 작성 프로세스

actor Writer
participant "Github\n(Repository A)" as Github
participant "Github\n(OOO.github.io)" as GPages
actor User

Writer -> Writer : post 작성 (markdown)
Writer -> Github : push
Writer -> Writer : build (html)
Writer -> GPages : deploy
User -> GPages : view (webbrowser)
@enduml

깃허브페이지 저장소 생성

Github 에 Repository를 생성합니다
개인도메인이 없는 분들은 사용자아이디.github.io 저장소를 생성합니다

배포 플러그인 설치

사용자아이디.github.io 저장소에 build 된 html 을 배포 하기 위해서는
hexo-deployer-git 플러그인이 필요합니다

$ npm install --save hexo-deployer-git

배포 _config.yml 설정

_config.yml 에서 배포시 대상이 되는 github repository 를 설정해줍니다.
branch 는 일반적으로 gh-pages 를 사용하지만 아무거나 해도 됩니다.

deploy:
  type: 'git'
  repo: https://github.com/skyksit/skyksit.github.io
  branch: gh-pages

배포하기

hexo generate => hexo deploy 를 해주면 배포가 됩니다

하지만 위에서 npm script 로 deployall 이라는 걸 만들었기 때문에

  "scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy --generate",
    "deployall": "npm run clean && npm run deploy",
    "server": "hexo server -p 8000"
  }

$ npm run deployall

npm run deployall 해주면 clean, generate, deploy 가 순차적으로 실행되면서
한번에 새로운 HTML 파일이 생성되고 배포가 됩니다.

배포내용 확인

https://skyksit.github.io 에서 배포된 내용을 웹브라우저로 확인합니다.
github pages 에 html 파일이 적용되기까지는 수분이 걸릴 수 있습니다.
(워낙 많은 인원이 사용하는 서비스이고, 캐쉬가 걸려있기 때문에 반영하는 데 시간이 걸립니다)

저장소를 github pages 서비스로 설정

사용자아이디.github.io 저장소의 Settings > Pages 메뉴로 들어갑니다

접근할 수 있는 URL 주소와
html 적용되는 Branch 명과 root 주소를 설정할 수 있습니다.

Theme 선택은 Jekyll 로 만든 블로그가 아니기 때문에 선택하지 않습니다.
개인도메인이 있다면
Custom domain 을 설정할 수 있습니다.
개인도메인 사용시에 Enforce HTTPS 로 강제적으로 적용할 수 있습니다.

소스 별도저장하기

소스 저장용 저장소 만들기

Github 에 사용자아이디.github.io.src 저장소를 만듭니다.
여기는 build 되기전의 markdown 문서들을 저장하는 용도입니다.

Private, Add a README file 을 체크해줍니다.

저장소 연결하기

## origin 명칭으로 github 저장소 추가
$ git remote add origin skyksit.github.io.src

## 연결결과 확인
git remote -v


origin    https://github.com/skyksit/skyksit.github.io.src.git (fetch)
origin    https://github.com/skyksit/skyksit.github.io.src.git (push)

저장소에 소스 푸시

## working directory => staging area 로 추가
git add .

## staging area (Index) => Local Repository 적용
git commit -m "FEAT:Add init post"

## Local Repository => Remote Repository 적용
git push -u origin main

## 강제로 업데이트 하고 싶으면
git push -u origin +main

최종관리모습

@startuml
header skyksit.com
title Hexo 블로그 작성 프로세스

actor Writer
participant "Github\n(skyksit.github.io.src)" as Github
participant "Github\n(skyksit.github.io)" as GPages
actor User

Writer -> Writer : post 작성 (markdown)
Writer -> Github : push
Writer -> Writer : build (html)
Writer -> GPages : deploy
User -> GPages : view (webbrowser)
@enduml