welcome :)

0%

Github Page와 Hexo를 이용하여 블로그 만들기

작성일 In ,

Hexo 블로그를 만들기 위해서는 Github계정을 사용하는 것이 가장 편합니다. Github계정이 없는 분들은 Github에서 만들어 주세요! Github계정이 있는 분들이라면 바로 Hexo 블로그를 만들 수 있습니다

Hexo 블로그를 만들기 위해서는 크게 2가지의 과정이 필요하다.

Github repository 만들기

Github repository 만드는 방법은 다음과 같다.

  • Github계정에 들어가면 상단바에서 Repositories를 클릭한 후, New를 누른다.
  • 그 다음 Repository name에 사용자이름.github.io로 작성하고, Public 모드으로 설정한 다음 create repository를 누른다.

  • repository생성이 완료되면, 터미널을 켜서 원하는 디렉토리에 아래의 코드를 입력한다.

    1
    git clone https://github.com/사용자이름/사용자이름.github.io

  • 디렉토리를 설정하는 방법은 터미널에 pwd를 입력하여 현재 위치를 파악하고, cd 이동하려는 위치 이름을 입력하여 이동하면 된다. (Mac 기준)

  • 해당 디렉토리에 사용자이름.github.io 파일이 생성되었다면, 아래의 코드를 입력한다.

    1
    2
    3
    4
    5
    cd 사용자이름.github.io
    echo "Hello World" > index.html
    git add --all
    git commit -m "Initial commit"
    git push -u origin master

완성되었다! 마지막으로 브라우저에서 https://USERNAME.github.io에 접속되는지 확인해보자.

Hexo 만들기

Hexo 셋팅을 하는 것은 몇 줄의 코드면 끝난다. 이제부터 아래의 코드를 순서대로 입력한다.

설치 전 준비해야 할 것

Hexo를 설치하기 전에 아래의 요소들을 다운로드 해야 한다. 이미 다운되어 있다면 다시 받을 필요는 없다.
Node.js
Git

Hexo 설치 코드

설치를 시작하기에 앞서 터미널에서 Hexo파일을 저장할 디렉토리를 먼저 설정해야 한다.
디렉토리를 설정하는 방법은 Github repository 만들기에 있다.

1
2
3
4
npm install hexo-cli -g
hexo init myBlog #`myBlog`라는 파일을 만들기
cd myBlog #myBlog로 디렉토리 설정
npm install

설치가 완료되었다.

블로그 기본 설정

Hexo를 설치하면서 생성한 폴더를 오픈한다. 그 다음 블로그의 기본적인 설정을 바꾸기 위해서 _config.yml를 열어준다.
텍스트 파일로 오픈해도 되지만 개인적으로는 Visual studio code을 사용하였다.
해당 파일에서 아래와 같은 부분을 수정하고 저장하면 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# site 정보 수정
title: DEV AnythinG # 블로그 이름
subtitle:
description:
author: Hyeonji Ryu # 사용자 이름

# URL 정보 수정
url: https://사용자이름.github.io # 이 부분 수정
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Deployment
deploy:
  type: git
  repo: https://github.com/사용자이름/사용자이름.github.io.git

테스트 및 배포하기

테스트를 위해서 터미널에 아래의 코드를 입력해보자.

1
2
# 테스트
hexo server

서버가 작동된 후에는 http://localhost:4000에서 변경사항이 적용된 블로그를 미리 볼 수 있다.
테스트 완료 후 Github repository에서 배포하면 블로그가 완성된다.

1
2
3
4
5
# 해당 리소스 생성
hexo generate

# 배포하기
hexo deploy