升级了博客
博客最早运行在一套比较老的 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 语法
打赏