Hexo + GitHub 搭建个人博客

对于程序员来说，搭建和维护一个个人博客十分必要​，写博客既是对所学知识的整理和总结，同时也能向他人展现自己的学习成果。这篇教程就是基于 Hexo 和 GitHub 来搭建属于自己的个人博客，简单快捷，对小白也十分友好。

前期准备

本次 Hexo 博客搭建环境

Windows 10 1803

node-v10.14.1

git version 2.21.0.windows.1

hexo-v3.8.0

安装各种依赖环境还是比较简单的，基本上就是从各自的官网下载进行安装，十分方便。

安装 Node.js

Hexo 的运行需要 Node.js 的支持，所以我们需要首先安装好 Node.js 。打开 Node.js 官网就能很明显地看到下载提示，点击左边的按钮进行下载即可。

下载完点击安装程序进行安装，无需修改安装路径的话无脑点击下一步即可。

当安装完成后打开命令行工具（cmd/powershell)，输入 node -v，如果输出如下信息，安装即为成功。

$ node -v

v10.14.1

安装 Git

我们需要从 GitHub 上下载主题文件，最重要的是我们需要将本地的博客部署到可供外部访问的网页上去，我们借助的是 GitHub ，这些都离不开 Git 的支持。同样的我们到 Git 官网下载页下载即可。这里我们选择 Windows 64 位最新版本的 Git for Windows 进行安装。

安装和 Node.js 差不多，不做修改的话一直点下一步即可。

安装完成后同样打开命令行工具（cmd/powershell)，输入 git --version，如果输出如下信息，安装即为成功。

$ git --version

git version 2.21.0.windows.1

安装 Hexo

安装完 Git 后，我们的操作就可以在 Git Bash 中进行**(当然在其他命令行工具中也行)**，在资源管理的任意目录下右键鼠标可以看到 Git Bash Here 选项。

单击该选项，我们便进入了 Git 的命令行工具界面如下(同样打开 Windows 自带的 cmd 或是其他命令行工具都可以)，之后 Hexo 的安装、博客的部署等操作都在这个界面进行。

由于国内的 npm 访问外网下载速度较慢，我们可以将 npm 源更换为淘宝的镜像（当然如果你觉得你的下载速度较快的话，也可以选择不进行更换），在 Git Bash 中输入以下指令

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

请注意如果进行了上述操作，那么之后的下载等操作需要使用到 npm 的地方你都应该更换为 cnpm 指令，这样才能起到加速作用，如果未进行更换，则使用 npm 即可。

接下来就是重头戏**安装 Hexo **了。输入如下指令即可安装完成 Hexo 的安装，十分方便。

$ npm install hexo-cli -g

在安装过程中可能会出现 WARN 提示，这是因为 Hexo 的某些内容不支持 Windows 系统，我们无需理会 (程序员只关心 Error，不关心 Warning🙃)。

安装完成后，我们输入 hexo -v 命令，如果显示如下信息，则安装成功。

hexo-cli: 1.1.0

os: Windows_NT 10.0.17134 win32 x64

http_parser: 2.8.0

node: 10.14.1

v8: 6.8.275.32-node.36

uv: 1.23.2

...

底下还有许多包的版本信息，可以看到 Hexo 的依赖项还是比较多的。

初始化博客

在我们想要存放博客文件的盘下进入 Git Bash ，首先我们要新建一个文件夹用来存放我们写的博客和其它相关文件，在命令行中输入 mkdir Blog 命令，便可新建一个名称为 Blog 的文件夹（文件夹名可自取）。接下来进入刚创建的文件夹，可使用 cd Blog 命令，或是进入该文件夹后在空白处单击右键，再点击 Git Bash Here （还是多练习以下命令行的简单命令为好）。

进入 Blog 文件夹后，输入 hexo init 命令，即可完成该文件夹的初始化，在此期间，Hexo 会自动克隆和创建一系列相关文件，在结束后为得到如下反馈：

$ hexo init

INFO Cloning hexo-starter to F:\desktop\Blog

Cloning into 'F:\desktop\Blog'...

...

Unpacking objects: 100% (71/71), done.

Submodule 'themes/landscape' (https://github.com/hexojs/hexo-theme-landscape.git) registered for path 'themes/landscape'

Cloning into 'F:/desktop/Blog/themes/landscape'...

...

Receiving objects: 100% (890/890), 2.56 MiB | 362.00 KiB/s, done.

Resolving deltas: 100% (465/465), done.

Submodule path 'themes/landscape': checked out '73a23c51f8487cfcd7c6deec96ccc7543960d350'

INFO Install dependencies

...

INFO Start blogging with Hexo!

当看到 Start blogging with Hexo 就知道我们已经初始化成功了，Blog 文件夹中会创建如下文件：

生成博客页面

在 \source\_posts\ 文件夹中就保存着我们写的所有博客，当前我们并没有写任何博客，但是 Hexo 为自动生成一个 hello-world.md 文件，我们可以以此为例，看看我们的博客网页是啥样啦。

在 Git Bash 中输入 hexo g 命令（是 hexo generate 的简写），等待 Hexo 自动生成网页，得到如下反馈则生成成功：

$ hexo g

INFO Start processing

INFO Files loaded in 192 ms

INFO Generated: index.html

...

INFO 28 files generated in 459 ms

接下来我们需要开启开启本地服务器，输入 hexo s 命令（是 hexo server 的简写），输出

$ hexo s

INFO Start processing

INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

我们就知道了网页运行在 http://localhost:4000 上，我们在浏览器中输入该地址便能进入我们创建的博客网页啦。

美化博客页面

下载主题

可以看到打开的博客页面就是 Hexo 默认的页面，所以并不是非常得好看，我们可以自行选择更换，在 GitHub 上搜索 Hexo 主题还是有非常多的项目的。我在这里选择了目前使用人数比较多的 Next 主题进行演示。Next 主题的 Github 地址是 theme-next/hexotheme-next。回到我们存放博客文件的根目录，输入如下指令，将该仓库克隆到本地。

$ cd Blog

$ git clone https://github.com/theme-next/hexo-theme-next themes/next

这样我们就将 Next 主题克隆到 themes/next 文件夹下啦。

更改配置文件

使用编辑器打开根目录下的 _config.yml 文件，这个文件保存的就是 Hexo 的诸多配置项，我们可以对其进行个性化修改。在文件中找到 theme 配置选项，如下所示：

# Extensions

## Plugins: https://hexo.io/plugins/

## Themes: https://hexo.io/themes/

theme: landscape

可以看到现在的主题是默认的 landscape ，我们将其改为 next 即可。

# Extensions

## Plugins: https://hexo.io/plugins/

## Themes: https://hexo.io/themes/

theme: next

再在 Git Bash 中依次输入下面三条指令（发布三连），请注意所有的 hexo 指令都是在根目录下进行的，如果当前目录不是根目录，必须先切换到根目录再执行命令：

$ hexo clean #清除之前生成的网站文件

$ hexo g #生成当前网站文件

$ hexo s #开启服务器

再次打开 http://localhost:4000 ，我们就能看到更换主题后的网站了，非常便捷。

这就是我们新生成的页面了，是不是看上去精致多了呢。

部署博客

在完成了上述步骤之后，我们就可以在自己的电脑上打开博客网页了，但是怎么才能让别人也能访问到我们的网页呢？这就需要我们部署我们的博客网站了。幸运的是，GitHub 能为我们免费提供这一服务，那就是 GitHub Page ，我们需要做的就是在 GitHub 上新建一个名为 <username>.github.io (在 <username> 处填入你的用户名） 的仓库即可。

修改配置文件

打开根目录下的 _config.yml 文件，找到 deploy 选项，如下所示：

deploy:

type:

将其修改为

deploy:

type: git

repo: https://github.com/<username>/<username>.github.io.git

branch: master

在其中的 <username> 处填入你的 GitHub 用户名即可。保存配置文件并退出。

接下来在 Git Bash 中输入下面三条指令（部署三连）：

$ hexo clean

$ hexo g

$ hexo d

至此，我们就已经完成了个人博客网站的部署，在浏览器中输入你的地址 ：<username>.github.io ，就能看到我们的个人网站啦！