Github Page와 Hexo로 블로그 만들고 테마 적용하기

2021-10-14

글자수: 507자 | 읽는 시간 3분

JAVA온라인스터디를 하면서 사람들이 Github로 블로그를 만드는 것을 보고 신기해서 만들게 되었다.
조금 검색 해보니깐 Github는 Github Pages애 블로그를 만들어 볼려고 한다. 조금 구글에서 검색해보니깐 대부분 hexo?을 많이 사용한다고 하길래 나도 한번 hexo을 이용해서 블로그를 만들어 볼려고 한다.

기본 설치 프로그램

vscode와 NodeJS을 깔아주었다.
vscode, NodeJS 다운 링크

NodeJs는 다음과 같이 cmd에 Node라고 처주면 설치확인이 가능하다.

1. 레포지터리 만들기

우선 github에 새로운 레포지터리를 만들어 준다.

여기서 중요한것은 “자신의Github로ID”.githud.io로 만들어줘야 한다는 점이다.
나의 Github로 보자면 dudqls5271.github.io가 되는것이다.

2. hexo 설치

다음 사진과 같이 입력 해주면 hexo 기본설치가 시작 된다.

1	$ hexo init

화면 캡처 2021-05-08 233126

설치가 완료 되면 다음과 같이 여러개의 폴더 들이 생긴 것을 볼 수가 있다.

마지막으로 아래을 입력해주면 hexo에 필요한 파일들이 설치가 된다.

1	$ npm install

화면 캡처 2021-05-08 233215

3. 테마 설정

다음은 테마 설정이다.
테마는 다른 사람들이 만들어 준 테마를 사용하면된다. [여기]서 테마를 고를수 있다.
원하는 테마를 고른뒤 그 사람의 Github에 들어가서 URL을 복사 해준뒤 다음과 같이 콘솔에 적어주면 된다.

화면 캡처 2021-05-08 234329

1 2	$ cd themes $ git clone 링크

그러면 themes에 추가가 된것을 볼 수 있을것이다.
에제 theme을 본인 마음대로 바꿔주면 된다.

4. 기본 정보 수정

여기 에서 다양한 옵션을 볼 수 있습니다!

4-1. site 기본 정보 수정

_config.yml에 들어가면 site 가 있을 것입니다.

# Site
title: YB_BIN Blog
subtitle:
description:
keywords:
author:
language:
timezone:

위의 부분을 찾아서 원하는대로 수정하면 된다.
나 같은 경우는 다음과 같이 수정다

# Site
title: YB_BIN Blog
subtitle: '개인 공부 및 작업물 공유'
description: "YB_BIN의 블로그 입니다."
keywords: programming, java, html, web, front
email: youngbin5271@gmail.com
author: 'LEE YoungBin'
language: ko
timezone: 'Asia/Seoul'

4-2. URL 정보 수정

# URL
github.io/project
url: http://example.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true
  trailing_html: true

라고 되어있는데, 여기서 url에 자신의 Github 유저명을 넣어서 http://username.github.io을 넣어주면 된다!

나는 다음과 같이 수정 했다.

# URL
github.io/project
url: http://dudqls5271.github.io
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true
  trailing_html: true

4-3. Deploy 설정3

이 항목에 본인의 Gitpage Repository 정보를 넣어서 수정해주면 된다.
여기도 username 바꿔줘야 한다.

1
2
3

# Deployment
deploy:
  type: git

# Deployment
deploy:
  type: git
  repo: https://github.com/dudqls5271/dudqls5271.github.io
  branch: master

5. hexo 테스트

1	$ hexo server

줄여서 hexo s 도 가능하다.

위의 문구를 콘솔에 치면 서버가 열렸다는 문구와 같이 http://localhost:4000 가 열릴 것이다.
여기에 들어가면 본인이 설정한 블로그를 볼 수 있습니다.

6. Github에 배포하기

이제 지금 까지 만든 Hexo 블로그를 Github로 배포를 해보자.
아까 Hexo을 설치하던 콘솔 창을 다시 열어 준다.

아래의 두 명령어를 입력해서 생성, 배포해준다.

Hexo를 이용해 정적 웹 리소스 생성하기

1	$ hexo generate

줄여서 hexo g도 가능하다.

github에 배포하기

1	$ hexo deploy

줄여서 hexo d도 가능하다.

이 두가지를 합쳐서
hexo generate -deploy 혹은 hexo g -d로 사용가능하다.

혹시라도 배포시

ERROR Deployer not found: git

라는 오류 문구가 나오면

1	npm install hexo-deployer-git --save

를 통해서 플러그인을 다시 설피 해준다.

여기까지 하면 https://username.github.io로 들어가보면 hexo 페이지가 보일 것 이다.

작성자： LEE Young Bin
Github : http://dudqls5271.github.io/2021/10/14/hexo_install/