Blog

정적 웹사이트 생성기 hexo 로 블로그 만들기

https://goodsaem.github.io/

개요

정적 웹사이트 생성기 hexo 를 이용하여 블로그를 만든후 github page 까지 반영하는 방법에 대해서
정리한다. 정적 웹사이트 블로그를 만들면서 작업했던 내용들을 정리했으며 이글로 기술자료를 정리하는
개발자들에게 도움이 되었으면 한다.

💬 업데이트 정보

한동안 방치해둔 블로그를 다시 정리하고 있다. 글을 정리하면서 나에게 도움이 되고 글을 읽고 있는
분에게도 도움이 되었으면 한다. 글을 다시 정리하면서 많은 부분 변경하고 새로운 내용들도 추가했다.
다 정리할수 있을까 걱정도 되지만 최대한 적어 보고자 한다.
글수정일 : 2025-06-22 오후 6:48

설치순서

설치 순서는 아래와 같다. 사전 준비사항으로 GitHub 계정생성하고 Git 설치하고 Node.js 설치하는
과정 있는데 이부분은 예전에 만들어 놓은 페이지가 있어 이부분을 참조하면 될것 같은데 정리하는
차원에서 그대로 진행하면서 정리하겠음.

💡 순서도 draw.io

위에 순서도는 draw.io로 그렸고 플러그인을 추가하여 웹사이트에서도 볼수 있게 했다.
예전에는 이런 시도를 하지 않았는데 경험이 늘어남에 따라 표현하는 부분도 많아지는듯한다.

사전준비사항

Nodejs 설치

  • node js 사이트 : https://nodejs.org/ko
  • install node js 버튼을 클릭한다.

  • Windows 설치 프로그램(.msi) 파일을 클릭하여 다운로드

  • 다운로드 받은 node-v22.16.0-x64.exe 파일을 더블클릭하여 실행 후 Next

  • 라이선스 동의후 Next

  • 폴더변경 C:\expert\nodejs 후 next

  • Next

  • Next

  • Next

  • Install

  • 설치중

  • 설치완료 Finish

  • 명령어 입력창에서 아래와 같이 입력했을때 버전이 나오면 설치완료
    node --version
    v22.16.0

Git 설치

  • site : https://git-scm.com/

  • download : https://git-scm.com/downloads/win

  • file : https://github.com/git-for-windows/git/releases/download/v2.50.0.windows.1/Git-2.50.0-64-bit.exe

  • Git for Windows/x64 Setup 파일을 다운로드 받는다.

  • 다운로드 받은 파일을 더블클릭하여 실행한다. Next

  • 설치디렉토리 변경 C:\expert\git 후 Next

  • Default 상태에서 Next

  • 메뉴명은 Git Next

  • Next

  • Next

  • Next

  • Next

  • Next

  • Next

  • Next

  • Next

  • Next

  • Install

  • 설치중

  • Finish 설치완료

  • command 창을 열고 아래 명령어를 입력했을때 버전이 출력되면 설치완료 git --version
    git version 2.50.0.windows.1

github 계정 생성을 위해서는 메일주소가 있어야함 메일 계정이 있는
분들은 skip 할것 (protonmail 에서 무료 메일 발급)

무료 메일 계정 생성

메일이 한번씩 필요한데 만드는게 생각보다 쉽지가 않아 무료 메일 계정 만드는 방법에 대해 정리함

  • 아래 사이트에서 회원가입하여 계정생성
    https://account.proton.me/mail/signup?ref=mailhero

  • Proton Mail 사용 시작 버튼을 클릭하여 가입

  • 사용중인 메일 주소(gmail) 로 인증을 받는다.

  • 인증키를 입력하여 회원가입을 완료한다.

  • 여기까지 하면 아래와 같이 계정생성 화면이 나온다.

  • 표시 이름을 설정하고 계속하기 버튼을 클릭한다.

  • 복구 방법을 설정하고 저장 버튼을 클릭한다.

  • 메일 계정 생성이 끝나면 아래와 같은 화면을 확일할수 있다.

Github 계정 생성

2025-06-24 15:20:28 기준으로 github 계정 생성하는 방법에 대해서 정리함

  • https://github.com/ 에 접속한후 Sing up 버튼을 클릭한다.

  • 메일정보와 패스워드 이름을 등록하고 continue 버튼을 클릭한다.

  • 사람인지 확인하라는 곳에서 사각형 인증을 클릭하고 본문에 나온되로 사각형을 이동한다.

  • 사람인지 인증되고 나면 메일 인증코드를 넣어 2단계를 진행한다. 메일에서 받은 인증코드를 입력한다.

  • 이메일 주소와(goodsame2@proton.me) 패스워드를 입력하여 github 로그인을 진행한다.

  • 정상적으로 로그인 되면 아래와 같은 화면을 확인할수 있다.

Github Page 생성방법

GitHub Pages는 GitHub 에서 제공해주는 정적 웹 사이트 서비스다.

이 서비스를 사용하면 개발자는 GitHub 저장소에서 HTML,CSS 및 JavaScript 파일과 같은 정적 파일을
업로드하여 웹페이지를 만들수 있다. 가장 큰장점은 무료로 웹사이트를 만들 수 있다는 부분이며, 개발자가
손쉽게 git 명령어를 통해 페이지를 등록/수정/삭제를 할수 있다는 점이다.
아직 github 계정이 없다면 아래 글을 참고하여 Github 계정 생성부터 진행 한다. [Github 계정생성]
계정생성이 다 끝난상태에서 아래 순서되로 github page 생성을 진행한다.
본글에서는 goodsame2 라는 github 계정을 만들어서 github page 만드는 작업을 진행했다.

  1. 우측 상단의 ‘+’ 아이콘을 클릭하여 New repository 메뉴를 선택
  2. Repository name 에 계정이름과 동일한 아래 그림에서는 계정이 goodsame2 이므로 goodsame2.github.io 입력
  3. Description goodsame2.github.io 입력
  4. Add a README file 에 체크
  5. Create repository 버튼을 클릭하여 repository 생성
  6. 정상적으로 생성되면 아래와 같은 화면이 나온다.
  7. 웹브라우저에 https://goodsame2.github.io/ 이렇게 입력하면 아래와 같은 화면을 확인할수 있다.

Github SSH 연결방법

git-scm은 설치되어 있어야 아래 내용 실행가능함

GitHub 로그인을 ssh 로 설정하면 매번 로그인 할 필요없이 편하게 source 를 commit 하고 push 할수 있다.
GitHub SSH 설정하는 방법에 대해 windows 기준으로 정리함 (※ git은 설치되어 있어야 함)
SSH 키 생성 후 생성된 키를 클립보드에 복사

  • Git Bash 창 실행
  • ssh-keygen 명령어 실행
ssh-keygen -t rsa -b 2048 -f ~/.ssh/goodsame2.github.io_key
  • 기본값설정을 위해 엔터 엔터를 입력
  • 아래와 같이 goodsame2.github.io_key 와 goodsame2.github.io_key.pub 가 만들어진걸 확인할수 있다.
  • 아래 명령어를 입력하여 출력된 내용을 복사
cat ~/.ssh/goodsame2.github.io_key.pub

github ssh 키 등록 깃허브에 SSH 공개키 등록을 위해 깃허브 홈페이지에 로그인을 진행하고 아래 순서되로 키를 생성

  1. 프로파일 아이콘클릭
  2. Settings 아이콘을 클릭
  3. SSH and GPG key 클릭
  4. title에 goodsame2.github.io_pub 입력
  5. Key 에 복사한 내용 붙여넣기
  6. Add deploy key 아이콘 클릭
  • 테스트를 위해 이름 및 이메일 주소를 등록한다.
git config --global user.name "goodsame2"
git config --global user.email "goodsame2@proton.me"

  • github 접속을 위해 ssh 에이전트에 개인키를 등록한다.

  • 터미널에서 다음 명령어를 입력해서 ssh-agent를 실행

eval "$(ssh-agent -s)"
  • ssh-agent가 실행된 상태에서 다시 키 추가:
ssh-add ~/.ssh/goodsame2.github.io_key
  • 성공
Identity added: /c/Users/Administrator/.ssh/goodsame2.github.io_key (Administrator@WIN-DBSA6V6A1MT)
  • 테스트 (Git Bash로 테스트 할것)
  • 소스복제 (git clone) 
$ git clone git@github.com:goodsame2/goodsame2.github.io.git
  • 소스복제가 끝나면 아래와 같은 메시지를 볼수 있다.
Cloning into 'goodsame2.github.io'...
The authenticity of host 'github.com (20.200.245.247)' can't be established.
ED25519 key fingerprint is SHA256:+xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
This key is not known by any other names.
Are you sure you want to continue connecting (yes/no/[fingerprint])? yes
Warning: Permanently added 'github.com' (ED25519) to the list of known hosts.
remote: Enumerating objects: 3, done.
remote: Counting objects: 100% (3/3), done.
remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0 (from 0)
Receiving objects: 100% (3/3), done.
  • 복제된 디렉토리로 이동한후 아래와 같이 index.html을 작성한다.
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>나의 첫 번째 웹 페이지</title>
</head>
<body>
    <h1>안녕하세요! GoodSame2에 오신 것을 환영합니다.</h1>
    <p>이 페이지는 Git Bash를 사용하여 생성한 간단한 HTML 페이지입니다.</p>
</body>
</html>
  • 작성 된 내용을 git에 추가한다.
$ git add .
  • commit 수횅
$ git commit -m "init commit"
  • push 수행
$ git push origin main
  • 아래와 같이 push가 완료됨
Enumerating objects: 4, done.
Counting objects: 100% (4/4), done.
Delta compression using up to 3 threads
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 582 bytes | 582.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0), pack-reused 0 (from 0)
To github.com:goodsame2/goodsame2.github.io.git
   ac7ef11..6a721f7  main -> main
  • https://goodsame2.github.io/ 사이트 접속해서 아래와 같은 화면이 나오면 완료

hexo 설치

아래 명령어를 입력하여 전역으로 hexo-cli 설치

1
npm install hexo-cli -g

아래 명령어를 입력하여 hexo blog를 생성한다.

1
hexo init blog

아래 명령어를 입력하여 hexo server 실행

1
2
3
cd blog
npm install
hexo server

http://localhost:4000/ 접속해서 아래와 같은 화면이 나오면 설치 완료

hexo 테마 적용하기

https://hexo.io/themes/ 에서 hexo 다양한 테마를 다운로드 받을수 있다.
본 블로그에서 사용하는 theme은 https://github.com/ppoffice/hexo-theme-hueman 은 이용했고
가장 최근 버전은 2020년 6월 21일 릴리즈된 0.5.0 버전이다.

설치

설치는 https://github.com/ppoffice/hexo-theme-hueman/wiki/Installation 문서를 보고 참고함

먼저 프로젝트를 blog 폴더 아래에 themes/hueman 로 복제함

1
2
cd blog
git clone https://github.com/ppoffice/hexo-theme-hueman.git themes/hueman

실행결과

1
2
3
4
5
6
7
Cloning into 'themes/hueman'...
remote: Enumerating objects: 2277, done.
remote: Counting objects: 100% (16/16), done.
remote: Compressing objects: 100% (14/14), done.
remote: Total 2277 (delta 3), reused 11 (delta 2), pack-reused 2261
Receiving objects: 100% (2277/2277), 5.77 MiB | 6.42 MiB/s, done.
Resolving deltas: 100% (1218/1218), done.

blog 폴더의 _confi.yml파일에서 theme을 파일을 열어서 아래와 같이 설치한 theme명으로 수정한다

theme: landscape

1
2
3
4
5
6
... 중략 ...
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: hueman
... 중략 ...

themes\hueman 디렉토리로 이동한후 _config.yml.example 파일일 _config.yml로 수정한다.

1
2
cd themes/hueman
mv _config.yml.example _config.yml

실행

상위 디렉토리로 이동한후 hexo 서버를 구동시킨다.

1
2
3
cd ..
cd ..
hexo server

실행결과

1
2
3
INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

웹브라우저에서 url http://localhost:4000/ 를 입력하고 아래와 같은 그림이 나오면 성공

hexo 환경설정

블로그 환경설정을 위해 blog/_config.xml 파일을 아래와 같이 수정함.

사이트및 url 정보

1
2
3
4
5
6
7
8
9
10
11
12
# Site
title: goodsame2
subtitle: goodsaem2 블로그 입니다.
description: 블로그 테스트를 위해서 환경설정한 내용입니다.
keywords:
author: goodsame2
language: ko
timezone: asia/seoul

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://goodsame2.github.io/

github 에 배포를 위한 deploy 정보

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: git@github.com:goodsame2/goodsame2.github.io.git
  branch: main

배포하기

준비물

배포를 위해 hexo-deployer-git 플러그인을 설치한다. 설치명령어는 아래와 같다.

1
npm install hexo-deployer-git --save

배포순서

배포는 먼저 정적인 페이지(html)를 만들고 github page 쪽으로 deploy 하는 형태로 진행한다.

정적 페이지 만들기

먼저 배포될 디렉토릴 파일을 깨끗히 정리한다.

1
hexo clean

실행결과

1
2
3
INFO  Validating config
INFO  Deleted database.
INFO  Deleted public folder.

아래 명령어를 입력하여 정적 페이지를 생성한다.

1
hexo generate

정상적으로 실행되면 아래와 같이 public 디렉토리에 블로그 구성을 필요한 파일들이 생성됨을 확인할수 있다.

1
2
3
4
5
6
.. 중략 ...
INFO  Generated: archives/2023/index.html
INFO  Generated: archives/index.html
INFO  Generated: index.html
.. 중략 ...
INFO  80 files generated in 314 ms

배포하기

아래 명령어를 입력하여 github page 에 배포한다.

1
hexo deploy

실행결과

1
2
3
4
5
6
7
8
9
INFO  Validating config
INFO  Deploying: git
INFO  Clearing .deploy_git folder...
INFO  Copying files from public folder...
INFO  Copying files from extend dirs...
[main 1ca47fb] Site updated: 2023-03-10 23:41:16
 12 files changed, 1 insertion(+), 2826 deletions(-)
 .. 중략 ...
INFO  Deploy done: git

Github page 확인하기

여기까지 진행했다면 https://goodsame2.github.io/ 사이트에 접속하면 아래와 같은 화면을 확인할수 있다.

공유하기