게시 됨 업데이트 됨blog8분안에 읽기 (약 1198 단어)0회 방문

Github Page와 Hexo를 활용하여 블로그 개설하기

블로그를 시작하며

그동안 OneNote, Notion 등 노트프로그램을 사용하여 단편적으로 공부하던 내용을 블로그를 통해 좀 더 체계적으로 정리하고 다른사람들과 공유하고 싶은 생각에 블로그를 시작하기로 했다.(끈기가 부족한 편이라 얼마나 갈진 모르겠다^^;;)

Github + Hexo

일반적인 블로그를 생각하면 네이버 블로그, 티스토리, 혹은 미디엄, 브런치 등을 떠올릴 수 있지만 기술블로그를 표방하는만큼 github page를 이용하기로 마음먹었다. github page에서는 username.github.io 도메인을 무료로 제공하여 정적 웹페이지를 무료 호스팅해주고 있다.

github page에서 사용할 정적 웹페이지 생성기는 생각보다 다양한 종류가 있지만 마크다운 문서를 지원하면서 국내에서 가장 많이 사용되는 두가지는 다음과 같다.

  1. Jekyll
    1. Ruby 기반
    2. 다양한 테마, 플러그인 지원
    3. 환경설정 및 커스터마이징이 다소 복잡하며(특히 윈도우에서) 글이 많아지면 빌드속도가 느려진다는 이야기가 있다.
  2. Hexo
    1. Javascript(Node.js) 기반
    2. 마찬가지로 다양한 테마, 플러그인 지원
    3. npm을 통해 쉽게 설치 가능하며 Github 배포과정도 편하다.

처음엔 Jekyll을 사용하여 초기설정을 해봤는데 윈도우에서 설정이 너무 복잡하고 오류도 많이나서 익숙한 Node.js기반의 Hexo로 시작하기로 했다.

1. 설치

1.1 사전준비

  • Node.js 설치
  • Git 설치
  • Github 가입 후 신규 Repository 2개 생성

각 프로그램 설치는 이미 많은 문서들이 있기 때문에 별도로 언급하진 않겠다. Repository를 2개 생성하는 이유는 각각 블로그 운영, hexo 설정을 저장할 목적이며 블로그로 운영할 Repository name은 USERNAME.github.io 의 Public으로 생성한다.

2. Hexo 설치 및 블로그 생성

Hexo설정을 저장할 github repository를 clone 한 후 해당 위치에서 작업한다.

1
2
3
4
npm install -g hexo-cli
hexo init $디렉토리명
cd $디렉토리명
npm install

2.1 설정파일 수정

블로그 생성이 정상적으로 완료되었으면 이제 설정파일을 수정해보자.

root 경로에 _config.yml파일을 확인할 수 있는데 기본적인 블로그 설정은 이곳에서 관리한다. 자세한 내용은 공식문서에서 확인할 수 있다.

Site 설정

블로그 이름 및 간략한 소개를 설정한다.

1
2
3
4
5
title: Hello World
subtitle: No pain, No gain
description:
author: Jaeyong Yoo
...

URL 설정

블로그 URL 정보를 설정한다.

1
2
3
4
url: https://USERNAME.github.io
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

Github 설정

배포할 Github Page의 Repository 정보를 입력한다.

1
2
3
deploy:
  type: git
  repo: https://github.com/yoo0926/yoo0926.github.io

정상적으로 설치와 설정이 끝났다면 아래 명령어로 서버를 실행시켜 웹브라우저에서 http://localhost:4000 으로 접속하여 확인할 수 있다.

1
hexo server #or hexo s
  • 만약 로컬에서 실행 시 permission denied 가 발생하는 경우가 있다면 그냥 port를 변경해서 테스트하자
1
hexo server -p 8088

3. Github에 배포하기

로컬에서 테스트가 완료되었다면 이제 앞서 언급한 Github Page의 정적 웹페이즈 호스팅을 사용해보자.

Hexo Generate and Deploy

github에 배포하기 위해선 hexo-deployer-git 이라는 플러그인을 설치해야 한다.

1
npm install hexo-deployer-git

플러그인 설치가 완료되면 배포할 리소스를 생성하여 앞서 _config.yml 파일에서 설정한 배포설정의 저장소로 배포하게 된다.

1
2
3
4
hexo generate #hexo g
hexo deploy #hexo d
#동시에 하고 싶으면
hexo deploy --generate #hexo d -g

생성된 리소스는 USERNAME.github.io 저장소에 배포되며 https://USERNAME.github.io로 접속하게되면 블로그를 확인할 수 있다.

주의

간혹 deploy가 정상적으로 되지 않는다면 아래 명령어로 clean 후 다시 배포를 해보자.

1
2
hexo clean
hexo d -g

이상으로 기본적인 블로그 생성과 관련된 내용을 마무리 한다.

  • 추가메모
1
2
hexo new 포스트명 //기본설정값 draft 로 바꿔놓음
hexo publish 포스트명 //draft -> posts 로 이동

Reference
Hexo로 github 블로그 만들기 (Hueman 테마)
Github Page와 Hexo를 통해 30분만에 기술 블로그 만들기
Hexo 공식문서

Github Page와 Hexo를 활용하여 블로그 개설하기

https://yoo0926.github.io/2020/11/01/blog/start-blog/

Author

Jaeyong Yoo

Posted on

2020-11-01

Updated on

2023-05-14

Licensed under

#

댓글

카테고리

최근 글

×