前阵子发现,本网站的主题 oranges 有一系列历史遗留问题一直没解决,包括:

  • 代码块样式失效
  • 控制台有很多莫名其妙的报错
  • 更新时间显示错误

由于这些问题不好解决,我甚至想过迁移到 hugo。但是由于迁移时间成本过大作罢。今天趁着周末,集中解决上述问题。

首先我看了作者主题放出的示例网站,发现他就没有这些莫名奇妙的错误。我推测可能是我的 node 版本和作者不一致,导致一些包安装不上,进而渲染失败。最佳的验证方法是把作者网站的源码(托管在 github 上)下载下来,并安装依赖,看看有没有报错。果然出现了熟悉的错误,是关于 npm-gyp 和 node-sass 的。前者大概是编译 C++代码,后者是借助中间 C 编译器将 sass 转化为 css 的。

首先,用 nvm 降低 nodejs 的安装版本,一般降到 v12.5.0 能解决很多问题。

安装 nvm 要去github releases

nvm install 12.5.0
nvm use 12.5.0
nvm list

然后,安装 npm-gyp:npm i -g node-gyp。npm-gyp 还需要 python 和 c++安装在电脑上。python 要用 2.7 版本的,并添加到系统环境变量 path。而 c++的安装命令为:npm install --global --production windows-build-tools(以管理员身份运行)。一般来说,经过降 node 版本和 npm-gyp 安装后,node-sass 问题也能解决。

将环境配置好后,我在示例网站项目中执行一下npm i,发现能正常启动,而且浏览器内样式都显示正常了,说明我的猜想是对的。接下来就是把文章迁移进 source 目录,然后把之前在.ejs 文件中的改动同步到新项目中,执行预览hexo s,本地就显示正常了。

第二阶段是部署。当我像以前一样通过 vercel 来托管时,发现 vercel 不支持 node16 以下的版本,这说明项目不能直接放在 github 仓库,让 vercel 执行生成静态页面,而是应该本地生成好,再传到仓库。这样,就回到了最初建站时 github page 那种模式,也是无奈之举了。我建了两个仓库,一个存放生成的静态文件,通过hexo g -d部署;另一个是源文件仓库,方便不同主机同步。最后,设置好 dns,网站的修复就告一段落了。

放一张清爽的控制台截图作为结束:

16997975045531699797504144.png

参考:https://github.com/nodejs/node-gyp/#installation