Skip to main content

One post tagged with "정적사이트"

View All Tags

Hexo 블로그 만들기

정적 사이트 생성#

기술 블로그를 시작하기전에 Github과 연동하여 운영하고싶어 정적 사이트를 만들만한 프레임워크들을 조사했다.

Jekyll#

  • 루비 기반
  • 가장 보편적이고 인기많은 정적 사이트 제작 프레임워크
  • 문서가 많아지면 빌드하는데 5분이상이 소요될 수 있음
  • 다양한 테마

Hexo#

  • 자바스크립트(Node.js) 기반
  • 한글 레퍼런스 꽤 많음
  • 다양한 테마

Hugo#

  • Golang 기반
  • 매우 빠른 빌드속도
  • 잘 정리된 문서화
  • 사용할만한 테마는 부족

Hugo? Hexo?#

처음에 빠른 빌드속도가 빠른것이 장점이라고 많이 알려져있어서 Hugo로 시작했으나..

하지만, Go언어 기반으로 되어있고 및 테마 사용 시 구조 파악 및 커스텀화 시키기가 매우 어려웠음.

결국, 현재 자바스크립트를 많이 사용하고 있으니 Hexo 프레임웤을 사용하기로 결정.

Hexo 설치#

Hexo는 Node.js 기반이기 때문에 Node.js가 설치되어있어야 한다.

  1. 글로벌하게 hexo-cli 설치한다.
$ npm install hexo-cli -g
  1. hexo로 Blog 프로젝트를 만들어준다.
$ hexo init blog
$ cd blog
$ npm install
  1. 테마적용을 위해 git clone 진행 (필자는 icarus 테마를 선택)
$ git clone https://github.com/ppoffice/hexo-theme-icarus.git
  1. themes 폴더안에 clone 받은 테마의 폴더명을 hexo-theme-icarus -> icarus로 변경해준다.
  2. 루트 경로에서 _config.yml 파일을 아래처럼 수정해준다.
theme: icarus
  1. 테마에 필요한 npm 패키지들을 설치해준다. (icarus 경우 아래 패키지들이 필요함)
  • bulma-stylus
  • hexo-component-inferno
  • hexo-renderer-inferno
  • inferno
  • inferno-create-element
$ npm install --save bulma-stylus hexo-component-inferno hexo-renderer-inferno inferno inferno-create-element
  1. hexo s 명령어로 로컬에서 테마가 적용됬는지 확인
$ hexo s

GitHub Pages#

깃헙 페이지를 이용해 블로그를 배포하기 위해 우선 Repository를 생성해둔다.

"GitHub사용자이름".github.io 로 Repository를 생성해주면 https://사용자이름.github.io/ 블로그 주소로 사용 가능

깃헙 페이지로 홈페이지 만들기

Hexo-Deployer-Git#

Hexo에서 Git으로 정적파일을 생성후 편하게 배포하기위한 패키지를 받아준다.

$ npm install --save hexo-deployer-git

Github에서 만들어둔 Repository의 Clone 주소를 Hexo 프로젝트 설정파일에 적어준다.

_config.yml

deploy:
type: git
repo: 저장소 주소(예: https://github.com/사용자계정/사용자계정.github.io.git)
branch: master

publish용 정적파일 생성

$ hexo generate

Github 배포

$ hexo deploy

동시 생성 & 배포

$ hexo d -g

업데이트가 안될 경우#

캐쉬때문에 간혹 업데이트가 반영이 안될경우가 있는데 아래 명령어 후 다시 배포를 진행하면 된다.

$ hexo clean
$ hexo d -g

정적 사이트 생성기#

내가 찾아본 정적 사이트 생성 프레임웤 외에도 정말 많은 사이트와 자료들이 있으니 잘 찾아보고 활용 후 본인에게 맞는것을 사용했으면 좋을 것 같다.

참고#