exploring multilingual site solutions in hexo

Foreword

If you only expect a single language site after deployment of you blog, you can refer to i18n. However, if you want a multilingual site after deployment, or even switch displayed language, and your theme doesn't support it (Well, some themes like NexT, already support it), then this blog is for you.

Possible Solutions

Create Multiple Blogs and Merge Their Public

In this way, you need to create multiple blogs and use a build script to build each language blog and merge them into a public.

For example, you want to support en and zh-CN. You may use pnpm to manage workspace and make the directory structure as following.

my-blog
├── package.json
├── packages
│   ├── en  
│   └── zh-CN
├── pnpm-workspace.yaml
└── scripts
    └── build.sh

Each language blog is put into packages, in which you can write post like before, except for some changes which I will take about later.

But if you want to build to public, a custom build script is needed, which is used to build each language and copy its public to you project root public.

# build.sh
cd packages/zh-CN
hexo clean && hexo generate
cp -r public ../../public/zh-CN

cd ../en
hexo clean && hexo generate
cp -r public ../../public/en

The real pain is local preview, hexo server is useless. You either need to implement something like hexo server, or use build.sh and http-server to preview, which is slower then hexo server.

Another pain is changes have to made to make sure everything works fine. For example, in packages/zh-CN, root in _config.yml should be /zh-CN and resources reference path may need to prefixed /zh-CN. It's the same with packages/en.

At first, I adopted this solution, but I was gradually sick of it and luckily I found another way which is perfect for me.

Custom Theme

We may be frightened when talking to custom theme. But luckily this multilingual site feature is supported in this theme arch. If you want to use this feature but prefer to use your current theme, you may refer to arch's implement or seek help from its author.

As far as I know, this theme is built on hexo-theme-oranges, and supports all oranges' features. Seeing its code, I find arch removes all hexo-generator-* and uses its own implement 👍 in plugin. By seeing source, I find posts are divided into language subdirectory while nav menus belonging to the same language are merged together. Below is my current directory structure.

source
├── _posts
│   ├── en
│   └── zh-CN
├── en
│   ├── 404
│   ├── about
│   ├── categories
│   └── tags
└── zh-CN
    ├── 404
    ├── about
    ├── categories
    └── tags

If there is any possibility that you may need a multilingual site, arch is perfect for you.