Implementing multilingual in Hexo

I want to do my multilingual site in a sudden, so I search for the simple and appropriate way to achieve that but I failed. However in Mr.SaltyLeo’s blog I found this particular article Hexo adds multi-language support「internationalized i18n」, and figure it out.

The idea is simple. First, using hexo to generate my main-lang site, then generate the sub-lang site. Third, copy the generated-sub-resource-folder to main-resourece-folder, and deploy it! That’all.

For example, I created my en folder to hold my sub-lang site content. Then I copy all the files & folders except the one in .gitignore in the original folder to this folder, and there is what I’ve done after.

First: Modifying config to genereate each sites

There is just a little to edit with config files. Since my choice of hexo’s theme is maupassant and what I’ve to do is to add a entrance(as you can see in the up-right corner of this page) of another multilingual-site. I need to add a config to each _config.yml files in each theme folder:

menu:
  - page: 中文 ## If in en folder. English for main folder
    directory: https://blog.decay.fun ## same reason
    icon: fa-language

finally, we should modify the right path to our new lang-site. Going to the Hexo’s config file(NOT THEME) and change these three attributes:

language: en # original zh-CN
url: https://blog.decay.fun/en ## original https://blog.decay.fun
root: /en/ ## original /

Second: Creating script to generating blog files automatically

Content is the essential part to our blog. After we finished the config part, we should think about in what way we make our file?

I used to use hexo’s command to help me generating article.

hexo new article-name

However, in our new circumstance we should use that command twice! No one wants that. So the first thought came to my mind was creating a new command that do it for me. That’s why I write this js file:

const { exec } = require("child_process");

let title = process.argv.splice(2)[0];
console.log("Creating Post: ", title);

exec(`hexo new ${title}`, (err, out) => {
  if (!err) {
    console.log("zh_CN File Created: ", out);
    exec(`cd ./en && hexo new ${title}`, (err, out) => {
      if (!err) {
        console.log("en File Created: ", out);
      }
    });
  }
});

and give it a npm script to run. Now I can use

npm run create article-name

to generate files automatically for me.(This blog was generated by the method BTW.)

Now you have your config & articles ready, the next step is to

Deploy

The process is simple

Generate main-site > Generate sub-site > copy sub-site to main-site > deploy

But I’m using Windows now, so there was no shell for me to save my time. Node’s fs module is my only savior.

So I write this js file to do the copy and deploy for me:

const { exec } = require("child_process");
const fs = require("fs");

let totalCount = 0,
  finishedCount = 0;

exec("hexo clean && hexo g", (err, out) => {
  if (!err) {
    console.log("CN_SITE_GENERATED");
    exec("cd ./en && npm run g", (err, out) => {
      if (!err) {
        console.log("EN_SITE_GENERATED");
        exec("cd ../", () => {
          totalCount = getTotalPathCount("./en/public/");
          copyDir("./en/public", "./public/en", err => {
            if (!err) {
              if (totalCount == finishedCount) {
                console.log("DEPLOYING...");
                exec("hexo deploy", (err, out) => {
                  if (!err) {
                    console.log(out);
                  } else {
                    console.log(err);
                  }
                  exec("exit");
                });
              }
            }
          });
        });
      }
    });
  }
});

and give it a npm script, now I can use

npm run d(eploy)

to deploy my blog!

Hope you enjoy it.