第一次使用Hexo搭建个人博客网站

该案例是在Mac OS环境下实现，其他平台可以借鉴但不能完全照搬。

Hexo官网：https://hexo.io/zh-cn/

Hexo官方配置文档: https://hexo.io/docs/configuration

hiker主题GitHub地址（包含文档）：https://github.com/iTimeTraveler/hexo-theme-hiker.git themes/hiker

要说了解Hexo,还得从简书开始，简书作为国内知名的创作社区，竟然在使用百度搜索时会在自己的链接下方有一个"个人博客搭建"的入口，如下：

搜索简书

一丝好奇让我随性的打开了这个链接,进入后，我立马见到了一句充满诱惑力的标题：“5分钟搭建免费个人博客”，我简直是捡到了宝。简单看了下，好像不难，由此我开始一步一步的实现免费建站。

登入GitHub

因为我是GitHub的用户，我直接进入创建资源库，这里我填写的cba023.github.io, cba023是我的用户名，这里要和GitHub的账户名保持一致，后面访问的博客地址也是这一个。

创建GitHun资源库

以public方式创建，这样能保证上传后，博客能够在公网访问到，点击Create respository完成创建资源库。

Hexo环境搭建

Mac环境下搭建非常简单，使用Homebrew安装Node.js。接下来就是打开终端，开始噼里啪啦。

安装nvm

brew install nvm
mkdir ~/.nvm
export NVM_DIR=~/.nvm
.$(brew --prefix nvm)/nvm.sh

安装完成，重启终端。输入：

nvm install latest

保持网络通畅，等待片刻，Hexo依赖的环境就装好了。接下来就是主角Hexo登场。

sudo npm install hexo-cli -g

需要输入用户密码。稍等片刻，安装完成。安装过程可能有一些偶然的错误，会在控制台返回错误信息，然后我们可以把错误信息复制到网络上检索就会有相关的解决方案。

博客建站

生成工作文件夹

首先需要在用户文件夹建立博客工作区文件夹，我选择的是~/Documents路径

打开指定的文件夹

cd ~/Documents

初始化hexo工作文件目录，文件夹名和GitHub中创建的资源库文件目录一致，我创建的是hexo init cba023.github.io

hexo init <username>.github.io

在Documents文件夹下多了一个<username>.github.io目录，后面我们统称为工作文件夹，里面有一些文件，其中有一个_config.yml文件夹，这是Hexo的配置文件。我们主要的配置是在这里完成的，后面再做讲解。

让博客站跑起来

使用终端进入到刚才生成的工作文件夹<username>.github.io目录

cd <username>.github.io

接着输入：

hexo s

终端会打印很多信息，最后还会显示一个链接地址。这个时候我们的博客就可以在本地计算机打开了，我们在浏览器中输入本地服务链接http://localhost:4000，可以看到：

如果看到了Hello World, 说明本地服务已经跑起来了。接下来我们只需要配置里面的参数，就可以让这个服务为我们所用。

开始使用

设置主题

Hexo默认配置了一个主题landscape。我去官方的主题库里找到了hiker主题并换成了它，主题可以用git从GitHub克隆。新开一个终端窗口，定位到工作文件夹下。键入：

git clone https://github.com/iTimeTraveler/hexo-theme-hiker.git themes/hiker

这样hiker主题就被克隆下来了。
这时候我们进入工作文件夹下的_config.yml,把主题配置从theme: landscape改成：

theme: hiker

这样主题就成功设置成hiker了，这时候重启Hexo服务（开启服务的终端窗口键入ctrl + c，也可以关闭之前运行本地服务的终端窗口，新开一个终端窗口）：

hexo s

再打开localhost:4000地址，发现网页画风变了。

hiker主题

这样，主题更换就算完成了，该网页可以滚动，往上面滚动网页可以看到更多的内容。

设置标签

hiker主题

这是hiker主题的首页向上滚动后的界面，默认包含5个标签：Home, Archives, Categories, Tags, About。现在还是英文的标题，打开工作文件夹下的_config.yml，修改如下部分内容：

title: 陈波·博客
subtitle: 
description: ''
keywords: 
author: 陈波
language: zh-CN

这里我们除了更改语言环境，顺便把博客拥有人的信息填写下，然后重启Hexo服务，刷新浏览器中本地服务链接的网页，网页变成中文了，而且博主的名字成了自己的名字。
Hexo博客功能的配置主要是在工作文件夹下的_config.yml中配置完成的，里面的每一项都是一个配置，可以自己去查阅资料并付诸实践。

修改语言后

然后我们试着切换网页的顶部标签，首页、归档切换都正常，但是分类、标签、关于在点击后都会跳转异常，出现Cannot GET..的错误，显然这是是路径找不到的原因，我们在工作文件夹下执行：

hexo new page categories
hexo new page tags
hexo new page about

执行了上述3条命令后，工作文件夹下的source文件夹下会生成三个文件夹，如下：

source文件夹

三个文件夹下各自有一个index.md文件，打开后内分别如下：

---
title: categories
date: 2020-04-12 18:20:14
---

---
title: tags
date: 2020-04-12 18:20:21
---

---
title: about
date: 2020-04-12 18:23:16
---

接着分别将他们修改成：

---
title: 分类
date: 2020-04-12 18:20:14
type: categories
layout: categories
comments: false
---

---
title: 标签
date: 2020-04-12 18:20:21
type: tags
layout: tags
comments: false
---

---
title: 关于
date: 2020-04-12 18:23:16
type: about
layout: about
comments: false
---

这时候我们再进入网页，就不会有之前的Cannot GET..错误发生啦。

配置站内搜索

网页右上角有一个搜索按钮，点击后能显示搜索框，但是不能搜索。这时候还需要使用终端定位到工作文件夹执行如下命令来开启搜索。

npm install -S hexo-generator-json-content

然后就可以搜索啦。

配置小结

通过上述的一系列的配置，本地服务算是基本正常了，还有更多的配置，这里我不再细说了。毕竟相关的配置还是很多的，需要自己一步一步地探索。本人就是在查阅大量网络资料并通过实践来实现整个博客功能的。

编写并发布文章

编写第一篇文章

终于可以发布文章了，Hexo发布文章是通过Markdown形式来发布的，发布后，Hexo再将Markdown转换成HTML形式显示到网页上。不过这里的Markdown稍微有点点讲究，标题需要用Hexo规定的格式来。我们先来创建一篇文章吧。
终端定位到工作文件夹，键入：

hexo new "第一篇文章"

<工作文件夹>/source/_post/路径下会生成第一篇文章.md

我们使用访达找到并打开该文件，内容如下：

---
title: 你好 Hexo
date: 2020-04-12 18:57:32
tags:
---

我们可以给这一篇文章添加分类和标签，然后写入正文，编辑内容如下：

---
title: 你好 Hexo
date: 2020-04-12 18:57:32
categories: 
- Hexo学习
tags:
- hexo
- 经验
---

在Hexo的Markdown中，上述片段中其实已经包含大标题了，所以我们可以只在在下面写入正文


## 第一章

### 1.1  Hello hexo

哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈


### 1.2  Dear hexo

呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵

### 1.1  See you again hexo

嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿

> [单身交友点此处](https://github.com/cba023)

编辑并保存该文件，这样就算写好一篇文章了，可以看出，Hexo发文的标题是由文件内部的标题决定的，与文件名无关

本地服务预览编写的博文

这时候不需要发布文章就能在localhost:4000中看到刚才编写的文章了。

本地服务中有了新文章

点击查看文章内容

新文章内容

是不是一切OK。

发布到线上

如果那么精彩的博文只能自己一个人看到，只能说是莫大的遗憾，为了不让遗憾上演，我们接下来把整个文章推送到我们之前配置的GitHub链接。
第一次推送需要安装本地依赖，终端定位到工作文件夹执行：

npm install hexo-deployer-git --save

我们每次发布文章需要向远程把我们的Hexo工作文件夹更改推送过去，执行:

hexo clean && hexo g && hexo d

推送成功后，我们可以访问远程的服务上的文章啦。删除文章同理，删除_post文件夹里的某一篇文章，本地同步到远程就会覆盖远程的服务。

就是这么简单！✌️✌️