首先贴上几个链接

官方文档：https://hexo.io/zh-cn/docs/

推荐的视频：

https://www.bilibili.com/video/av44544186

https://www.bilibili.com/video/av24897960

接下来我们开始安装

安装 Node.js

Hexo博客是基于node.js 框架的，所以首先要安装nodejs。下面给出链接

https://nodejs.org/en/

1563369322945

可以用下面的命令查看是否安装成功

1
node -v

安装 git

https://git-scm.com/downloads

传送门如上

安装一直点下一步就可以了，

安装hexo

创建一个放博客的文件夹

启动管理员权限的cmd，输入下面指令安装hexo

1
npm install -g hexo-cli

在blog所在的文件夹里输入

1
hexo init

然后一个 Hello World的博客就初始化完成了

使用博客

下面的命令很常用

1
2
3
4
5
hexo clean                   #清除缓存 
hexo g                       #生产文件
hexo s						 #再本地服务器查看
hexo d						 #推送
hexo new post "articles"     #新文章articles

在浏览器里输入

就可以看见博客了

把博客推送到github上（不推荐）

在 Github 上注册一个账号，然后开启一个仓库

首先安装一下插件

1
npm install hexo-deployer-git --save

然后进入 _config.yml 修改一下仓库地址为你之前创建仓库的地址(在最后一行)

1
2
3
4
deploy:
  type: git
  repo: git@github.com:Fyind/fyind.github.io.git
  branch: master

然后推送的时候用 hexo d 即可

添加标签

1
hexo new page tags

进入新生成的文件把 type 改成 tags

1
2
3
title: 标签
date: 2019-12-03 20:53:27
type: "tags"

添加分类

1
hexo new page categories

进入新生产的文件，如下编辑

1
2
3
title: 分类
date: 2019-07-18 13:30:05
type: "categories"

配置语言

在根目录里的 _config.yml 里面修改

1
language: zh-CN

支持图片（不推荐）

安装插件

1
npm install hexo-asset-image --save

然后进入 /node_modules/hexo-asset-image/index.js 打开这个文件, 把代码更换成下面的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
'use strict';
var cheerio = require('cheerio');

// http://stackoverflow.com/questions/14480345/how-to-get-the-nth-occurrence-in-a-string
function getPosition(str, m, i) {
  return str.split(m, i).join(m).length;
}

var version = String(hexo.version).split('.');
hexo.extend.filter.register('after_post_render', function(data){
  var config = hexo.config;
  if(config.post_asset_folder){
        var link = data.permalink;
    if(version.length > 0 && Number(version[0]) == 3)
       var beginPos = getPosition(link, '/', 1) + 1;
    else
       var beginPos = getPosition(link, '/', 3) + 1;
    // In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html".
    var endPos = link.lastIndexOf('/') + 1;
    link = link.substring(beginPos, endPos);

    var toprocess = ['excerpt', 'more', 'content'];
    for(var i = 0; i < toprocess.length; i++){
      var key = toprocess[i];
 
      var $ = cheerio.load(data[key], {
        ignoreWhitespace: false,
        xmlMode: false,
        lowerCaseTags: false,
        decodeEntities: false
      });

      $('img').each(function(){
        if ($(this).attr('src')){
            // For windows style path, we replace '\' to '/'.
            var src = $(this).attr('src').replace('\\', '/');
            if(!/http[s]*.*|\/\/.*/.test(src) &&
               !/^\s*\//.test(src)) {
              // For "about" page, the first part of "src" can't be removed.
              // In addition, to support multi-level local directory.
              var linkArray = link.split('/').filter(function(elem){
                return elem != '';
              });
              var srcArray = src.split('/').filter(function(elem){
                return elem != '' && elem != '.';
              });
              if(srcArray.length > 1)
                srcArray.shift();
              src = srcArray.join('/');
              $(this).attr('src', config.root + link + src);
              console.info&&console.info("update link as:-->"+config.root + link + src);
            }
        }else{
            console.info&&console.info("no src attr, skipped...");
            console.info&&console.info($(this));
        }
      });
      data[key] = $.html();
    }
  }
});

在 _config.yml 里设置

1
post_asset_folder: true

然后更改生成的连接

1
permalink: :title/

图床支持图片

参考这个博客

支持数学公式(不推荐)

用 ketex 比较好, 首先要禁用 mathjax

参见 这个文章

1
2
3
4
5
6
7
# 替換 `hexo-renderer-kramed` 或者 `hexo-renderer-marked` 等hexo的markdown渲染器
# 你可以在你的package.json裏找到hexo的markdwon渲染器，並將其卸載
npm un hexo-renderer-marked --save
# or
npm un hexo-renderer-kramed --save
# 然後安裝 `hexo-renderer-markdown-it-plus`
npm i @upupming/hexo-renderer-markdown-it-plus --save

使用过MathJax的方法

用pandoc代替默认渲染器

1
2
3
4
npm un hexo-renderer-marked --save
npm install hexo-renderer-pandoc --save
npm uninstall hexo-math --save
npm install hexo-renderer-mathjax --save

就ok了

参加 这个文章

支持数学公式: pandoc

用pandoc代替默认渲染

1
2
3
npm un hexo-renderer-marked --save
npm install hexo-renderer-pandoc --save
npm install hexo-filter-mathjax --save

在 _config.yml 加入

1
2
3
pandoc:
  args:
    - --mathjax

在butterfly的设置里修改

1
2
3
4
5
6
7
8
9
10
11
12
13
math:
  # Choose: mathjax, katex
  # Leave it empty if you don't need math
  use: mathjax
  per_page: true
  hide_scrollbar: false

  mathjax:
    # Enable the contextual menu
    enableMenu: true
    # Choose: all / ams / none, This controls whether equations are numbered and how
    tags: all

如果渲染有 \N \R 的问题，可以修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import os
import re

def replace_symbols_in_formula(file_path):
    with open(file_path, 'r', encoding='utf-8') as f:
        content = f.read()

    def replacer(match):
        formula = match.group(0)
        formula = formula.replace(r'\R', r'\mathbb{R}')
        formula = formula.replace(r'\N', r'\mathbb{N}')
        return formula

    pattern = re.compile(r'(\$\$.*?\$\$|\$.*?\$)', re.DOTALL)
    new_content = pattern.sub(replacer, content)

    if new_content != content:
        with open(file_path, 'w', encoding='utf-8') as f:
            f.write(new_content)
        print(f'Updated: {file_path}')

def scan_and_replace(dir_path):
    for root, dirs, files in os.walk(dir_path):
        for file in files:
            if file.endswith('.md'):
                file_path = os.path.join(root, file)
                replace_symbols_in_formula(file_path)

if __name__ == '__main__':
    hexo_source_dir = './source/_posts'  # 修改成你的文章目录
    scan_and_replace(hexo_source_dir)

折叠块

使用折叠块需要用 pandoc 渲染器渲染

效果如下：

点此处展开
  • 重点1 \[ \sum_{i=3}^4 a_i = b \]
  • 重点2 \(a + b = c^3\)
  • 下面是一段代码 
    1
    #include <cstdio>
  • 重点4 > 定义4: > > abcd \(a+b\) a definition
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<details>
<summary> 点此处展开 </summary>

- 重点1
$$
 \sum_{i=3}^4 a_i = b 
$$
- 重点2 $a + b = c^3$
- 下面是一段代码
  
- 重点4
  > 定义4:
  >
  > abcd $a+b$ a definition

</details>

Github自动推送

参考博客

先创建一个存放博客的repo，把hexo博客源文件放里面

然后

创建Github Action

获取 Github token

打开https://github.com/settings/tokens 点击 Generate new token 新建个 token

img
img

复制token

img

添加Secret

img

创建 GITHUBTOKEN,GITHUBUSERNAME,GITHUBEMAIL

添加workflow

img 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
name: 自动部署

on:
  push:
    branches:
      - main  # 如果你用的是 master 分支，请改为 master
  release:
    types: [published]
  workflow_dispatch:  # ✅ 允许手动触发

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
    - name: 检查分支
      uses: actions/checkout@v3
      with:
        ref: main  # 和上面保持一致

    - name: 安装 Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '16'

    - name: 安装 Pandoc
      run: sudo apt-get update && sudo apt-get install -y pandoc
    
    - name: clone butterfly
      run: git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

    - name: copy image
      run: cp img/* themes/butterfly/source/img/

    - name: copy costomized layout
      run: cp index.styl themes/butterfly/source/css/_global/index.styl

    - name: 安装 Hexo CLI
      run: npm install -g hexo-cli

    - name: 缓存依赖
      uses: actions/cache@v4  # ✅ 使用最新版本
      with:
        path: node_modules
        key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
        restore-keys: |
          ${{ runner.os }}-npm-

    - name: 安装依赖
      run: npm install

    - name: 生成静态文件
      run: |
        hexo clean
        hexo generate

    - name: 部署到 GitHub Pages
      run: |
        cd ./public
        git init
        git config user.name "${{ secrets.GITHUBUSERNAME }}"
        git config user.email "${{ secrets.GITHUBEMAIL }}"
        git add .
        git commit -m "Deploy: ${{ github.event.head_commit.message }} ($(date -u +'%Y-%m-%d %H:%M:%S'))"
        git push --force --quiet "https://${{ secrets.GITHUBUSERNAME }}:${{ secrets.GITHUBTOKEN }}@github.com/${{ secrets.GITHUBUSERNAME }}/${{ secrets.GITHUBUSERNAME }}.github.io.git" master:master

Butterfly主题配置

官方文档：https://butterfly.js.org/

需要 hexo 5.0.0 以上，更新方法 https://www.jianshu.com/p/98ac1e253e6e

进入 blog 根目录，首先把主题克隆进来

1
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

然后安装一下插件

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

然后进入 _config.yml更改一下主题

然后把主题文件夹的 themes/butterfly/_config.yml 复制到博客根目录，并且命名为 _config.butterfly.yml

透明

打开 themes/butterfly/source/css/_global/index.styl 修改下面的参数(第16行)

1
--card-bg: rgba(240,248,255,0.8)

置顶

在对应文章开始的地方加入

sticky: 1 这个值设置越大，优先级越高

其他设置

其余的设置可以去参考Butterfly官方文档，那里写的比较详细

SokaX主题配置

安装：

1
2
3
4
# hexo init
npm install shokax-cli --location=global
# cd your_blog
SXC install shokaX

https://docs.kaitaku.xyz/

图片：

此外还要再

1
node_modules\hexo-theme-shokax\scripts\filters\post.js

里面修改代码