hexo之环境搭建篇

经过几天的时间，终于搭建好了个人博客，是的，就是你现在看到的这个样子，‘hexo + github page’ ，真的香，我所使用的主题为目前最流行的 ‘next’ 主题。没有什么花哨的地方，追求简约就是美的理念，对自己的实践，以及在搭建、优化过程的踩过的一些坑，我觉得有必要记录下来，供自己后面学习的同时便利他人。

我主要是在windows上操作，其实在Mac上操作大致相同，我在文章中两种系统下的方法都会详细介绍；
基于Hexo的最新版本 ‘4.1.1’，截止到现在 (这篇博客的发布时间) 最新版本是’4.2.0’；
因为我在搭建的时候也看过不少的教程，但是基于的版本都比较老，难免就踩了一些坑，所以此博客保证 ‘4.1.1’ 版本完全可复现，对其他版本仅供参考，特此说明！

安装 Git

首先我们需要下载两个工具 Git 和 Node :

windows下安装

window的安装可以直接在官网上下载安装包：Git官网：https://git-scm.com/

直接点击箭头指向的地方就可下载适合你电脑的最新版本Git，如下所示：

然后在电脑上看到下面的Git组件就说明安装成功了，包括Git bash 和 Git GUI 等 (注：图片来自自己的 CSDN 账户，非盗取)：

然后打开Git bash，输入 git --version (类似于linux下的bash)查看 Git 版本号：

$ git --version
git version 2.24.0 windows.1

可以看到你下载的版本是适合windows下的 2.30.0。

至此windows下安装结束！

Mac上安装

MacOS 上的安装直接进入官网选择 Mac 版本下载安装就好:

全局配置（必须项）

安装完 Git 后还需要进行全局配置（相当于注册QQ号、微信号的操作）：

$ git config --global user.name "name"
$ git config --global user.email "email@example.com"

注意：name 是你自己取的 github 名字(相当于昵称)，email 是你自己的邮箱。至此整个配置就完成了。

安装 node.js

进入nodejs官网进行安装，官网地址： https://nodejs.org/en/

进去点击下载箭头所指的即可 (长期支持版)

安装的过程傻瓜式操作，一路 next 就好。

然后我们可以使用 Git bash 查看安装好的 nodejs 的版本：

$ node --version
v12.14.1      //这是我自己安装的版本，主要是为了验证安装成功

然后查看一下 npm 包管理器的版本(npm是随NodeJS一起安装的包管理器)

$ npm --version
6.12.1

可以看到我们需要的工具都已经安装完成。

但是由于 npm 速度比较慢，所以我们使用的是淘宝镜像源 cnpm 下载 hexo 框架,所以首先利用 npm 安装 cnpm:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

//说明:这个下载过程可能需要等待一会，而且可能会失败，一定多尝试几次，不要放弃，否则直接使用 `npm` 很难下载 `hexo`

下载完成后来验证一下 cnpm 是否安装成功，即查看一下版本：

$ cnpm --version
cnpm@6.1.0 (C:\Users\CXF\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js)
npm@6.11.3 (C:\Users\CXF\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib\npm.js)
node@12.13.1 (D:\nodeJs\node.exe)
npminstall@3.23.0 (C:\Users\CXF\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=C:\Users\CXF\AppData\Roaming\npm
win32 x64 10.0.18362
registry=https://r.npm.taobao.org

如果出现类似说明的就是安装成功了。以后就可以使用 cnpm 代替 npm。

说明: MacOS 上的操作和 windows 下操作完全就一样，命令也一样，只不过 windows 是在 Git bash 上操作，而 Mac 是直接在终端进行。

下载 hexo

利用刚才下载好的 cnpm 来正式下载 Hexo 这个框架 (这个时候下载速度就很快了)：

$ cnpm install -g hexo-cli

这个时候就会自动下载 hexo 框架，

视自己的电脑和当时网速情况而定，下载需要的时间可能会不一样

等安装结束之后再来查看一下版本，确保安装成功：

$ hexo --version
hexo-cli: 3.1.0
os: Windows_NT 10.0.18362 win32 x64
node: 12.13.1
v8: 7.7.299.13-node.16
uv: 1.33.1
zlib: 1.2.11
brotli: 1.0.7
ares: 1.15.0
modules: 72
nghttp2: 1.39.2
napi: 5
llhttp: 1.1.4
http_parser: 2.8.0
openssl: 1.1.1d
cldr: 35.1
icu: 64.2
tz: 2019c
unicode: 12.1

如果出现类似上述的说明就是安装成功了。

并不需要和我上面贴出的完全一样，可能我安装的版本不是最新版了。
只要是有就是成功了

初始化目录为Hexo博客框架:
首先新建一个目录 (在windows下就是文件夹) blog，然后进入到该目录(以后的所有操作都是在该目录下进行)：

$ mkdir blog
$ cd blog

然后使用命令 hexo init 初始化：

$ hexo init 
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
Cloning into 'D:\blog'...
remote: Enumerating objects: 30, done.
remote: Counting objects: 100% (30/30), done.
remote: Compressing objects: 100% (24/24), done.
remote: Total 161 (delta 12), reused 12 (delta 4), pack-reused 131
Receiving objects: 100% (161/161), 31.79 KiB | 191.00 KiB/s, done.
Resolving deltas: 100% (74/74), done.
Submodule 'themes/landscape' (https://github.com/hexojs/hexo-theme-landscape.git) registered for path 'themes/landscape'
Cloning into 'D:/blog/themes/landscape'...
......
......
.....
INFO  Start blogging with Hexo!

可以看到使用这条命令，会自动的完成一些初始化的操作，下载默认主题等等。

最后提示我们可以启动博客了，我们使用命令 hexo server 或者简写为 hexo s：

$ hexo server
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

看到提示信息说我们已经启动，在本地机的 4000 端口，这个时候我们就访问一下我们的 4000 端口：

然后我们就可以看到如下内容：

这就是我们的博客了，如果能够看到这个界面，恭喜你，已经成功了90%。

但是还有问题就是我们只能在本地的 localhost:4000 访问，而且你可能觉得这个界面有点不太好看，想更换一个主题，这些都是可以操作的。

首先要解决的问题就是如何将博客部署到远端，我们不可能只在本地 4000 端口访问；

下面我们开始将 hexo 部署到 github 这个网站上。

部署至 github page

创建 github 仓库

首先打开 github，新建一个仓库，仓库名为：yourname.github.io，其中 yourname 就是你的 github 的用户名(昵称)。

tips: 仓库名必须是这个格式

如下所示：

先把这个仓库放这，一会有用。

安装部署插件

然后我们还需要安装部署 hexo 的插件：

$ cnpm install --save hexo-deployer-git

安装完成后，还记得blog这个文件夹里都有哪些文件嘛，我们再来看一下文件夹里的所有文件，因为后面都是基于这个文件夹里面的文件进行操作的，包括更改主题、优化主题等等：

$ ll
-rw-r--r-- 1 CXF 197121   3005 12月 31 20:48 _config.yml
-rw-r--r-- 1 CXF 197121 457339  1月  8 20:50 db.json
drwxr-xr-x 1 CXF 197121      0  1月  3 21:54 node_modules/
-rw-r--r-- 1 CXF 197121    799  1月  3 21:54 package.json
-rw-r--r-- 1 CXF 197121 187155  1月  3 21:54 package-lock.json
drwxr-xr-x 1 CXF 197121      0  1月  7 17:18 public/
drwxr-xr-x 1 CXF 197121      0 12月 14 09:11 scaffolds/
drwxr-xr-x 1 CXF 197121      0 12月 28 17:56 source/
drwxr-xr-x 1 CXF 197121      0 12月 24 15:17 themes/

修改站点配置文件

然后我们打开第一个文件 _config.yml,这个文件是整个 hexo 博客的站点配置文件，想要部署到远端，我们需要对这个文件进行修改：

(这里跟着操作就行，暂时不用管这些文件都是干嘛的，下一篇主题优化的时候会详细介绍每一个文件以及这里打开的_config.yml 内容的具体含义)

$ vim _config.yml  //我是使用的vim编辑器打开,你也可以使用记事本

//定位到文件末尾找到下面这个地方：deploy，
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: 
  repo: 

然后我们修改为以下所示：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/ yourname/yourname.github.io.git
  branch: master

tips: 所有的冒号后面都要空一格

repo: 是我们之前创建的 yourname.github.io 仓库的地址，还是要注意 yourname 是你自己的用户名。
然后进行部署，一条命令就可 hexo -d：

$ hexo d

然后这个时候我们就可以使用 yourname.github.io 进行访问了(相当于域名，后面也可以自己买域名绑定，具体方法见后面，还是那句话，先搞起来再说其他的)。
我们现在来试一下用仓库名访问，和使用 localhost 进行访问的结果应该是一样的。

到现在我们就完成了我们的目标，搭建 hexo 框架以及部署到至 github上。

---

小结

为了搭建 hexo, 我们总共做了以下几件事：

1、下载 Git 和 node两个依赖工具，这两个直接在官网上下载；

2、下载 hexo 框架，使用的命令是 cnpm install hexo-cli，特别需要注意的地方是下载 cnpm 很重要，我尝试过直接使用 npm 下载，速度很慢，或者直接就是下载失败；

3、部署 hexo 至 github，这一步又总共做了三件事：

1）在 github 上新建一个名为 yourname.github.io 的仓库；
2）下载 hexo 的部署插件 cnpm install --save hexo-deploy-git；
3）修改站点配置文件：_config.yml。

到此整个搭建过程就结束了，如有不当或有问题，还请指正。
更换主题以及主题优化见下一篇博客: hexo之主题优化篇