前言#
- 博客基于 MIT License 开源于 GitHub, 感谢
- 博客引擎来自于hexo, 感谢
- 博客模版来自于Siricee 的 Chic, 感谢
- 动态背景来自于canvas-colorful-nest.js, 感谢
- 书单页面来自于插件hexo-douban, 感谢
- CDN 加速服务来自于Cloudflare, 感谢
- 部署服务使用 vercel, 感谢
- 本地环境基于 MacOS
Node 环境准备#
推荐使用 NVM 管理 node 版本，仓库地址:nvm
在安装后，打开终端执行 node -v 与 npm -v，没有报错即为安装成功
hexo 本地环境初始化#
首先安装 hexo-cli npm install -g hexo-cli
上面的代码为全局安装，如果对 npm 比较熟悉，可以把 - g 删掉，使用局部安装
安装以后，可以使用以下两种方式执行 hexo：npm hexo <command>
或者将 Hexo 添加到环境变量之中即可直接使用 hexo <command>
首先在命令行中输入 npm root -g 查看全局安装的目录
然后将该目录下的 node_modules\hexo-cli\bin 目录添加到环境变量 PATH 中
之后使用 hexo version 检查是否成功
本地建站#
执行下面的命令，会自动创建 <folder>目录并下载代码，我们假定目录为 blog
hexo init <folder>
cd <folder>
npm i
执行后的指定文件夹目录结构：
blog
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
-
config.yml：网站的配置信息，可以在这里配置大部分的参数，如果使用主题，根据主题去修改 -
package.json：应用程序的信息，hexo及其一些插件的安装版本信息都在这里 -
scaffolds：模板文件夹，当您新建文章时，Hexo会根据scaffold来建立文件，填充一些模板内容 -
source：资源文件夹是存放用户资源的地方。除_posts文件夹之外，开头命名为 _ (下划线) 的文件 / 文件夹和隐藏的文件将会被忽略 -
themes：主题文件夹。Hexo 会根据主题来生成静态页面
最后执行
hexo clean # 清除缓存文件 (db.json) 和已生成的静态文件 (public)。第一次建站可以不执行
hexo generate # 生成静态文件。
hexo server # 启动本地服务器。默认情况下，访问网址为： http://localhost:4000/。
vercel 部署#
- 去
GitHub上新建一个仓库，然后将本地博客目录文件同步至仓库
git init
git add .
git commit -m "init commit"
git remote add origin [email protected]:xxx/blog.git
git push -u origin main
- 注册
vercel账号 https://vercel.com/ vercel中导入自己的仓库，然后一步步跟随指示depoly部署即可
问题#
node 版本问题#
部署的时候报错:
TypeError [ERR_INVALID_ARG_TYPE]: The "mode" argument must be of type number. Received an instance of Object
.....
因为 vercel 中默认 node 版本会比较高，需要注意是否和当前 hexo 环境兼容 Node.js 版本限制
Node 升级#
因为之前用的nvm，就比较简单，
nvm ls-remote
nvm install --lts #安装最新的lts版本吧，比较推荐
nvm ls #查看现在安装的哪些版本
nvm uninstall v8.12.0 #找到旧的版本删除掉吧
Hexo 的升级#
- 全局升级
hexo-cli - 使用
npm-check，检查系统中的插件是否有升级的。 - 使用
npm-upgrade，升级系统中的相关插件。 npm update -g，检查升级 npm 本身。
npm install -g hexo-cli
hexo version
npm install -g npm-check
npm-check
npm install -g npm-upgrade
npm-upgrade
npm update -g
npm install -g npm
hexo clean #清理hexo数据并重新生成页面并部署
hexo g -s
hexo d
vercel 版本部署成功后，访问页面空白#
- 检查所配置的主题是否有效
- 主题文件，也就是 theme 目录下的主题配置文件夹，是否上传至 github 仓库
- 如果需要删除主题重新拉取，记得保留配置文件