Hexo 블로그 처음부터 구축하기: 2024년 간편 가이드

#블로그 구축

혹시 미적 감각이라곤 찾아볼 수 없는 블로그 디자인에 질리고, 끝없이 쏟아지는 웹사이트 알림에 지쳤나요? 나만의 블로그를 만들고 싶었지만, 복잡한 가이드와 머리 아픈 코드 때문에 망설이고 있었다면, 축하드립니다! 이 글이 바로 가장 쉽고 간단한 방법으로 여러분만의 블로그를 만들 수 있도록 차근차근 안내해 드릴 겁니다. 조금만 인내심을 갖고 단계를 따라오시면 됩니다.

Hexo는 빠르고, 깔끔하며, 효율적인 블로그 프레임워크로 초보자들에게는 그야말로 희소식이죠. 게다가 GitHub는 서버를 따로 임대하고 배포해야 하는 번거로움까지 덜어줍니다. 그래서 이 글에서는 Hexo와 GitHub를 활용해 블로그를 구축하는 방법을 다룰 예정입니다.

예전에 2018년에 처음부터 블로그 구축하기 간편 가이드라는 글을 썼었는데, 플러그인 업데이트로 인해 일부 수정이 필요한 부분이 생겨서 2024년 버전 간편 가이드를 새로 선보이게 되었습니다.

준비물

로컬에 Hexo 정적 블로그 구축하기

$ npm install -g hexo-cli
$ hexo init
$ npm install

맞습니다! 블로그의 핵심 부분은 벌써 다 완성되었습니다. 이제 어떤 모습인지 확인해 볼까요? 다음을 실행해 보세요.

$ hexo server

이제 브라우저를 열어 localhost:4000을 입력하면 현재 블로그의 모습을 볼 수 있습니다. 잠깐 설레는 마음을 진정시키고, Ctrl + C를 눌러 다음 단계로 넘어가세요.

초기 개인 설정

테마 변경

$ git clone https://github.com/theme-next/hexo-theme-next themes/next
theme: next
# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini
hexo g # 또는 hexo generate
hexo server

사이트 설정

# Site
title: 미지의 세계                // 블로그 이름
subtitle:
description:  Do something cool // 한 줄 소개
author: LulalaP                 // 작성자
language: zh-Hans               // 웹사이트 언어
timezone:

사이드바 아바타 설정

avatar:
    url: /uploads/avatar.jpg

블로그 페이지 보완

메뉴 추가

menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive

카테고리 페이지 생성

$ hexo new page categories
   title: Categories
   date: 2024-04-10 23:40:31
   type: "categories"
   comments: false
 ---

태그 클라우드 페이지 생성

$ hexo new page "tags"
---
   title: Tags
   date: 2024-04-10 23:41:25
   type: "tags"
   comments: false
---

”About Me” 페이지 생성

$ hexo new page "about"
   title: About
   date: 2024-04-10 23:41:56
   comments: false
---

사이드바 소셜 링크 설정

# Social links
social:
 GitHub: https://github.com/your-user-name || fab fa-github
 E-Mail: mailto:[email protected] || fa fa-envelope
 #Weibo: https://weibo.com/yourname || fab fa-weibo
 #Google: https://plus.google.com/yourname || fab fa-google
 Twitter: https://x.com/your-user-name || fab fa-twitter
social_icons:
  enable: true
  GitHub: github
  Twitter: twitter

블로그와 GitHub 연동

deploy:
  type: git
  repository: https://github.com/your-name/your-name.github.io.git
  branch: main
npm install hexo-deployer-git --save
hexo g
hexo d

이제 브라우저를 열고 http://your-name.github.io 로 접속해 보세요. 축하합니다! 드디어 여러분의 블로그가 완성되었습니다.

도메인 연결

여기까지 왔다면 블로그 구축은 모두 끝났고, GitHub 도메인을 통해 접속도 가능할 겁니다. 이제 여기에 짧은 나만의 도메인을 연결하면 더욱 완벽해지겠죠?

도메인 구매

도메인 해석 (DNS 설정)

185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

CNAME —> philo-li.github.io

도메인 설정을 마친 후, 블로그 디렉토리의 source 폴더 안에 CNAME이라는 이름의 파일(대문자로, 확장자 없음)을 새로 만드세요. 메모장으로 열어 구매한 도메인(예: www.philoli.com)을 입력합니다.

hexo g
hexo d

이제 브라우저를 열고 도메인을 입력한 다음 엔터를 누르세요. 축하합니다! 드디어 여러분만의 독립 도메인을 가진 블로그가 생겼습니다.

새 글 발행

title 글의 제목
date 생성 날짜 (파일 생성 날짜)
updated 수정 날짜 (파일 수정 날짜)
comments 댓글 허용 여부 true
tags 태그
categories 카테고리
permalink URL에 표시될 이름 (파일 이름)
hexo g
hexo d

고급 개인 설정

아래에서는 몇 가지 고급 블로그 스타일 설정 방법을 제공합니다. 초보자분들은 일단 건너뛰셔도 좋습니다.

RSS 추가

$ npm install hexo-generator-feed --save
# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed
rss: /atom.xml || fa fa-rss

홈페이지 글 요약

    <!--more-->

글 내 인용문 가운데 정렬

{% centerquote %}
인용문 본문
{% endcenterquote %}

{% centerquote %} 인용문 본문 {% endcenterquote %}

코드 블록 스타일 변경

codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: night eighties
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style:

사이트 생성 시간 설정

since: 2024

글 링크 스타일 개선

// link style
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

블로그에 배경 이미지 추가

body {
    background:url(/uploads/background.jpg);
    background-repeat: no-repeat;   // 이미지가 화면을 채우지 못할 때 반복 여부 및 반복 방식
    background-attachment:fixed;    // 이미지가 스크롤에 따라 움직이는지 여부
    background-size: cover;         // 커버
    background-position:50% 50%;    // 이미지 위치
}

블로그 내용 배경 반투명 설정


// 블로그 내용 투명화
// 글 내용의 투명도 설정
if (hexo-config('motion.transition.post_block')) {
  .post-block {
    background: rgba(255,255,255,0.9);
    opacity: 0.9;
    radius: 10px;
    margin-top: 15px;
    margin-bottom: 20px;
    padding: 40px;
    -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
    -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  }
  .pagination, .comments {
    opacity: 0;
  }

  +tablet() {
    margin: 20px;
    padding: 10px;
  }

  +mobile() {
    margin: 15px;
    padding: 15px;
  }
}


// 사이드바의 투명도 설정
.sidebar {
  opacity: 0.9;
}

// 메뉴 바의 투명도 설정
.header-inner {
  background: rgba(255,255,255,0.9);
}

// 검색창 (local-search)의 투명도 설정
.popup {
  opacity: 0.9;
}

인라인 코드 블록 스타일 최적화

// 인라인 코드 태그 미화
code {
  padding: 2px 4px;
  word-wrap: break-word;
  color: #c7254e;
  background: #f9f2f4;
  border-radius: 3px;
  font-size: 18px;
}

웹사이트 하단에 방문자 수 추가

# copyright 태그를 찾아서 그 태그 내부에 코드를 추가합니다.

<div class="copyright">
# ......여기에 이미 몇 가지 설정이 있습니다.
# 여기에 새로운 코드를 추가합니다.
</div>

# 추가하고 나면 다음과 같습니다:
<div class="copyright">
  # ......여기에 이미 몇 가지 설정이 있습니다.
  # 여기에 새로운 코드를 추가합니다.
  {%- if true %}
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-user-md"></i>
    </span>
    Visitors: <span id="busuanzi_value_site_uv"></span>
  {%- endif %}
</div>
hexo g
hexo s
# 문제가 없으면 배포
hexo d

저장소에 README.md 파일 추가

일반적으로 모든 프로젝트에는 README.md 파일이 있지만, Hexo를 통해 저장소에 배포하면 프로젝트의 README.md 파일이 덮어씌워집니다. 따라서 이를 방지하기 위해 설정 파일에서 조정해야 합니다.

Hexo 디렉토리의 source 루트 디렉토리에 README.md 파일을 추가하고, 사이트 설정 파일 _config.yml을 수정하여 skip_render 매개변수 값을 다음과 같이 설정합니다.

skip_render: README.md

저장하고 나가면 됩니다. 다음에 hexo d 명령으로 블로그를 배포할 때는 README.md 파일이 렌더링되지 않을 것입니다.

몇 가지 유용한 플러그인

원본 파일 백업

# 이전에 설정한 블로그 저장소 주소 추가
git remote add https://github.com/your-name/your-name.github.io.git

# 현재 변경 사항을 추가하고 저장하며, 커밋 메시지 기록
git add .
git commit -m "원본 파일 업데이트"

# 새로운 브랜치 생성 및 전환
git checkout -b source

# 로컬 source 브랜치의 모든 내용을 원격 저장소의 source 브랜치로 푸시
git push origin source:source

다른 컴퓨터에서 블로그 작성하기

npm install -g hexo-cli
# 저장소를 로컬로 클론
git clone https://github.com/your-name/your-name.github.io.git

# 로컬에 이미 클론되어 있다면, 블로그를 업데이트하기 전에 항상 최신 브랜치 내용을 풀(pull)해야 합니다.
git pull origin

# 해당 브랜치로 전환
git checkout source

# Hexo 설정에 있는 모든 플러그인을 설치한 후 블로그 콘텐츠를 업데이트 및 편집할 수 있습니다.
npm install

# 내용 수정 후에는 일련의 백업 과정을 잊지 마세요.
git add .
git commit -m "블로그 업데이트xxx"
git push origin source:source

# 최신 블로그 내용을 도메인 사이트에 배포
hexo clean
hexo g  # 정적 파일 생성
hexo s  # 로컬에서 블로그 효과 미리 보기
hexo d  # 최신 블로그 내용 배포

자주 사용하는 명령 요약

hexo g
# 또는 hexo generate, 원본 파일을 기반으로 정적 웹페이지 생성
hexo d
# 또는 hexo deploy, GitHub Pages로 배포 및 푸시
hexo s
# 또는 hexo server, 로컬에서 배포 및 테스트
hexo clean
# 정적 웹페이지 캐시를 비우고, hexo g로 다시 생성합니다.