封面来源：碧蓝航线 北境序曲 活动CG

0. 前言

静态博客框架 Hexo 的 Butterfly 主题在 3.3.0 版本之后只支持 Hexo 5.0.0 及其以上版本，在此记录下 Node.js、Hexo 的安装、配置与升级，方便后续学习与交流。

本文不包括搭建 Hexo 博客的内容，只在原基础上对 Hexo 框架进行升级，要想知道如何搭建基于 Hexo 的静态博客，可以查看 博客的搭建与维护 一文，或直接查看本站顶置文章！

1. Node.js 的安装

参考链接：npm和cnpm（windows）安装步骤

1.1 安装 Node.js

Node.js 依赖 Python，因此在安装 Node.js 前需要先安装好 Python 环境。

首先前往 Node.js 的官网下载 Node.js 的安装包，不建议下载版本等级过高的 Node.js，指不定会出什么问题。但是官网首页的推荐的长期支持版本等级也过高，那该怎么办？

首次进入官网时，可将网站语言切换至简体中文：

Node.js官网

点击 本链接 直接进入简体中文的 Node.js 官网。

此时长期支持的版本是 14.15.0，如果不需要这么高的版本，可以点击上方的“下载”或“DOWNLOAD”：

进入Node.js下载页

进入下载页后，页面向下拉，点击“以往的版本”，即可进入对应页面下载以往的版本：

进入Node.js以往的版本下载页面

进入页面后，选择需要下载的版本，并点击下载：

进入Node.js12.18.2下载页面

选择与自己电脑系统相符的版本进行下载：

下载64位Node.js安装包

比如 64 位 Windows 系统选择如图所示的安装包进行下载。

下载完安装包后，双击安装包，等待安装包的准备，然后同意协议，设置安装目录：

设置Node.js安装目录

设置好安装目录后，无脑下一步即可，安装完毕后点击 Finish 即可完成安装。

安装完毕后，需要对 Node.js 做一些配置。

使用快捷键 Win + r 打开 CMD，输入 node -v 查看 Node.js 的版本，输入 npm -v 查看 npm 的版本：

查看Node.js与npm的版本

如果可以成功显示，证明安装完成。

PS：安装好 Node.js 后，会在环境变量 PATH 下自动增加一个值，其值为 Node.js 的安装目录。

在 CMD 中输入命令，查看 npm 的设置，共有以下三种命令可选：

1
2
3
npm ls –g # 查看所有全局安装的模块
npm config ls # 查看部分npm默认设置
npm config ls –l # 查看全部npm默认设置

其实使用第二条命令即可，查看部分 npm 的默认配置。一般来说，此时 npm 的全局模块的存放路径、cache 的路径都在 C 盘，C 盘寸土寸金，拿来放这些有些阔绰，可以尝试修改。

依次输入以下命令修改全局模块、cache 的存放路径：

1
2
3
# 将全局模块的存放路径和 cache 的存放路径与 Node.js 放在一起
npm config set prefix "D:\environment\Nodejs\node_global"
npm config set cache "D:\environment\Nodejs\node_cache"

第一条命令用于设置全局模块的存放路径，以后下载的全局模块都会放在这个路径下，第二条命令用于设置 cache 的存放路径。

执行完这两条命令后，可以前往对应的文件夹下查看：

全局模块与cache存放路径

可以发现多出了一个名为 node_global 的文件夹，以后的全局模块都会放到这个文件夹下，节约 C 盘空间。

也可能不会像上述的图示一样出现名为 node_cache 的文件夹，不要慌，这是因为没有缓存，因此没有创建这个文件夹。

再次执行 npm config ls 命令，查看 npm 的设置：

查看npm的设置

由于修改了全局模块的存放路径，因此需要添加一个环境变量。

使用快捷键 Win + r，输入 sysdm.cpl 进入系统属性页面：

系统属性页面

点击高级，点击环境变量进入环境变量页面。新增一个名为 NODE_PATH 的环境变量，其值为：

1
D:\environment\Nodejs\node_global\node_modules

新增NODE_PATH环境变量

注意： 值是全局模块存放路径 node_global 下的 node_modules，不要设置错了！

最好将该路径信息也添加到环境变量 Path 中。

设置好环境变量后，在 CMD 中输入以下命令：

1
npm install express -g

如果命令执行失败，提示没有权限创建某些文件夹，尝试以管理员身份运行 CMD 后再执行上述命令。

-g 选项表示将 express 安装在全局模块目录下。安装之后，进入目录查看一下：

进入目录查看express

在 CMD 中输入 node 进入编辑模式，输入以下命令检测是否能正常加载模块：

1
require('express')
检测是否正常加载模块

如果出现上图所示的信息，且没有出现异常信息，则证明配置正确。如果出现错误，检查环境变量等配置是否存在错误。

1.2 安装 cnpm

配置 npm 镜像源即可，不要使用 cnpm，这玩意有 BUG。

npm 的全称是 node package manager，字面意思就是 Nodejs 的包管理器，用于管理 Node 插件（进行下载，卸载等操作）。

但是 npm 是从国外服务器下载的，下载速度令人着急，还可能会出现各种异常。要想解决这个问题可以尝试配置一个镜像，即：安装 cnpm，使用淘宝镜像代替 npm。

在 CMD 中输入以下命令安装 cnpm：

1
npm install -g cnpm --registry=https://registry.npmmirror.com/

安装完毕后，在 CMD 中执行 cnpm -v 命令检查是否安装成功。

一般来说，都会出问题，因为还需要配置一个环境变量。

按照前面说的方法进行环境变量配置界面，选择系统变量 PATH，再点击编辑，增加如下的值：

1
D:\environment\Nodejs\node_global
修改系统变量PATH值

配置好环境变量后，再在 CMD 中输入 cnpm -v：

检查cnpm是否安装成功

如果出现上图所示的信息，证明 cnpm 安装成功。

1.3 配置 npm 镜像源

查看当前 NPM 源：

1
npm config get registry

使用淘宝源：

1
npm config set registry https://registry.npmmirror.com/

也可以前往 C 盘的用户目录中直接修改 .npmrc 文件完成设置，添加以下内容：

1
registry = https://registry.npmmirror.com/

还原 NPM 源：

1
npm config set registry https://registry.npmjs.org

1.4 配置多个镜像源

在公司时，可能会需要使用公司自己的镜像源，但是公司的镜像源的使用需要在公司内网的环境下，在非内网环境下需要使用公司提供的 VPN，十分不方便，如果可以配置多个镜像源然后进行切换不爽歪歪了？ 😂

下载 nrm 进行管理：

1
npm install -g nrm

添加多个镜像源，比如添加原镜像源和淘宝镜像源：

1
2
nrm add npm http://registry.npmjs.org
nrm add taobao https://registry.npmmirror.com/

查看可选的源：

1
nrm ls

当需要切换镜像源时，可以使用以下命令：

1
2
nrm use taobao
nrm use npm

切换后可以使用以下命令看看是否切换成功：

1
npm config get registry

其他操作：

1
2
3
4
5
6
# 测试镜像源的速度
nrm test 镜像源名称
# 查看当前源
nrm current
# 删除源
nrm del 镜像源名称

2. Node.js 的卸载

会安装也要会卸载，简单介绍一下 Node.js 的卸载。

首先，使用某某软件管家或者使用 Windows 自带的控制面板进行卸载。

然后重启电脑。

接着寻找这些文件，并删除它们（当然也有可能不存在，都是正常现象）：

1
2
3
4
C:\Program Files (x86)\Nodejs
C:\Program Files\Nodejs
C:\Users\{User}\AppData\Roaming\npm (或%appdata%\npm)
C:\Users\{User}\AppData\Roaming\npm-cache (或%appdata%\npm-cache)

最后两个路径表示全局模块的存放路径和 cache 的默认存放路径，如果更改了默认存放路径，前往对应的路径进行删除。

检查环境变量中是否有与 Node.js 相关的环境变量，如果存在，一并删除。

如果还没有完全卸载，在 CMD 中输入 where node 指令，找到所在位置删除目录。

最后，重启一手！卸载完事！ 🎉

在此推荐一个软件 —— Uninstalr，号称 Windows 下最好的卸载器，可以试试。

3. Node.js 的升级

【无脑升级法】使用国内各大厂商的 xxx 软件管家对 Node.js 进行升级。

【普通升级法】前往 Node.js 官网，下载最新的长期支持版本安装包，然后双击安装包覆盖安装即可对当前的 Node.js 版本进行升级。

4. 安装 Yarn

Yarn 是 Facebook 贡献的 Javascript 包管理器，其作用和 NPM 类似，NPM 是随同 Node.js 一起安装的包管理工具。在某些情况下，可能会使用到 Yarn，在此介绍一下 Yarn 的安装。

Yarn 官网：Yarn

Yarn 中文网：Yarn zh

Yarn 安装介绍：Getting Start

4.1 基本安装

本文介绍安装 Yarn 时，建立在本机存在 Node.js 的环境下。执行以下命令完成安装：

1
npm install -g yarn

安装完成后，执行以下命令检查是否安装成功：

1
yarn --version

到此基本安装就完成了，但还需要完成一些配置以便能够更好地使用它。

4.2 路径设置

参考链接：Vue开发环境npm和Yarn的环境变量配置（Windows 10 版）

设置 Yarn 的全局安装路径

1
yarn config set global-folder "你的磁盘路径"

比如：

1
yarn config set global-folder "D:\environment\Yarn\yarn_global"

设置完成后，可以使用以下命令查看 Yarn 的全局安装目录：

1
yarn global dir

设置 Yarn 缓存位置

1
yarn config set cache-folder "你的磁盘路径"

比如：

1
yarn config set cache-folder "D:\environment\Yarn\yarn_cache"

也可以前往 C 盘的用户目录中直接修改 .yarnrc 文件完成设置。

4.3 配置环境变量

为了在 Windows 上更好地使用，需要配置一下 Yarn 的环境变量。

给系统环境变量 Path 添加以下值：

1
%NODE_PATH%\yarn\bin

%NODE_PATH% 在前文中已经配置过了，是 Node.js 的全局安装目录，这里指向 Node.js 全局安装目录下 Yarn 的 bin 目录。

由于 Java 中也有 Yarn，因此尽量将这个值放在 Java 的环境变量之前，或者粗暴点，直接把这个值放在第一个。

配置完成后，执行下述命令检查下：

1
yarn global bin

4.4 配置镜像源

查看当前源：

1
yarn config get registry

切换为淘宝源：

1
yarn config set registry https://registry.npmmirror.com/

还原 Yarn 源：

1
yarn config set registry https://registry.yarnpkg.com

完成上述配置后，可以执行以下命令查看所有配置：

1
yarn config list

NPM 与 Yarn 配置镜像源可参考链接

npm/yarn查看当前使用源与设置其它源

5. Hexo 版本升级

本节内容将介绍如何将 Hexo 升级至 5.x 版本（也适用于其他 Hexo 版本的升级）。

既然是升级，那么肯定安装了 Hexo，进入 CMD，执行 hexo v 命令：

查看hexo信息

如果出现上图所示的信息，证明当前 Hexo 的安装无误。

需要注意，hexo-cli 并不表示 Hexo 的版本。

如果想要知道 Hexo 的版本，需要前往博客对应的文件夹，在博客文件夹使用 Git 的命令行（git bash），然后输入 hexo v 查看 Hexo 的版本。

将 Hexo 升级至 5.x 也很简单，可以根据官网的操作来：Hexo 5.0.0 Released

首先前往博客文件夹，找到名为 package.json 的文件，使用记事本打开：

修改package.json文件

将 dependencies 项中的 hexo 项的值修改为 5.2.0 后保存并退出。

接着在博客文件夹下使用 git bash 执行 npm update 命令，等待更新完成。

更新完成后，在 git bash 下执行 hexo -v：

检查hexo是否更新成功

可以看到，hexo 版本已经更新至 5.2.0 了。