GitHub Pages 에 Hexo 블로그 만들기

Node.js 기반의 정적 블로그 Hexo를 GitHub Pages에 올려봅니다.
https://hexo.io/ko/docs/

환경

• 2020월 5월
• M1 맥미니
• MacOS 터미널

준비

• Node.js 설치
• 터미널 실행

Hexo 설치

• 패키지 설치

$ npm install -g hexo-cli
...

• 애플리케이션 생성

$ hexo init <folder>
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO  Install dependencies
INFO  Start blogging with Hexo!

$ cd <folder>
$ npm install
...

• 서버 실행

$ hexo server
# or 
$ hexo s
INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

---

테마 설치

• 테마 파일 clone

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

Cloning into 'themes/icarus'...
remote: Enumerating objects: 5931, done.
remote: Counting objects: 100% (235/235), done.
remote: Compressing objects: 100% (63/63), done.
remote: Total 5931 (delta 98), reused 226 (delta 97), pack-reused 5696
Receiving objects: 100% (5931/5931), 25.53 MiB | 12.05 MiB/s, done.
Resolving deltas: 100% (3317/3317), done.

• _config.yml 테마 설정

$ nano _config.yml

#theme: landscape #기존테마
theme: icarus

• Hexo 구동

$ hexo s
NFO  Validating config
INFO  =======================================
 ██╗ ██████╗ █████╗ ██████╗ ██╗   ██╗███████╗
 ██║██╔════╝██╔══██╗██╔══██╗██║   ██║██╔════╝
 ██║██║     ███████║██████╔╝██║   ██║███████╗
 ██║██║     ██╔══██║██╔══██╗██║   ██║╚════██║
 ██║╚██████╗██║  ██║██║  ██║╚██████╔╝███████║
 ╚═╝ ╚═════╝╚═╝  ╚═╝╚═╝  ╚═╝ ╚═════╝ ╚══════╝
=============================================
INFO  === Checking package dependencies ===
ERROR Package bulma-stylus is not installed.
ERROR Package hexo-renderer-inferno is not installed.
ERROR Package hexo-component-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-renderer-inferno@^0.1.3 hexo-component-inferno@^0.11.0 inferno@^7.3.3 inferno-create-element@^7.3.3
ERROR or:
ERROR yarn add bulma-stylus@0.8.0 hexo-renderer-inferno@^0.1.3 hexo-component-inferno@^0.11.0 inferno@^7.3.3 inferno-create-element@^7.3.3

• 응? 시키는대로 추가 패키지 설치

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

$ hexo s
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  - /Users/nonz/dev/nodejs/blog-a/_config.icarus.yml
WARN  - /Users/nonz/dev/nodejs/blog-a/themes/icarus/_config.yml
INFO  Generating theme configuration file...
INFO  /Users/nonz/dev/nodejs/blog-a/_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.
...

• 성공, 깔끔한 테마로 변경됨
  

실 사용은 안할꺼라 각종 _config.yml 설정은 넘어갑니다...

---

GitHub 저장소에 배포

• GitHub 빈 Public Repository 생성
  • (ex) xxx.gitbub.io
• Repository 설정의 Pages 에서 활성화 확인 (Private Repo는 불가)
• 배포 플러그인 설치
  • [Doc] Deployment

$ npm install --save hexo-deployer-git
...

# 설정파일 수정
$ nano _config.yml

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: https://github.com/xxx/xxx.github.io
  branch: main

• 배포

# 정적리소스 생성
$ hexo generate or hexo g
INFO  Validating config
Inferno is in development mode.
INFO  =======================================
 ██╗ ██████╗ █████╗ ██████╗ ██╗   ██╗███████╗
 ██║██╔════╝██╔══██╗██╔══██╗██║   ██║██╔════╝
 ██║██║     ███████║██████╔╝██║   ██║███████╗
 ██║██║     ██╔══██║██╔══██╗██║   ██║╚════██║
 ██║╚██████╗██║  ██║██║  ██║╚██████╔╝███████║
 ╚═╝ ╚═════╝╚═╝  ╚═╝╚═╝  ╚═╝ ╚═════╝ ╚══════╝
=============================================
INFO  === Checking package dependencies ===
INFO  === Checking theme configurations ===
INFO  === Registering Hexo extensions ===
INFO  Start processing
INFO  Files loaded in 286 ms
...

# 배포
$ hexo deploy --debug
... GitHub 계정정보 입력, push

• 확인
  • (ex) https://xxx.gitbub.io

deploy 할때 403 에러 발생하는 경우

fatal: unable to access 'https://github.com/xxx/xxx.github.io/': The requested URL returned error: 403

_config.yml Repo URL에 https://계정@github.com/... 하거나 로컬 git username 을 git 계정으로 설정