Basic preparations

installation

The installation process mainly follows the blogs in reference [1]'[2].

choose proper theme

Hexo is born with the markdown script which could contain math equation, tables and lots lots more. For a long article written in markdown, it is important to display a table of contents for better navigation. However, the [toc] is not supported by Github markdown, you could search for a Hexo theme that supports table of contents. Here I choose the Aath theme developed by lewis-geek in Shanghai. His theme is maintained on Github: https://github.com/lewis-geek/hexo-theme-Aath. I have made several small changes to his theme locally to unify the contents all to English. Here is the main change:

Aath theme[3]

And before you use Aath theme, you should install the necessary support modules with the command:

1
2
3
4
5
# install the support modules
npm install --save hexo-renderer-sass
# clone Aath module
cd .../hexo/theme
git clone -b master https://github.com/lewis-geek/hexo-theme-Aath.git themes/aath

apply aath theme

in hexo -> _config.yml, change the theme to aath.

1
theme: aath

In hexo -> theme -> aath -> _config.yml

Change the Chinese menu option name to English:

1
2
3
4
5
6
# main menu navigation
menu:
  Home: /
  About: /about
  Archives: /archives
  tags: /tags

In aath -> layout -> post.ejs

Change all the Chinese expressions to English.

Display latex formula[4]’[5]

Install pandoc

In order to display latex formula in your markdown file to your blog home page, you need to install pandoc. It could render the latex syntax in markdown to html5. This is the final display method used by website.

Install latex component to hexo

To make these configuration, I follows the instruction on these blog. Later I found that It start to work after a modification:

  • Step 1: modify configure file
    In theme file: hexo ->themes -> aath -> layout -> _partial -> head.ejs. Add the
    above codes in it:
1
2
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.6.0/katex.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.6.0/katex.min.js"></script>
  • Step 2
    Install the hexo latex addons by:
1
2
npm install hexo-renderer-pandoc --save
npm install hexo-katex --save

After these two steps, the latex rendering on web page begin to work with my theme.

Bugs

hexo port 4000 has been used

You can switch to port 5000 with this command

1
hexo server -p 5000

TypeError Cannot read property ‘offset’ of null[6]

Chang your timezone in the configure file of hexo: _config.yml

1
timezone: Asia/Shanghai

Markdown style setting

Tags

The Tags of each blog will be set with caption on the first letter of the word.

MD titles on each level

The .md blog document will also have capital letter on the first word.

Space

The distance of sub-level in .md blog file will be set as double lines. The distance between top levels will be set as 4 lines. Also the space between “```” separated source codes will have at least one line space.

References:

  1. https://www.cnblogs.com/liuxianan/p/build-blog-website-by-hexo-github.html ↩︎

  2. http://www.cnblogs.com/zhcncn/p/4097881.html ↩︎

  3. https://github.com/lewis-geek/hexo-theme-Aath ↩︎

  4. http://lowrank.science/Hexo-KaTeX/ ↩︎

  5. http://dawnote.net/2017/12/01/如何在HEXO中渲染Latex数学公式/ ↩︎

  6. https://my.oschina.net/xzfx/blog/519932 ↩︎