Hexo Blog 만들기

2020-07-13

Page content

개요

간단하게 Hexo 블로그를 만들어 본다.

I. 필수 파일 설치

1단계: nodejs.org 다운로드
- 설치가 완료 되었다면 간단하게 확인해본다.

$ node -v

2단계: git-scm.com 다운로드
- 설치가 완료 되었다면 간단하게 확인해본다.

$ git --version

3단계: hexo 설치
- hexo는 npm을 통해서 설치가 가능하다.

$ npm install -g hexo-cli

II. 깃허브 설정

두개의 깃허브 Repo를 생성한다.
- 포스트 버전관리 (name: myblog)
- 포스트 배포용 관리 (name: rain0430.github.io)
- rain0430 대신에 각자의 username을 입력하면 된다.
이 때, myblog repo를 git clone을 통해 적당한 경로로 내려 받는다.

$ git clone your_git_repo_address.git

III. 블로그 만들기

(옵션) 적당한 곳에 경로를 지정한 다음 다음과 같이 폴더를 만든다.

$ mkdir makeBlog # 만약 Powershell 이라면 mkdir 대신에 md를 쓴다. 
$ cd makeBlog

임의의 블로그 파일명을 만든다.

$ hexo init myblog
$ cd myblog
$ npm install
$ npm install hexo-server --save
$ npm install hexo-deployer-git --save

+ ERROR Deployer not found: git
+ hexo-deployer-git을 설치 하지 않으면 deploy시 위와 같은 ERROR가 발생합니다.

_config.yml 파일 설정
- 싸이트 정보 수정

title: 제목을 지어주세요
subtitle: 부제목을 지어주세요
description: description을 지어주세요
author: YourName

+ 블로그 URL 정보 설정

url: https://rain0430.github.io
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

+ 깃허브 연동

# Deployment
deploy:
  type: git
  repo: https://github.com/rain0430/rain0430.github.io.git
  branch: main

IV. 깃허브에 배포하기

배포 전, 터미널에서 localhost:4000 접속을 통해 화면이 뜨는지 확인해본다.

$ hexo generate
$ hexo server
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

화면 확인이 된 이후에는 깃허브에 배포한다.
사전에, gitignore 파일에서 아래와 같이 설정을 진행한다.

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/

최종적으로 배포를 진행한다.

$ hexo deploy

배포가 완료가 되면 브라우저에서 USERNAME.github.io로 접속해 정상적으로 배포가 되었는지 확인한다.

V. 테마 설정하기

신 버전 (2021.6 버전)

설정하는 방식이 한결 쉬워졌다.
- 참고: https://ppoffice.github.io/hexo-theme-icarus/uncategorized/getting-started-with-icarus/#install-npm
실제 윈도우 10에서 적용을 해 보았다.
먼저 icarus 버전을 설치한다.

$ npm install -S hexo-theme-icarus

실제 윈도우에서는 아래와 같이 적용 되었다.

C:\Users\1\Desktop\myblog>npm install -S hexo-theme-icarus
> inferno@7.4.8 postinstall C:\Users\1\Desktop\myblog\node_modules\inferno
> opencollective-postinstall
Thank you for using inferno!
If you rely on this package, please consider supporting our open collective:
> https://opencollective.com/inferno/donate
npm WARN hexo-theme-icarus@4.2.0 requires a peer of bulma-stylus@0.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN hexo-theme-icarus@4.2.0 requires a peer of hexo-renderer-inferno@^0.1.3 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ hexo-theme-icarus@4.2.0
added 17 packages from 13 contributors and audited 211 packages in 1.804s
16 packages are looking for funding
  run `npm fund` for details
found 0 vulnerabilities

이번에는 _config.yml에서 theme:landscape를 아래와 같이 수정한다.

theme: icarus

또는 아래와 같이 바꿀 수도 있다.

$ hexo config theme icarus

필자는 직접 터미널에서 수정했다.
그런데, 에러가 발생했다.

C:\Users\1\Desktop\myblog>hexo config theme icarus
INFO  Validating config
INFO  =======================================
 ██╗ ██████╗ █████╗ ██████╗ ██╗   ██╗███████╗
 ██║██╔════╝██╔══██╗██╔══██╗██║   ██║██╔════╝
 ██║██║     ███████║██████╔╝██║   ██║███████╗
 ██║██║     ██╔══██║██╔══██╗██║   ██║╚════██║
 ██║╚██████╗██║  ██║██║  ██║╚██████╔╝███████║
 ╚═╝ ╚═════╝╚═╝  ╚═╝╚═╝  ╚═╝ ╚═════╝ ╚══════╝
=============================================
INFO  === Checking package dependencies ===
ERROR Package bulma-stylus is not installed.
ERROR Package hexo-renderer-inferno is not installed.
ERROR Please install the missing dependencies your Hexo site root directory:
ERROR npm install --save bulma-stylus@0.8.0 hexo-renderer-inferno@^0.1.3
ERROR or:
ERROR yarn add bulma-stylus@0.8.0 hexo-renderer-inferno@^0.1.3

위 에러 메시지를 그대로 복사하여 다시 설치를 진행하였다.

C:\Users\1\Desktop\myblog>npm install --save bulma-stylus@0.8.0 hexo-renderer-inferno@^0.1.3
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ bulma-stylus@0.8.0
+ hexo-renderer-inferno@0.1.3
added 174 packages from 88 contributors and audited 385 packages in 5.739s
25 packages are looking for funding
  run `npm fund` for details
found 0 vulnerabilities

그 이후에, hexo server를 실행하여 실제 잘 적용이 되었는지 확인을 하였다.

$ hexo server

C:\Users\1\Desktop\myblog>hexo server
INFO  Validating config
Inferno is in development mode.
INFO  =======================================
 ██╗ ██████╗ █████╗ ██████╗ ██╗   ██╗███████╗
 ██║██╔════╝██╔══██╗██╔══██╗██║   ██║██╔════╝
 ██║██║     ███████║██████╔╝██║   ██║███████╗
 ██║██║     ██╔══██║██╔══██╗██║   ██║╚════██║
 ██║╚██████╗██║  ██║██║  ██║╚██████╔╝███████║
 ╚═╝ ╚═════╝╚═╝  ╚═╝╚═╝  ╚═╝ ╚═════╝ ╚══════╝
=============================================
INFO  === Checking package dependencies ===
INFO  === Checking theme configurations ===
WARN  None of the following configuration files is found:
WARN  - C:\Users\1\Desktop\myblog\_config.icarus.yml
WARN  - C:\Users\1\Desktop\myblog\node_modules\hexo-theme-icarus\_config.yml
INFO  Generating theme configuration file...
INFO  C:\Users\1\Desktop\myblog\_config.icarus.yml created successfully.
INFO  To skip configuration generation, use "--icarus-dont-generate-config".
INFO  === Registering Hexo extensions ===
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

정상적으로 연결이 되는 것을 확인할 수 있다.

구 버전 (2020.6 버전)

혹시 몰라서 기존에 했던 방식을 남겨둔다.
ICARUS 테마로 변경

$ git submodule add https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus

ICARUS 테마 파일을 themes 폴더 안에 이식하는 코드다.
그 다음, _config.yml에서 theme = icarus로 변경한다.
그 다음, hexo server 실행 시, 에러가 날 것이다.
- 에러 예제

ERROR Package bulma-stylus is not installed.
ERROR Package hexo-component-inferno is not installed.
ERROR Package hexo-renderer-inferno is not installed.
ERROR Package inferno is not installed.
ERROR Package inferno-create-element is not installed.
ERROR Please install the missing dependencies your Hexo site root directory:
ERROR npm install --save bulma-stylus@0.8.0 hexo-component-inferno@^0.2.4 hexo-renderer-inferno@^0.1.3 inferno@^7.3.3 inferno-create-element@^7.3.3

위와 같은 에러가 발생이 되면, 하단의 패키지를 설치한다.

$ npm install bulma-stylus
$ npm install hexo-component-inferno
$ npm install hexo-renderer-inferno
$ npm install inferno
$ npm install inferno-create-element
$ npm install --save bulma-stylus@0.8.0 hexo-component-inferno@^0.4.0 hexo-renderer-inferno@^0.1.3 inferno@^7.3.3 inferno-create-element@^7.3.3
$ hexo server

로컬 테스트가 완료가 되면, 깃허브로 배포를 진행한다.

$ hexo deploy --generate

이제, 아래와 같이 소스 업데이트를 진행한다.

$ git add .
$ git commit -m "add: new post updated"
$ git push origin master

Youtube Tutorial

유투브 영상을 확인해봅니다. 유투브 영상은 테마까지 반영은 한 것은 아니니, 참고하시기를 바랍니다.