Yongtao Hu's blog

Blogging via Hexo

Posted on Edited on Disqus:

I recently moved my blog here using Hexo instead of previous Jekyll, though the old version is still available. Hexo is a fast, simple & powerful blog framework. Compared with Jekyll, Hexo is more flexible in terms of setup, post writing via Markdown, tags, themes, content searching, 3rd-part plugin support, etc.

This post summarizes the setup steps of Hexo in Windows 10, which I hope will somehow help those who want to blog using Hexo as well.

Install

  1. Install Node.js. Verify installation via running node -v in cmd.
  2. Install Git. Verify installation via running git version in cmd.

  3. Install Hexo (using the following command in cmd). Verify installation via running hexo version in cmd.

    1
    npm install -g hexo-cli

    Note: If encountering with “Error: Cannot find module ‘hexo’”, try install Hexo using the following command instead

    1
    npm install hexo

Init blog

  1. Open cmd in the target base folder.
  2. Run the following commands (assume blog root folder as blog): 
    1
    2
    3
    hexo init blog
    cd blog
    npm install

Config

Setup deploy repo1

  1. Create a Git repo, e.g. blog under me GitHub account.
  2. Add SSH Key to me GitHub account (assuming assocaited with email account me@gmail.com).
    1. Open Git Bash.
    2. Run commands 
      1
      ssh-keygen -t rsa -C me@gmail.com
    3. Open created id_rsa.pub and copy all its content to me GitHub account.
  3. Setup user info by running following commands in Git Bash 
    1
    2
    git config --global user.name "user_name"
    git config --global user.email "email_address"

Use NexT theme

  1. Download NexT releases and put it to blog/themes/next.
  2. Enable it by editing blog/_config.yml. 
    1
    theme: next

Support global search2

  1. Install plugin hexo-generator-searchdb. Run following commands in cmd. 
    1
    npm install hexo-generator-searchdb --save
  2. Add following config to blog/_config.yml. 
    1
    2
    3
    4
    5
    6
    # search
    search:
    path: search.xml
    field: post
    format: html
    limit: 10000
  3. Enable in theme config, i.e. blog/themes/next/_config.yml. 
    1
    2
    3
    # Local search
    local_search:
          enable: true

Support images via standard Markdown5

  1. Enable in config blog/_config.yml. 
    1
    post_asset_folder: true
  2. Run commend in cmd. 
    1
    npm i -s hexo-asset-link
  3. Done! Add image in post using 
    1
    ![Alt Text](Post-Asset-Folder/image-name.png)

Support LaTex math equations3

  1. Install Kramed to replace Marked. 
    1
    2
    npm uninstall hexo-renderer-marked --save
    npm install hexo-renderer-kramed --save
  2. Config blog/node_modules/hexo-renderer-kramed/lib/renderer.js. Replace 
    1
    2
    3
    4
    5
    // Change inline math rule
    function formatText(text) {
          // Fit kramed's rule: $$ + \1 + $$
          return text.replace(/`\$(.*?)\$`/g, '$$$$$1$$$$');
    }
    by 
    1
    2
    3
    4
    // Change inline math rule
    function formatText(text) {
          return text;
    }
  3. Install hexo-renderer-mathjax to replace hexo-math. 
    1
    2
    npm uninstall hexo-math --save
    npm install hexo-renderer-mathjax --save
  4. Config Mathjax CDN in blog/node_modules/hexo-renderer-mathjax/mathjax.html. Config <script> as 
    1
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>
  5. Config blog/node_modules/kramed/lib/rules/inline.js.
    1. Replace 
      1
      escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
      by 
      1
      escape: /^\\([`*\[\]()# +\-.!_>])/,
    2. Replace 
      1
      em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
      by 
      1
      em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
  6. Enable Mathjax in blog/themes/next/_config.yml 
    1
    2
    mathjax:
          enable: true
  7. Enable in given post (only enable when needed for speed). 
    1
    2
    3
    4
    5
    ---
    title: ...
    date: ...
    mathjax: true
    ---

Support Disqus comments4

  1. Setup on Disqus.
    1. Create an account and log into Disqus.
    2. Click the GET STARTED button.
    3. Click I want to install Disqus on my site.
    4. Enter Website Name, which will serve as your Disqus shortname, and select a Category.
    5. Click Create Site button.
    6. In 2. Install Disqus, click I don't see my platform listed, install manually with Universal Code, and then click Configure.
    7. Click Complete Setup.
  2. Config in blog/themes/next/_config.yml. 
    1
    2
    3
    4
    disqus:
          enable: true
          shortname: your-short-disqus-name
          count: true

Write, preview & deploy

  1. Create a post, e.g. first post. This will add blog/source/_posts/first-post.md, which can be edited using any text/Markdown editor you want. 
    1
    hexo new "first post"
  2. Build and preview posts (preview at http://localhost:4000) 
    1
    hexo generate && hexo server

    Note: While in preview, post edits will be updated in realtime (may require refreshing the preview page).

  3. Deploy/publish. By default, it will be available at https://me.github.io. 
    1
    hexo clean && hexo g -d
1. 针对github权限导致hexo部署失败的解决方案 ↩
2. hexo - Next 主题添加搜索功能 ↩
3. 如何在 hexo 中支持 Mathjax? ↩
4. Comment Systems ↩
5. Adding Images to Hexo Posts with Markdown ↩