GitHub Hexo Blog 설치 및 Next 테마 설치하기

Ubuntu 에서 Hexo 설치

필요한것들

  • Github 계정
  • Git

설치 환경

  • Ubuntu 16.04 Server 64Bit

Nodejs, Hexo 설치

Nodejs 설치

Hexo 설치를 위해서는 Node.js 가 필수적으로 설치되어 있어야 한다.
아래 명령어를 입력하여 설치를 해준다.

$ curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
$ sudo apt install -y nodejs

이 과정이 귀찮다면….

$ git clone https://github.com/tenn6871/hexoinstallsh.git
$ cd hexoinstallsh/
$ sh install.sh 

별거는 아니지만 스크립트로 NVM, NodeJS, Hexo-cli 한방 설치되게 만들어 뒀다.

Hexo 설치

깃허브에서 username.github.io repository를 생성한다.

1

repository 생성이 끝났다면 아래 명령어를 입력하여 Hexo와 배포를 위한 플러그인을 설치한다.

$ sudo npm i hexo-cli -g ##node설치시 sh로 설치했다면 skip
$ hexo init hexoblog
$ cd hexoblog/
$ npm i
$ npm i hexo-deployer-git -S

Hexo를 아래와 같은 명령어로 동작시켜 정상적으로 동작하는 지 확인한다.

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

http://locahost:4000이나 http://127.0.0.1:4000으로 접속해서 아래와 같은 화면이 나온다면 이상 없이 설치가 완료되었다.
2

Hexo 설정하기

정상적으로 설치가 끝났다면 깃허브에 Push하기전 몇 가지 설정이 필요하다.
hexoblog/ 디렉토리 내부 “_config.yml” 파일을 vim이나 vi로 오픈 후 #URL 항목을 찾아 url: 부분을 repo 설정한 주소값으로 수정해준다.

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://username.github.io 
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

#Deployment 를 찾아서 아래와 같이 수정해준다.

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  branch: master
  repo: https://github.com/username/username.github.io

수정이 끝이 나면 Hexo 페이지의 generate 와 deploy 한다.

$ hexo d -g

3

정상적으로 배포가 됐다면 https://username.github.io 에서 확인 가능하다.

Next 테마 설치와 움직이는 배경 사용하기

Next 테마 설치

Next 테마 설치를 위해 아래와 같이 입력한다.

$ cd hexoblog
$ git clone https://github.com/theme-next/hexo-theme-next themes/next
$ ll themes/

4
next 폴더를 확인 후 “_config.yml” 파일을 다시 오픈해주고 아래와 같이 수정해주면 된다.

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

또는 Vim 에서 오픈후 키보드에서 ; 키를 누르고 다음과 같이 입력해준다.

:%s/landscape/next/g
:wq

수정을 끝났다면 터미널에서 아래와 같은 명령어를 입력 해준다.

$ hexo s

http://locahost:4000이나 http://127.0.0.1:4000으로 접속하면 페이지 디자인이 변경된걸 확인가능하다.
5

움직이는 배경 사용하기

움직이는 배경 설치

$ cd hexoblog/
$ git clone https://github.com/theme-next/theme-next-canvas-nest themes/next/source/lib/canvas-nest/

설치가 끝났으니 정상적으로 동작할수 있도록 설정 해준다

$ vim themes/next/_config.yml

설정 파일을 열어주고 키보드의 / 키를 눌러서 canvas_nest 입력하고 엔터 눌러주시면 설정할 부분으로 바로 이동 한다

/canvas_nest

만약 이동이 정상적으로 안된다면 994번째 줄 쯤에 있다.

canvas_nest:
enable: true
onmobile: true # display on mobile or not
color: "0,0,255" # RGB values, 선 색깔 바꿀수 있음
opacity: 0.5 # 선 두께
zIndex: -1 # z-index property of the background
count: 99 # 선 개수

enable : false 부분을 true 으로 바꿔 준다

  • RGB색상표 - 색 바꾸고 싶을때 color 부분에서 Rgb 코드만 수정해주면 된다.

적용된걸 확인 해보려면 다시 아래와 같은 명령어를 입력 하면 된다.

$ hexo s

6
사이트에 접속해보면 마우스에 따라서 무언가가 움직이는 걸 확인할 수 있다.