Hexo에서 다국어(multilingual) 블로그로 커스텀하기

Hexo 블로그에서 여러 언어를 지원하는 구조로 커스텀 하는 방법을 공유합니다.

---

현재 상황

현재 기술 블로그 상황은 아래와 같다.

• Hexo와 Fluid 테마를 사용 중이다.
• Fluid 테마는 기본적으로 다국어를 지원하지 않는다.
• 다국어 지원을 위해 커스텀 개발이 필요했다.

커스텀 조건

내가 원했던 커스텀 조건은 아래와 같다.

• 기본 루트 url은 한국어로 두고, 영어만 /en/ 경로로 리다이렉트 되도록 진행한다.
• 각 포스트는 독립적으로 작성되며, 언어별 카테고리나 태그도 언어 포스트에 맞게 구성되어야 한다.
• Navbar에 언어 선택 드롭다운을 추가해 언어를 전환할 수 있어야 한다.

커스텀 설정

커스텀 방법은 간단했다. 동일한 테마를 사용하는 2개의 hexo 블로그를 만들어서 navbar만 살짝 변경해주는 것이다. 위 조건을 만족하기 위해 블로그 배포 폴더와 소스코드 폴더를 아래와 같이 구성했다.

drwxr-xr-x  18 ryu  staff   576  1  2 06:33 deploy
drwxr-xr-x  13 ryu  staff   416  1  2 05:22 en-blog
drwxr-xr-x  11 ryu  staff   352  1  3 01:47 ko-blog

• en-blog: 영어 블로그 소스 코드 폴더
• ko-blog: 한국어 블로그 소스 코드 폴더
• deploy: 배포할 최종 파일만 모아두는 폴더

처음 시작하는 경우, 아래의 명령어를 사용해 각각의 블로그 소스 코드를 생성할 수 있다.

hexo init ko-blog
hexo init en-blog

그 후에 각각의 블로그 폳더로 들어가서 원하는 테마를 다운받은 후 기본값을 셋팅해야 한다. 각각 독립적인 hexo 블로그이기 떄문에 셋팅도 각각 해주어야 한다.

# 한국어 버전
cd ko-blog
npm install --save hexo-theme-fluid

# 영어 버전
cd en-blog
npm install --save hexo-theme-fluid

나의 경우 한국어 버전을 root url로 사용할 예정이었기 떄문에 hexo _config.yml을 다음과 같이 설정하였다.

# 한국어 버전: /ko-blog/_config.yml
language: ko
url: https://dev-bearabbit.github.io
root: /
permalink: :lang/:title/


# 영어 버전: /en-blog/_config.yml
language: en
root: /en/
permalink: :lang/:title/

이렇게 설정하면 permalink에 언어가 포함되기 때문에 포스트 작성 시 아래와 같이 lang을 꼭 작성해주어야 한다. 따라서 포스트 기본 레이아웃에 lang을 추가한다.

# 한국어 버전: /ko-blog/scaffolds/post.md
---
title: {{ title }}
lang: ko
date: {{ date }}
tags:
categories:
---

# 영어 버전: /en-blog/scaffolds/post.md
---
title: {{ title }}
lang: en
date: {{ date }}
tags:
categories:
---

다음으로는 각 테마의 소스코드에 들어가서 navbar에 언어를 변경할 수 있는 드랍다운을 추가한다. 여기서 사용중인 테마 fluid는 layout/_partials/header/navigation.ejs에서 추가할 수 있다.

<!-- 한국어 버전: /ko-blog/themes/fluid/layout/_partials/header/navigation.ejs -->
<!-- 영어 버전: /en-blog/themes/fluid/layout/_partials/header/navigation.ejs -->
          <div class="dropdown-menu" aria-labelledby="languageDropdown">
            <a class="dropdown-item" href="/">한국어</a>
            <a class="dropdown-item" href="/en/">English</a>
          </div>

그 다음 선택된 언어 navbar에 나타나도록 하기 위해서 아래 스크립트도 추가해주었다.

<script>
  document.addEventListener('DOMContentLoaded', () => {
    // 현재 언어를 URL 기반으로 감지
    const path = window.location.pathname;
    const currentLang = path.startsWith('/en/') ? 'English' : '한국어';

    // 선택된 언어를 버튼에 표시
    const currentLangElement = document.getElementById('current-lang');
    currentLangElement.textContent = currentLang;
  });
</script>

마지막으로 head.ejs에 링크값을 추가한다.

<!-- 한국어 버전: /ko-blog/themes/fluid/layout/_partials/head.ejs -->
<!-- 영어 버전: /en-blog/themes/fluid/layout/_partials/head.ejs -->

  <link rel="alternate" hreflang="ko" href="https://dev-bearabbit.github.io/" />
  <link rel="alternate" hreflang="en" href="https://dev-bearabbit.github.io/en/" />  

이렇게 하면 설정은 완료된다.

블로그 배포

현재 해당 블로그는 Github Page를 사용하여 배포되고 있다. 각각의 폴더에 들어가서 배포 파일을 만들어주자.

# 한국어 버전: ko-blog
# 영어 버전: en-blog
hexo clean
hexo generate

위 명령어를 입력하면 아마 아래 폴더에 정적으로 컴파일된 배포 파일이 들어 있을 것이다.

• 한국어 버전 배포파일: ko-blog/public/
• 영어 버전 배포파일: eo-blog/public/

폴더에 들어있는 파일을 모두 deploy 폴더로 옮겨준다. 여기서 중요한 핵심은 루트 url을 사용할 한국어 버전은 deploy에 바로 옮겨주고 /en/을 사용할 영어 버전은 deploy/en/ 폴더에 옮겨주어야 한다.

rm -rf deploy/*

mv ko-blog/public/* deploy/
mkdir -p deploy/en/ && mv en-blog/public/* deploy/en/

모두 옮겼다면 해당 deploy 폴더 파일만 깃허브에 배포한다.

# 초반에만 셋팅
cd deploy
git init
git remote add origin https://github.com/<username>/<repository>.git

# deploy 폴더에서 배포진행
git add .
git commit -m "Deploy folder initial commit"
git push origin main

그러면 다국어를 지원하는 hexo 블로그를 만들 수 있다.