双城之战
806 字
4 分钟
安知鱼主题 Hexo 博客搭建与 Vercel 部署全攻略
安知鱼主题 Hexo 博客搭建与 Vercel 部署全攻略
最近把博客换成了安知鱼主题,折腾了一圈,把这套最稳的搭建流程记下来。希望能帮后来人少走弯路。
一、 环境准备与初始化
首先,确保你的电脑里有 Node.js(推荐 v18+)。
- 安装 Hexo 全局脚手架:
Terminal window npm install hexo-cli -g - 找个干净的目录,初始化项目:
Terminal window hexo init anzhiyu-blogcd anzhiyu-blogyarn install # 建议统一用 yarn,速度快且稳
二、 安装安知鱼主题
安知鱼支持多种安装方式,这里建议选插件化安装,以后更新主题只要一行命令。
- 安装主题核心:
Terminal window yarn add hexo-theme-anzhiyu - 应用主题:
打开根目录的
_config.yml,把theme改成anzhiyu。 - 配置文件备份:
为了方便自定义样式,建议把主题的配置拷到根目录:
Terminal window cp -rf ./themes/anzhiyu/_config.yml ./_config.anzhiyu.yml
三、 避坑:解决 ERR_REQUIRE_ESM 冲突
这是最关键的一步。 现在的 Node 环境下跑 hexo generate 经常会报 strip-ansi 相关的红字错误,因为依赖库版本打架了。
解决方案:
在 package.json 里手动加上 resolutions(Yarn)或 overrides(npm)来强行锁版本:
"resolutions": { "strip-ansi": "6.0.1", "ansi-regex": "5.0.1"}改完后,执行以下命令重装依赖:
Remove-Item -Recurse -Force node_modules # 删掉旧的yarn install # 重新洗牌四、 补齐必备插件
安知鱼主题是用 Pug 和 Stylus 写的,Hexo 默认不带,必须手动装上:
yarn add hexo-renderer-pug hexo-renderer-stylus注:如果 npm 慢,直接用 cnpm 或者换淘宝源,别死磕。
五、 关联 GitHub 仓库
- 在 GitHub 上新建仓库,名字随便起,但不要勾选初始化 README。
- 终端执行:
注意: 如果你之前是用
Terminal window git initgit add .git commit -m "Initial commit"git branch -M maingit remote add origin https://github.com/你的用户名/仓库名.gitgit push -u origin maingit clone下的主题,记得删掉themes/anzhiyu里的.git隐藏文件夹,不然主题代码传不上去。
六、 部署至 Vercel
- 登录 Vercel,Import 你刚传上去的仓库。
- Framework Preset 选 Hexo。
- 关键点:在 Settings -> General 里的 Install Command,一定要手动开启并填入
yarn install或npm install。 - 点击 Deploy。看到漫天烟花就代表成了。
七、 日常怎么玩?
- 写新文章:
hexo new "我的第一篇博客",然后去source/_posts找 md 文件改就行。 - 本地看效果:
hexo clean && hexo s,浏览器看localhost:4000。 - 云端同步:本地改爽了直接
git push,Vercel 会自动帮你重新编译上线,完全不用手动传文件。
最后多说一句:
改配置的时候,_config.yml 里的冒号后面必须有空格,这种低级错误能让你白忙活半天。祝大家都能顺利跑起来!
补充建议:
- 关于 Git Clone:你在正文里提到了
git clone主题,但我建议你在教程中统一推荐 npm/yarn 安装模式。因为克隆模式如果不删子仓库的.git,新手大概率会遇到 Vercel 部署出来是白屏的问题。 - 代码块格式:确保你在博客发布时,Markdown 的代码块语法正确(比如用
json或bash指明语言),这样高亮才好看。 - 图片干货:如果可以,顺手截一张 Vercel 的配置图贴上去,效果更直观。
支持与分享
如果这篇文章对你有帮助,欢迎分享给更多人或赞助支持!
安知鱼主题 Hexo 博客搭建与 Vercel 部署全攻略
https://firefly.cuteleaf.cn/posts/安知鱼主题-hexo-博客搭建与-vercel-部署全攻略/ 最后更新于 2024-12-30,距今已过 367 天
部分内容可能已过时