새소식

반응형
Programming

Hexo 블로그 Github를 이용해 만들어보기

  • -
반응형

블로그를 만들고 꾸미다 보니 나같은 사람들이 많을 거라는 생각에서

Hexo를 이용해 Github 블로그 세팅 하는 방법들을 처음부터 하나씩 보고자 한다.

(Hexo에서 티스토리로 이전하였다.)

Hexo

우선 Hexo는 Node.js 기반의 정적 사이트 생성기(Static site generator)이다. 포스트의 경우 md파일로 작성이 가능하고 github를 이용하면 무료로
블로그 운영이 가능하다. md로 작성하기 때문에 대부분에 IDE에서 작성하면서 미리보기를 할 수 있으며 node를 이용하면 로컬에서 확인 가능하다.
공식 사이트에서는 빠르고 간단하고 파워풀한 블로그 프레임워크라고 소개하고 있다.
npm을 통해 쉽게 설치가 가능하고 배포역시 쉽게 가능한 것이 장점이다.
한글문서로도 잘 정리가 되어있어 참고하기 좋다. Hexo 한글 튜토리얼

설치 전 준비

저는 Github를 이용하여 Hexo 블로그를 세팅 하려고 하기때문에 git, github, node 설치가 선행되어야 합니다.

각각의 설치 방법들은 간단하고 잘 쓰여진 글들이 많으니 참고하시기 바랍니다.

Hexo 설치하기

node.js를 설치하면 사용 할 수 있는 npm을 이용해서 간편히 설치 할 수 있습니다.

npm install hexo-cli -g

블로그 Setup

아래 명령을 실행하여 간단하게 hexo를 초기화 할수 있습니다.

hexo init <프로젝트이름>
cd <프로젝트이름>
npm install

초기화가 완료되면 아래와 같은 구조로 세팅됩니다.

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

블로그 설정

_config.yml이 root경로에 생성되는데 해당 파일을 통해서 블로그에 대한 설정을 세팅할 수 있습니다.
자세한 설명은 Hexo의 Cofiguration을 통해 확인해 볼수 있다.

로컬테스트

간단한 설정을 하고 나서 바로 로컬 서버에서 띄워 확인해 볼 수 있습니다.

hexo server
hexo s  #단축명령어

서버가 구동되면 아래와 같은 문구가 출력되며 http://localhost:4000에서 확인 할 수 있습니다.

Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

Github 블로그 호스팅

Github에서 새로운 repository를 생성합니다.
Repository name을 username.github.io의 형식으로 기재하고 public으로 만들어 줍니다.

github에서 repository 생성

설정하기

_config.yml 에서 Deployment 항목을 설정해 준다.

# Deployment
deploy: 
  type: git
  repo: repository 주소
  branch: master 

Github에 배포하기

로컬에서 정상적으로 작동되었다면 hexo cli를 통해 Github에 쉽게 배포를 해보자.

정적리소스 생성

hexo generate 
hexo g  #단축 명령어

public 폴더가 생성되어 배포가 가능하다.

배포하기

hexo deploy
hexo d  #단축 명령어

배포 중 오류가 발생 하면 아래 이슈체크를 확인

Generate와 Deploy 동시실행

아래와 같이 Generate와 Deploy를 동시실행 할 수도 있다.

hexo deploy --generate  #Deploy 전에 Generate를 해준다.
hexo d -g  #단축 명령어

hexo generate --deploy  #Generate 후에 Deploy를 해준다.
hexo g -d  #단축 명령어

https://username.github.io 로 접속하면 deploy된 사이트가 확인 가능하다.

이슈체크

배포시 아래와 같은 에러가 발생하면

ERROR Deployer not found: git

hexo-deployer-git 플러그인을 설치해준다.

npm install hexo-deployer-git --save

업데이트 시

간혹 업데이트가 바로 이루어 지지 않을 경우에는 아래와 같이 public을 clean시켜준 후 배포를 하면 된다.

hexo clean
hexo d -g

글쓰기

hexo new post <포스트이름>

source/_post 폴더에 포스트이름.md 으로 새로운 마크다운 파일이 생성됩니다.
포스트내용을 작성한후에 다시한번 clean과 generate 그리고 deploy를 해주면 정상 반영된다.

이상으로 Hexo 블로그 만들기에 대한 포스팅을 마친다.
잘못된 사항이나 궁금한 점은 댓글로 남겨주시면 감사하겠습니다.

반응형
Contents

포스팅 주소를 복사했습니다

이 글이 도움이 되었다면 공감 부탁드립니다.