升级了博客

    Hexo

博客最早运行在一套比较老的 Hexo 环境上。后来 Mac、Node.js、Hexo 和各种插件都升级了很多代,旧环境虽然还能勉强运行,但越来越依赖历史版本的软件,维护成本也越来越高。

这次借助 AI 彻底换了底层运行环境、Markdown 渲染、数学公式、代码高亮、CSS 构建和响应式布局等架构。还改进了博客的样式,方便今后产出更系统化的文字内容。


新旧区别

旧版大致是:

Markdown
  ↓
Hexo 3.9.0
  ↓
Kramed / 旧版插件
  ↓
PLN 主题
  ↓
Stylus / node-sass / 浏览器端 Highlight.js 等旧链路
  ↓
静态网页

新版大致是:

Markdown
  ↓
Hexo 8.1.2
  ↓
Marked + CJK 兼容处理
  ↓
hexo-math / Hexo 内置 Highlight.js
  ↓
PLN EJS 模板
  ↓
Dart Sass 编译 SCSS
  ↓
静态 HTML + CSS + 少量 JavaScript
  ↓
GitHub Pages

最大的区别不是页面看起来完全不同,而是生成网页的链路更简单、更现代,也更容易继续维护。


Node.js 和 Hexo

旧版最后使用的本地环境是:

Node.js 13.14.0
npm 6.14.4
Hexo 3.9.0
hexo-cli 2.0.0

在 Apple Silicon Mac 上,这套环境实际依赖过 x64 / Rosetta。

新版改为:

Node.js 24 LTS
Hexo 8.1.2
hexo-cli 4.3.2

新的终端命令

写文章:

cd ~/blog                 # 进入博客目录
nvm use                   # 依据 .nvmrc 文件切换到对应的 Node.js 版本
npx hexo new "new post"   # 创建新博文 - 链接格式 /2026/10/24/new-post/

# npx 代表调用项目对应版本的 hexo ,和项目依赖严格一致,避免不兼容
#(先运行当前目录中的 hexo ,没有就临时下载对应版本,执行完自动清理)

本地预览效果:

cd ~/blog
nvm use

npm run build  # package.json 设置了 "build": "hexo clean && hexo generate"
npx hexo s     # 启动服务器,在 http://localhost:4000/ 预览博客

如果改了 PLN 主题内容,则需要先更新 m.min.css 再 npm run build:

npm run css   # package.json 设置了 "css": "sass ... .../css/m.min.css"
npm run build
npx hexo s

提交源码

如果只是新增或修改文章:

cd ~/blog

git status
git add source
git commit -m "Update blog posts"
git push origin master

修改 PLN 后要 commit 两次,push 两次:

  • 第一次,先提交 PLN:

    cd ~/blog/themes/pln
    
    git status
    git add -A
    git commit -m "Update PLN theme"
    git push origin HEAD
  • 第二次,回到 blog 提交:

    cd ~/blog
    
    git add themes/pln
    git commit -m "Update PLN theme revision"
    git push origin master

必须先 push PLN,再 push blog 的 submodule pointer。


更新网站 - GitHub Pages

博客源码仓库和最终网页不是同一个东西。日常发布可以理解为两步:

Git push
→ 保存博客源码

Hexo deploy
→ 更新 GitHub Pages 网页

Hexo 会把生成后的静态网站(各种 .html 文件)部署到:

git@github.com:chpwang/chpwang.github.io.git

发布:

cd ~/blog
nvm use        # 依据 .nvmrc 文件切换到对应的 Node.js 版本

npm run build  # package.json 设置了 "build": "hexo clean && hexo generate"
npx hexo d     # 部署静态网页到 GitHub Pages

发布后打开博客链接检查最终线上效果:

https://cps.ninja

完整博文流程总结

cd ~/blog                 # 进入博客文件夹目录
nvm use                   # 切到对应的 Node.js
npx hexo new "new post"   # 创建新博文

## 对 source/_posts/new-post.md 文件进行各种编辑 ##

npm run build  # 生成静态网页 - "build": "hexo clean && hexo generate"
npx hexo s     # 本地预览效果

# 保存 - save & push
git add .                           
git commit -m "Update blog posts"
git push origin master

npx hexo d     # 部署静态网页到 GitHub Pages

其他延伸阅读:
常用的 Markdown 语法、排版和技巧
常用的 LaTex 语法


打赏