DevBlog

[블로그]Hexo + Github 블로그 만들기

Github, Hexo, blog, hueman

안녕하세요. 이번 글에서는 Hexo 와 Github 을 이용하여 블로그를 만드는 법에 대해 알아보겠습니다.

개발자에게 SNS란?…

  • 강력한 브랜딩 수단
  • 커리어 관리
  • 개인 공부
  • 등등

이 있는데요. 이에따른 많은 노력과 투자가 필요하죠. 당연히 티스토리, 네이버블로그, 워드프레스 등 많은 블로그들이 있지만 이번 글에서는 Hexo + Github 을 이용하여 만들어보겠습니다.

우선 Hexo + Github 장점으로는

  • 정적 웹페이지
    -> DB가 필요없고 구축이 쉬움
    -> 단순문서 형태 => 속도가 빠름
    -> 백업/복원이 쉬움
    -> 비용이 저렴
  • JS + Nodejs 기반
  • 마크다운(MarkDown) 지원
  • Github pages 호스팅 지원
  • 다양한 테마
  • 다양한 플러그인

등을 뽑을 수 있습니다. 여기서 *“Hexo란 무엇인가?. “* 라고 궁금해 하실 분들이 많으실텐데요. Open-Source Static Site Generator 입니다. 영어그대로 해석하면 오픈소스 기반의 정적 사이트 제너레이터인데, 공식 홈페이지에는 빠르고 심플하고 강력한 블로그 프레임워크(A fast, simple & powerful blog framework) 라 명시되 있어요. 이정도면 느낌 오시죠?

자 그럼 이제 본론으로 넘어가서, 설치를 시작해 보겠습니다.

설치 전 준비

  1. Github 아이디
  2. Nodejs
  3. Git

첫번째로는 Github 아이디가 있어야 합니다. 들어가서 회원가입을 하고 나서 New repository를 클릭합니다.

  • Repository name : USERNAME.github.io
  • Public 선택

USERNAME 에는 자신의 username 을 입력합니다. Create Repository 를 클릭해 Repository 를 생성합니다. 두번째로는 2번의 링크를 따라가 LTS(안정화 버전을 다운받는 걸 추천드려요) 를 설치합니다. 마찬가지로 Git Bash를 이용하기 위해, 3번의 Git을 따라 들어가 설치해 줍니다.이제 준비는 끝났어요.

Hexo 설치

이제 블로그를 만들고 싶은 폴더로 들어가서 마우스 오른쪽 클릭을 하여 Git Bash를 클릭합니다.

1
2
3
4
5
6
npm install hexo-cli -g  #전역(-g)으로 hexo-cli 설치
hexo init blog           #새로운 프로젝트나 패키지를 만들때 사용. package.json을 만듬. 
cd blog                  
npm install              #패키지 설치
npm install hexo-deployer-git --save # github에 올리기 위해서 설치(배포용 모듈)
hexo server              #서버구동(=hexo s)

여기서 init 은 새로운 프로젝트나 패키지를 만들때 사용하는데, package.json을 파일을 만들어줘요.이제 기본적인 설치는 끝났어요. 정말 간단하죠?.

이제 위의 링크와 같이 로컬의 4000포트로 접속이 가능해요.(만약 접속이 안된다면, 위의 Hexo 설치 과정을 다시한번 확인해 봐야합니다.) 접속이 된 것을 확인하셨으면 이제 Github 와 연결해야겠죠? 일단 서버를 종료합니다. 서버를 끄는 방법은 터미널에서 ctrl+c 를 입력하면 되요.

다시 방금 만든 blog 폴더에 들어가 _config.yml 이라는 파일의 아래 내용을 수정해 줍니다.

1
2
3
4
5
# Deployment
deploy:
 type: git
 repo: https://github.com/아이디/아이디.github.io.git
 branch: master

아이디 는 처음만든 본인의 아이디(username)를 입력하시면되요. 이제 다시 Git Bash로 넘어와

1
2
hexo generate #배포용 파일을 생성
hexo deploy   #Github에 배포

위의 내용을 한번에 입력하시려면,

1
hexo deploy --generate # =(hexo d -g)

이제 정말 끝났네요. 이제 본인의 블로그에 들어가 보세요.

  • https://아이디.github.io/

잘 작동하나요? 이상 Hexo와 Github 를 사용하여 블로그 만드는 법을 알아보았습니다.

Share