Setting up This Blog

It is not technically difficult to set up this blog. But testing different configurations costs a lot of time.
Here are some details of how I set up this blog using Hexo with theme Redefine.

Things I need

There are four major things that I need for writing posts:

code blocks
math notations
music notations
encryption
maybe multilingual support

Code blocks

Supported out of the box, and should be supported by every markdown renderer.
Examples:

Inline code are fenced with the tick ` symbol: `code` give you code.
Code blocks can be fenced in arbitrary lines with ```, where you can also specify the language to get syntax highlighting like this:

```c
#include <stdio.h>
int main() {
    printf("Hello World\n");
}
```

gives you:

#include <stdio.h>
int main() {
    printf("Hello World\n");
}

Math Notations

Math notations are not directly rendered with markdown so a plugin has to be added.
I chose to use MathJax for this functionality with the following config:

mathjax:
  tags: none               # or 'ams' or 'all'
  single_dollars: true     # enable single dollar signs as in-line math delimiters
  cjk_width: 0.9           # relative CJK char width
  normal_width: 0.6        # relative normal (monospace) width
  append_css: true         # add CSS to every page
  every_page: true         #  every page will be rendered by mathjax

Inline math can be wraped with $ sign:

$\sum_{i=0}^{n}\frac{1}{n}$ :

Large equations can be wraped with $$ in arbitrary lines:

1
2
3

$$
Some math here
$$

Example matrix multiplication:

Music Notations

Writing music notations is however not standardized in markdown language.

ABC notation is a nice way to write notes like code, and the node module abcjs provides rendering with ABC notation.
There is also a plugin called hexo-tag-abcjs. However, this plugin is outdated and is not easy to use.

Now create a tag called abcjs and then write a script to let hexo render it!

Note

The ABC music notation is not bracket-friendly, which means it might create confusion in the markdown syntax (not happened yet but possible).

Example:

{% abcjs %}
X: 43
T: Piano Sonata No. 11 in A major, K 331 (300i), mvmt. 1a
C: Wolfgang Amadeus Mozart
L: 1/8
M: 6/8
Q: "Thema: Andante grazioso" 1/8=144
%%staves {1 2}
V: 1 clef=treble
V: 2 clef=bass
K: A
[V:1] c>dce2e | B>cBd2d | A2AB2B | c2e/d/c2B & E2BA2G | 
[V:2] E2EE2E & A,>B,A,C2C | E2EE2E & G,>A,G,B,2B, | E2EE2E & F,2F,G,2G, | A,2D,E,3 |
[V:1] c>dce2e | B>cBd2d | A2Bc2[FBd] | [E2A2c2][DEGB][C2E2A2]z :|]
[V:2] E2EE2E & A,>B,A,C2C | E2EE2E & G,>A,G,B,2B, | E2EE2x & F,2G,A,2D, | E,2E,,A,,2z :|]
{% endabcjs %}

But we still need a script to render this. Create a scripts folder inside your hexo root folder, and add a script hexo-abcjs.js. Then we need to process tags and transform the ABC notation into html.

// Process tag: {% abcjs %} ... {% endabcjs %}
hexo.extend.tag.register('abcjs', function(args, content) {
  const options = {};
  args.forEach(arg => {
    const [key, value] = arg.split('=');
    if (key && value !== undefined) {
      if (!isNaN(value)) {
        options[key] = parseFloat(value);
      } else if (value.toLowerCase() === 'true' || value.toLowerCase() === 'false') {
        options[key] = value.toLowerCase() === 'true';
      } else {
        options[key] = value;
      }
    }
  });

  const blockId = `abcjs-${Math.random().toString(36).substring(2, 9)}`;
  const renderScript = `
<script>
  if (typeof ABCJS !== 'undefined') {
    ABCJS.renderAbc("${blockId}", \`${content}\`, {
      responsive: ${options.responsive !== undefined ? options.responsive : "'resize'"},
      staffwidth: ${options.staffwidth || 900},
      scale: ${options.scale || 1},
      paddingtop: ${options.paddingtop || 10},
      paddingbottom: ${options.paddingbottom || 10},
      paddingright: ${options.paddingright || 10},
      warnings: ${options.warnings !== undefined ? options.warnings : 'true'},
      editable: ${options.editable !== undefined ? options.editable : 'false'}
    });
  }
</script>
`;
  const container = `<div id="${blockId}", class="swup-container">\n${renderScript}\n</div>`
  return container
}, { ends: true });

This script also allows us to add abcjs render options if needed.

Note

Using the wrap rendering option might cause issue! Avoid if possible!
Related issue: https://github.com/paulrosen/abcjs/issues/1125

Note

If you are using swup, scripts inside html will not be automatically executed. You have to manually reload the page to make it work.
Soluton: load <script src="/js/abcjs-basic.js"></script> outside the swup container. If you are using theme Redefine, just edit the config:

inject:
  enable: true
  head: 
    - '<script src="/js/abcjs-basic.js"></script>'

You also have to edit one of the source file of Redefine located in themes/redefine/layout/components/swup.ejs and modify optin: false of the SwupScriptsPlugin:

1
2
3

new SwupScriptsPlugin({
    optin: false,
}),

Now the script will be automatically executed without reloading the page.

Result:

Encryption

Not all posts should be available to the public, you only want friends etc. to see it.
A nice plugin called hexo-blog-encrypt can do it.
My theme Redefine already contains it with some modifications so I can use it out of the box.
Just put a password field inside the front matter of the post you want to encrypt like this:

title: Encryption is the Key
date: 2025-01-01 00.00.00
tags: encrypted
password: very-secure-password

Warning

All the decryption logic is stored in the frontend, so offline bruteforce is possible. You should use a strong password.

Multilingual

It is not really worth it to write one thing in every possible language. But in some cases, it might be useful to have a section writte in different languages, e.g. if you are learning a new language.
The tabs functionality is really nice to use.
Example (machine-translated):

The closer you look, the less you see

看得越近，看到的反而越少

Je genauer du hinschaust, desto weniger nimmst du wahr.

자세히 들여다볼수록 보이는 것이 줄어든다.

よく見ようとするほど、逆に見えるものが少なくなる。