Hexo

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Clean

1
$ hexo clean

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment

Actions自动化部署

Hexo自动化工作流总是遇到问题，今天终于解决了。实现了自动部署，终于不用先在本地PC生成静态文件了。方便在不同环境直接通过修改md文件实现对博客的更新。

部署过程

  • 新建一个博客源码私有仓库BlogSource

  • 创建一个有 repo 和 workflow 权限的 GitHub Token

  • 将上述Token添加到私有仓库的Secrets，命令为HEXO_DEPLOY

  • 创建工作流文件：.github\workflows\hexo-deploy.yml

内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
name: Hexo Deploy GitHub Pages
on:
  push:
    branches:
      - main

jobs:  
  build-and-deploy:  
    runs-on: ubuntu-latest  
    steps:
      - name: Checkout  
        uses: actions/checkout@master

      - name: Build and Deploy
        uses: h4m5t/hexo-deploy-github-pages-action@master # 使用专门部署 Hexo 到 GitHub pages 的 action
        env:
          PERSONAL_TOKEN: ${{ secrets.HEXO_DEPLOY }} # secret 名
          PUBLISH_REPOSITORY: h4m5t/h4m5t.github.io # 公共仓库，格式：GitHub 用户名/仓库名
          BRANCH: gh-pages # 静态页面仓库分支
          PUBLISH_DIR: ./public # 部署 public 目录下的文件

其中，用到的部署Action:https://github.com/h4m5t/hexo-deploy-github-pages-action

我这里是push到gh-pages分支了。要注意同步修改仓库设置中的Build Branch

源代码仓库中的.gitignore文件内容：

1
2
3
4
5
6
7
8
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
_multiconfig.yml

遇到的问题

  1. Actions总是报权限错误。删除掉源代码仓库中的node_modules文件夹后解决。
  2. themes文件夹下内容push报错。删除掉themes文件夹下.git文件后解决。

参考

https://akilar.top/posts/f752c86d/

https://github.com/cys2004/blog_source

https://juejin.cn/post/7133235874858270728#heading-2

mermaid流程图

修改：_config.butterfly.yml

1
2
3
4
5
6
7
8
# mermaid
# see https://github.com/mermaid-js/mermaid
mermaid:
  enable: true
  # built-in themes: default/forest/dark/neutral
  theme:
    light: default
    dark: dark

方法1

在博客根目录下执行：

1
npm install hexo-filter-mermaid-diagrams --save

参考：https://github.com/jerryc127/hexo-theme-butterfly/issues/1228#issuecomment-1554223960

安装此插件后，可以使用Typora支持的格式，方便本地预览和远程查看。

例如：

可以根据如下源码生成流程图：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<pre class="mermaid">graph LR
    A[Attacker crafts<br>malicious payload<br>with JNDI lookup] --> C{Log4j parses:<br>Contains JNDI lookup?}
    C -->|Yes| D[Execute<br>JNDI lookup]
    C -->|No| E[Normal log]
    D --> F[Connect to<br>attacker's server]
    F --> G[Download &<br>execute<br>malicious class]
    G --> H[Attacker gains<br>server control]
    
    classDef default fill:#f9f9f9,stroke:#333,stroke-width:1px;
    classDef highlight fill:#f9d5e5,stroke:#333,stroke-width:2px;
    classDef decision fill:#e3f2fd,stroke:#333,stroke-width:1px;
    classDef danger fill:#ffebee,stroke:#333,stroke-width:1px;
    
    class A,H highlight;
    class C decision;
    class G danger;</pre>
graph LR
    A[Attacker crafts
malicious payload
with JNDI lookup] --> C{Log4j parses:
Contains JNDI lookup?}
    C -->|Yes| D[Execute
JNDI lookup]
    C -->|No| E[Normal log]
    D --> F[Connect to
attacker's server]
    F --> G[Download &
execute
malicious class]
    G --> H[Attacker gains
server control]
    
    classDef default fill:#f9f9f9,stroke:#333,stroke-width:1px;
    classDef highlight fill:#f9d5e5,stroke:#333,stroke-width:2px;
    classDef decision fill:#e3f2fd,stroke:#333,stroke-width:1px;
    classDef danger fill:#ffebee,stroke:#333,stroke-width:1px;
    
    class A,H highlight;
    class C decision;
    class G danger;
sequenceDiagram
前端->>前端: 用户首次打开前端页面
前端->>后台: version : 0 
 请求同步数据
后台->>前端: 返回数据，同时携带最大的version
note right of 后台: 返回数据结构：{"version":100, data:[{},{},{}]}

方法2

使用butterfuly官方给出的引用方法。

参考：https://butterfly.js.org/posts/4aa8abbe/?highlight=mermaid#mermaid

写法：

1
2
3
{% mermaid %}
內容
{% endmermaid %}

示例：