Hexo-Butterfly环境搭建

前言

本教程只是环境搭建，并不涉及网站部署等，只涉及到电脑本地环境的创建。因为博主此前已经构建过一个基于Hexo-Butterfly主题的博客了，现在需求为在不同电脑搭建出网站部署环境，将网站源码上传到git上，实现在不同电脑上都可以更新网站的需求。
本教程基于Windows操作系统，macOS、Linux系统操作上都是大同小异，搭建方式基本都是从官网或终端进行软件的下载和安装。与Windows不同的是，macOS和Linux对于环境变量等的管理比较简单，所以比Windows操作系统下搭建环境更加简单一些。

终端工具的选择

Windows：有两个终端工具

Windows Terminal。微软在win10后期新推出的终端工具。支持Windows命令，部分.ned和Linux shell命令。
”命令行提示符“cmd。比较古早的终端，只支持Windows命令。

建议选择Windows powershell。因为后期可能会涉及到需要管理员权限的操作，届时直接使用管理员模式打开powershell即可。

这里其实也可以使用cmd，快捷打开管理员模式的方法：
win+r打开“运行”
输入cmd，不要点击回车
Ctrl+Shift+Enter打开cmd
Windows

macOS、Linux：直接使用自带终端。可以随时进入root模式，很方便。

后期安装好之后，都会改为使用vscode中的终端。

前期Windows下不使用vscode的原因：软件安装时涉及到下载目录、管理员模式运行终端或者涉及到环境变量的配置等，需要一个灵活的终端窗口，且Windows终端的很多操作都是与当前工作目录强相关的，vscode就没那么灵活了，毕竟Windows的终端并不像mac和Linux一样那么全能。

环境准备

Node。Node.js 是一个开源的、跨平台的 JavaScript 运行时环境。Node.js 中文网 (nodejs.cn)
nvm。(Node Version Manager)是 Nodejs 版本管理器，它能让我们方便的对 Node.js 的版本进行切换。
npm。(Node Package Manager)，Node.js 的包管理器，安装 Node.js 之后自带 npm，无需单独安装
Hexo。一个由Node.js驱动的博客简单强大的博客框架。Hexo
vscode。

教程推荐：

nvm安装

Windows版安装地址 · Releases · coreybutler/nvm-windows (github.com))

下载之后解压到本地软件安装目录中

双击运行，开始安装

安装之后，会被自动添加到环境变量中。

在终端中测试安装是否成功：

配置环境变量：

正常来说，nvm安装之后会自动配置好环境变量：

Node、npm安装

Node.js 中文网 (nodejs.com.cn)

下载.msi安装包，然后进行安装，设置安装目录，在安装中，会自动将node添加到环境变量，node安装完成，npm也安装完成了。

需要注意的是，如果想使用node或者npm，需要在管理员模式下启用终端，否则会error

测试node和npm安装成功：

Hexo安装

需要将hexo使用npm安装到指定目录，因此先进入指定路径

通过管理员模式进入指定目录的方法

方法有很多，无非就是先用管理员模式打开终端，然后cd进入要安装的目录
注意如果路径有空格，需要用""将路径包裹起来

安装Hexo环境：

1	npm install -g hexo-cli

更换npm源或安装cnpm

如果下载时卡住：

原因：npm源在国外
解决方案一：可以换为国内淘宝镜像源：
npm 使用淘宝镜像及切换回官方源_npm 淘宝源-CSDN博客
注意淘宝镜像源可能会有更新，网址会发生改变，请自己百度最新的镜像源
1
npm config set registry https://registry.npmmirror.com/
更换之后进行测试：
1
npm config get registry
返回结果为https://registry.npm.taobao.org则说明配置成功：
1
2
3
PS D:\software\Hexo> npm config set registry https://registry.npmmirror.com/
PS D:\software\Hexo> npm config get registry
https://registry.npmmirror.com/
解决方案二：安装 cnpm 来替代 npm，cnpm是淘宝团队创建的为国内用户使用的npm替代品：
1
2
3
4
5
6
7
8
9
10
11
12
13
npm install -g cnpm --registry=https://registry.npmmirror.com
 
 # 注册模块镜像
 npm set registry https://registry.npmmirror.com  
 
 // node-gyp 编译依赖的 node 源码镜像  
 npm set disturl https://npmmirror.com/dist 
 
 // 清空缓存  
 npm cache clean --force  
 
 // 安装cnpm  
 npm install -g cnpm --registry=https://registry.npmmirror.com 
安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开，安装完直接使用可能会出现错误
cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm
npm 切换回官方源：
1
npm config delete registry
或者直接修改为原本的源
1
npm config set registry https://registry.npmjs.org/

书接上回，安装Hexo：

安装之后可能又会发现新的问题：vscode或者Windows terminal的poweshell下使用hexo -v检查hexo安装，发现无法识别命令。而cmd执行则可以：

powershell不行
cmd可以

这个问题也可以描述为：powershell中无法执行命令/脚本：命令行在cmd中能执行但是在PowerShell中报错 - 知乎 (zhihu.com)

在powershell中运行命令行查看系统权限：Get-ExecutionPolicy -List

通过这个命令发现CurrentUser的权限是Undefined，那么就是权限的问题，就可以通过增加权限解决了

增加Windows terminal powershell中CurrentUser权限以解决无法执行命令/脚本的问题：

1	Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

之后执行Get-ExecutionPolicy -List再次查看权限：

之后使用hexo -v检查一下安装：

安装完成

拉取仓库-最后配置

创建一个新的空文件夹用来存放博客项目，git init一下，将网站工程从git远端仓库上下拉回来

因为博客是使用的GitHub运行的，因此还需要执行最后一步：

将本地ssh公钥添加到GitHub中

获取公钥：Git！从零开始连接远程仓库 | 浴巾的贼船 (chunyujin.top)

如果本地没有产生过公钥，执行，下面命令，以前生成过，直接跳过这一步即可：
1
ssh-keygen -t rsa
然后一路回车。
获取本地公钥：
1
cat ~/.ssh/id_rsa.pub

打开GitHub，登录进去，点击右上角头像，进入设置：

点击右上角New SSH Key

创建一个标题，并将ssh key复制进下面：

点击Add SSH key，然后输入GitHub密码进行确定

然后可以看到新添加上的了：

如果绑定邮箱了，还会收到邮箱提示。

测试一下是否成功：

1	ssh -T git@github.com

现在就可以在vscode中打开项目根目录了

关于初始化

博客项目只有在创建的时候进行一下初始化就可以，因为我这个博客很久之前就创建好了，并且初始化文件都会保存在一起放入了根目录，所以不需要再初始化，直接就可以使用了

【node_modules】：依赖包
【scaffolds】：生成文章的一些模板
【source】：用来存放你的文章
【themes】：主题
【.npmignore】：发布时忽略的文件（可忽略）
【_config.landscape.yml】：主题的配置文件
【_config.yml】：博客的配置文件
【package.json】：项目名称、描述、版本、运行和开发等信息