Hexo Guide #1 - 시작하기

Hexo Overview

LunarScents’ devLog 공간은 정적사이트 생성기(Static site generator)의 일종의 Hexo 를 사용하였습니다.

물론, 많은 블로그 프레임워크가 존재합니다.(티스토리, brunch, medium, Jekyll, gatsby.. 등등)

맛보기(?)로 여러가지를 사용 해본 결과,

통일성과 생산성이 높고 글을 작성하기 용이한 Hexo를 이용해 기록 공간을 구축했습니다.

What is Hexo?

마크다운(Markdown) 문서를 page로 변환하여 빠르고 간단하게 블로그를 만들 수 있는 Node.JS 프레임워크

1. 엄청나게 빠른 속도

   • Node.js 기반의 블로그 프레임워크이기에 몇 초만에 수백개의 파일을 빌드할 수 있을 정도로 빠른 생성 속도를 제공합니다.

2. 마크다운 지원

   • GitHub Flavored Markdown 을 기본으로 지원하고 플러그인을 통해 지원하는 언어를 사용할 수 있습니다.

3. 명령어 한 줄로 바로 배포

   • Github Pages를 통해 hexo가 지원하는 명령어로 쉽게 배포가 가능합니다.

4. 다양한 플러그인과 확장성

   • Hexo는 강력한 플러그인 시스템을 가지고 있습니다. npm을 이용해 여러 플러그인을 적용할 수 있으며, 사용자가 커스텀마이징하기 용이합니다.

Requirements

Git과 Node.js가 설치 되어 있어야 합니다.

• Node.js - 6.9 이상
• Git

미설치 된 분들은 Node 설치가이드 포스팅 을 참고 바랍니다.

• hexo-cli를 global로 설치 해 주세요.

Setup

• Hexo를 초기화하기 위해 아래의 명령을 차례로 수행하세요.
• 웹 사이트를 초기화하며, folder가 준비되어 있지 않다면, 현재 디렉트리에 웹 사이트를 세팅합니다.

1
2
3
4
5
6
7
8

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

Server

• hexo server 또는 hexo s를 명령어를 사용하여 로컬 서버를 구동시킵니다.
• 기본적으로 localhost:4000 에서 확인 할 수 있습니다.

Writing & Posting

새 글(article) 작성

• 명령어를 통해 /scaffolds/의 md 파일을 스캐폴딩하여 새 글을 생성할 수 있습니다.
• layout 을 기입하지 않는다면, Hexo는 _config.yml에 정의된 default_layout 형태를 기본으로 설정합니다.(디폴트: post)
• title 에 공백이 포함된다면 따옴표로 감싸주세요.

1
2
3
4
5

.
└── source
   ├── _drafts
   └── _posts
      └── <title>.md

Front-matter

• Front-matter는 파일 시작 시 YAML 또는 JSON 형태로 작성하여 게시물에 대한 환경 설정을 할 수 있습니다.

1 2 3 4 5 6 7 8 9 10 11 12

title: Hello, LunarScents! categories: - Tools tags: - blog - Hexo date: 2019-05-29 00:02:39 ---

• 더 자세한 내용은 Front-matter에서 참고바랍니다.

Publish

• 작성한 내용을 배포합니다.
• draft 레이아웃을 이용하여 작성했다면 publish를 이용해 post 형태로 발행합니다.

Generating

• hexo generate 또는 hexo g를 명령어를 사용하여 쉽고 빠르게 정적인 파일을 생성할 수 있습니다.
• public 폴더에서 생성된 파일들을 확인할 수 있습니다.

Deployment

• Generating으로 만들어진 정적 파일들을 원하는 서비스를 이용하여 배포 및 호스팅 할 수 있습니다.

  • Github pages
  • Netlify
  • Heroku
  • Amazon S3

• 이 블로그는 Github Pages를 이용하여 운영되고 있습니다.

Github 프로젝트 만들기

• Hexo 로 블로그를 생성하고 관리하기 위해서는 git repository가 2개 필요합니다.

  • 블로그 내 파일 및 리소스 저장 및 관리를 위한 Git Repository (blog 용)
  • 생성된 정적 파일로 블로그를 배포할 Git Repository (<githubID>.github.io)

• Github Repository 시작하기 를 참고해주세요.

Configuration

• Github 에 빌드된 결과물을 배포하기 위해서 hexo-deployer-git 플러그인을 설치하기 바랍니다.

• 블로그의 전반적인 설정을 할 수 있는 _config.yml 파일을 수정해 주세요.

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

  # Site title: LunarScents's DevLog subtitle: Hello, LunarScents! description: The logging space of LunarScents. keywords: author: LunarScents language: en timezone: Asia/Seoul <br/> # URL url: https://lunarscents.github.io //`<githubID>.github.io` root: / permalink: :year/:month/:day/:title/ permalink_defaults: # Deployment ## Docs: https://hexo.io/docs/deployment.html deploy: type: git repo: https://github.com/lunarscents/lunarscents.github.io.git // Github pages repository branch: master

  
  

Deploy

• 배포가 되면, https://<username>.github.io 로 접속하여 확인할 수 있습니다.
• 여기서 배포한 것은 빌드한 결과물입니다. 작성한 포스트, 템플릿, 설정, 테마 파일 등은 앞서 만들었던 blog용 Git Repository에 연동하여 백업하시면 됩니다.

Reference Site

• Hexo 공식사이트
• Hexo 한글 가이드
• Alley의 블로그