ToolBlog

Hexo를 이용한 블로그 만들기

⏱ 읽기 소요 시간: 17 분

지난 포스트에서 정적블로그 플랫폼의 종류와 차이에 대해 소개했습니다.

이번에는 Hexo를 이용한 블로그 만드는 방법에 대해 정리해봅시다.

github + hexo

1. Git, Nods.js 설치하기

Hexo 블로그를 만들기 전, Git과 Node.js가 설치되어 있어야 합니다.
Git과 Node.js가 이미 설치되어 있으신 분들은 2번부터 읽으시면 됩니다:)

1) Git 설치

Git 다운로드 페이지

Git Download Homepage

2) Node.js 설치

Node.js 다운로드 페이지

Node.js Download Homepage

2. GitHub 프로젝트(Repository) 만들기

블로그의 포스트를 관리할 GitHub Repository를 만드는 과정입니다.

GitHub 홈페이지
  • GitHub에 회원가입 후, 로그인을 합니다.

new repository

  • 로그인 후, 우측 상단에 있는 초록색의 New를 눌러줍니다.

create a new repository

  • Repository name에는 GitHub 계정명과 동일한 username을 사용하여 username.github.io로 작성한 후, Create repository 버튼을 누릅니다.

3. Hexo 설치하기

  • Git을 설치하면,Git Bash가 있으실 겁니다.
1) Git Bash를 실행시킵니다.

Git Bash

2) 터미널 화면에 $를 제외한 부분을 작성하고 Enter를 누르면,
Hexo가 설치됩니다.
1
$ npm install -g hexo-cli
3) 블로그를 만들고 싶은 폴더 위치로 이동합니다.
그 후, 아래 코드를 입력합니다.
blog 자리에 자신이 원하는 블로그 이름을 넣습니다.
1
$ hexo init blog
4) 자신이 원하는 폴더 위치에 blog 이름으로 된 폴더가 생성됩니다.
현재 위치에서 블로그 이름으로 된 폴더로 이동합니다.
1
$ cd blog
5) npm을 설치합니다.
1
$ npm install

4. Hexo 실행해보기

1
$ hexo server

hexo server

  • 로컬서버인 http://localhost:4000로 접속하면, Hexo 블로그가 만들어진 것을 확인할 수 있습니다.
  • Hexo 서버를 종료하려면, Ctrl + C를 눌러줍니다.
  • Tip! 코드를 복사하고 싶은 경우에는 Ctrl + C가 아닌, Ctrl+Ins를 눌러줍니다.

5. Hexo 포스트 작성하기

위와 같이 Hexo 설치가 완료되었다면, 이제 포스트를 작성해볼까요?

  • 기본 명령어와 축약 명령어 중에 편하신 명령어를 입력해 줍니다.
  • hexo new나 hexo n 뒤에는 포스트 제목을 적어줍니다.
1
2
3
4
$ hexo new firstpost
// 기본 명령어
$ hexo n firstpost
// 축약 명령어
  • 위의 명령어를 실행하여, firstpost.md라는 마크다운 파일을 생성합니다.
1
$ code .
  • 현재 생성된 firstpost.md파일을 Visual Studio Code로 열어줍니다.
    file directory
  • 위와 같은 디렉토리에 firstpost.md이라는 마크다운 파일이 생성된 것을 확인할 수 있습니다.
  • firstpost.md 파일을 열면, 다음과 같이 작성되어 있습니다.
1
2
3
4
5
---
title: firstpost
date: 2019-01-03 19:42:59
tags:
---

  • title은 자동으로 파일명과 똑같이 설정됩니다. 원하는 title로 수정한 후,
    아래의 ---의 다음 줄부터 마크다운 문법을 이용하여 글을 작성하시면 됩니다.

  • 글 작성시, 실시간으로 포스팅한 모습을 확인하고 싶을 때는 터미널에 아래와 같은 명령어를 입력해줍니다.

1
2
3
4
$ hexo server
// 기본 명령어
$ hexo s
// 축약 명령어

  • 웹 브라우저에서 localhost:4000 경로로 접속하시면, 블로그의 모습을 실시간으로 확인할 수 있습니다.

  • 포스트를 작성한 후, 실제로 서버에 올라갈 정적 페이지를 생성해줍니다.

1
2
3
4
$ hexo generate
// 기본 명령어
$ hexo g
// 축약 명령어
  • 터미널에서 위 코드를 실행하면, blog/public/ 디렉토리 아래에 실제 서버에 올라갈 웹페이지가 생성된 것을 확인할 수 있습니다.

6. GitHub과 Hexo를 연결해주기

  • 로컬 외에 외부에서도 볼 수 있도록 서버에 올립니다.
1) GitHub에 Deploy 해 줄 플러그인을 설치합니다.
1
$ npm install --save hexo-deployer-git
2) Hexo 설정파일인 _config.yml를 열어서 #URL부분과 #Deployment부분을 수정해 줍니다.

hexo github - url

  • #URL부분을 위와 같이 수정해줍니다.
    hexo github - deployment
  • #Deployment부분 역시 위와 같이 수정해줍니다.
3) GitHub 서버에 파일 올리기
  • 터미널에서 명령어를 실행하여, GitHub 서버에 블로그 파일을 올려줍니다.
1
2
3
4
$ hexo deployment
// 기본 명령어
$ hexo d
// 축약 명령어
Tip! 정적 페이지 생성과 배포를 함께 하고 싶다면, 아래 코드를 입력해줍니다.
1
$ hexo g -d

포스트 작성시 참고한 링크

Reference

Share