Hexo从入门到放弃

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

一、Hexo搭建流程（Windows篇）

1、安装Git

Windows：下载并安装Git，安装成功之后，打开 Git Bash 或 cmd 命令行工具，使用 git --version 命令来查看版本，从而检测是否安装成功。

2、安装Node.js

  • 下载安装Node.js

    Windows：下载并安装Node.js，安装成功之后，打开 Git Bash 或 cmd 命令行工具，输入以下命令：

    1
    2
    $ node -v
    v14.16.1 // 显示版本就说明安装成功
    1
    2
    $ npm -v
    6.14.12 // 显示版本就说明安装成功

    Tip：新版Node.js已自带npm，安装Node.js时npm会一起安装，npm的作用就是对Node.js依赖的包进行管理，也可以理解为用来安装、卸载Node.js需要或不需要的东西。

  • 环境配置

    环境配置主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，之所以要配置，是因为以后在执行类似：npm install express [-g] （后面的可选参数-g，g代表global全局安装的意思）的安装语句时，不会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中，则不会占用C盘空间。

    因此我们希望将全局模块所在路径和缓存路径，放在之前Node.js安装的文件夹中，则需要在该文件夹【D:\Development_Tools\nodejs】下创建两个文件夹【node_global】及【node_cache】，如图所示：

    image-20210417085751925

    创建完两个空文件夹之后，打开 Git Bash 或 cmd 命令行工具，输入以下命令：

    1
    2
    $ npm config set prefix "D:\Development_Tools\nodejs\node_global" // 替换成读者自己的路径
    $ npm config set cache "D:\Development_Tools\nodejs\node_cache" // 替换成读者自己的路径

    接下来，设置系统环境变量，依次打开 ”我的电脑” - 右键 - “属性” - “高级系统设置” - “高级” - “环境变量”。

    进入环境变量对话框，在【系统变量】下新建【NODE_PATH】，输入【D:\Develop\nodejs\node_global\node_modules】，点击确定，如图所示：

    image-20210417091008495

    然后将【用户变量】下的【Path】修改为【D:\Development_Tools\nodejs\node_global】，如图所示：

    image-20210417091859176

    image-20210417092030924

  • 测试

    配置完成之后，安装一个最常用的express模块，打开 Git Bash 或 cmd 命令行工具，输入以下命令：

    1
    $ npm install express -g // -g表示全局安装模块的意思

    Tip：如果安装时不加 -g 参数，则安装的模块将会安装在当前命令行的路径【C:\Users\Administrator】下的【node_modules】文件夹中，如果【node_modules】文件夹不存在，则会自动生成，如图所示：

    image-20210417093339070

3、安装Hexo

Git 和 Nodejs 安装好之后，就可以安装Hexo了，先创建一个文件夹【blog】，文件夹名称随意，然后在该文件夹下直接右键打开 Git Bash 命令行工具，输入以下命令：

1
$ npm install -g hexo-cli

安装成功之后，使用 hexo -v 命令查看一下版本：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$ hexo -v
    
// 有以下信息，说明Hexo安装成功
hexo-cli: 4.2.0
os: Windows_NT 10.0.17134 win32 x64
node: 14.16.1
v8: 8.4.371.19-node.18
uv: 1.40.0
zlib: 1.2.11
brotli: 1.0.9
ares: 1.16.1
modules: 83
nghttp2: 1.41.0
napi: 7
llhttp: 2.1.3
openssl: 1.1.1k
cldr: 37.0
icu: 67.1
tz: 2020a
unicode: 13.0

4、初始化Hexo

接下来，初始化Hexo，输入以下命令：

1
2
3
4
5
6
7
8
9
10
11
12
13
$ hexo init myblog // myblog文件夹名称随意

// 有以下信息，说明初始化Hexo成功
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO  Install dependencies
added 190 packages from 160 contributors and audited 196 packages in 22.185s

15 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

INFO  Start blogging with Hexo!

然后进入这个【myblog】文件夹，输入以下命令：

1
2
3
4
5
6
7
8
9
10
11
12
13
$ cd myblog
$ npm install

// 有以下信息， 说明npm安装成功
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 5 packages from 1 contributor and audited 196 packages in 2.355s

15 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

至此初始化Hexo以及安装npm皆已完成，在【myblog】文件夹中将有如下内容：

image-20210417103951474

然后在 Git Bash 命令行工具中，通过以下命令就可以打开Hexo的服务了：

1
2
$ hexo g
$ hexo server

接下来在浏览器上输入 http://localhost:4000/ ，就可以看到自己生成的博客了，如图所示：

image-20210417104241734

5、Github创建个人仓库

  • 注册Github账号

    首先要有一个Github账号，如果没有就先注册一个，不寒碜！

  • 新建仓库

    完成注册并登录后，在Github上， New respository，新建仓库，如图所示：

    image-20210417110738486

    Tip：创建一个和用户名相同的仓库，只有这样将来要部署到GitHub pages的时候才会被识别，也就是xxx.github.io，其中xxx就是你注册GitHub的用户名。

6、生成SSH添加到Github

打开 Git Bash 命令行工具，输入以下命令：

1
2
$ git config --global user.name "yourname"
$ git config --global user.email "youremail"

Tip：yourname输入你的GitHub用户名，youremail输入你的GitHub邮箱。

然后通过以下命令，检测是否输入正确：

1
2
$ git config user.name
$ git config user.email

接下来，创建SSH，输入以下命令：

1
$ ssh-keygen -t rsa -C "youremail"

然后在Github的Settings中，点击 SSH and GPG keys，然后点击 New SSH key，把刚刚生成的 id_rsa.pub 文件里面的信息复制进去即可。

打开 Git Bash 命令行工具，输入以下命令，查看是否配置成功：

1
$ ssh -T git@github.com

7、将Hexo部署到Github

想要Hexo和GitHub关联起来，就需要将Hexo生成的静态文件部署到GitHub上。

首先，打开站点配置文件 _config.yml，滚动到最后，修改其中代码：

1
2
3
4
deploy:
  type: git
  repo: https://github.com/YourgithubName/YourgithubName.github.io.git
  branch: master
1
url: https://xxx.github.io // 将Github创建的项目名称设置为url

然后，打开 Git Bash 命令行工具，输入以下命令，来安装 deploy-git，这样日后就可以用命令将Hexo生成的静态文件部署到GitHub上。

1
$ npm install hexo-deployer-git --save

最后，输入以下命令，将Hexo生成的静态文件部署到Github上：

1
2
3
$ hexo clean
$ hexo g
$ hexo d

二、Hexo基本配置

1、设置主题

2、发布文章

三、设置个人域名

Hexo
Hexo

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！