从零开始搭建个人Hexo博客

一时失言乱红尘 2022-03-25 03:39 300阅读 0赞

# 从零开始搭建个人Hexo博客 #

最终个人博客搭建成功后的效果图如：[我的博客][Link 1] ，阿里云服务器和域名已经过期，无法查看。

## 购买阿里云服务器和域名 ##

虽然可以把我们的博客系统托管在[github][]上面，但是由于之前我就购买了阿里云服务器，所以就理所当然地直接把博客系统放在自己的云服务器上面了。

首先需要你有一个阿里云账号。你可以在[阿里云官网][Link 2]进行注册一个新账号，当然你也可以直接用跟阿里相关的第三方账号如：淘宝账号/支付宝账号/钉钉账号等去登陆[阿里云的官网][Link 2]。

然后，服务器和域名购买 >>> 域名的解析 >>> 域名和服务器的绑定可参考[阿里云官方帮助文档][Link 3]。由于只能在购买了域名3个月之后才能备案，而且备案需要的手续稍显复杂，前期又不影响使用，这里就不做说明了。

## 环境配置 ##

> Hexo是一个快速、简洁且高效的博客框架。它是使用 `Markdown`（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。使用Hexo框架需要预先安装Git和Node.js。

Node.js可从[Node.js官网下载地址][Node.js]下载对应平台最新版本的安装包；Git也可从[Git官网下载地址][Git]下载最新版本的安装包。这些安装包的解压和安装非常简单，不太熟悉的也可自行谷歌或百度相关教程。通过在命令行工具键入如下命令`git --version` 和`node -v`能正确显示版本信息说明安装成功。

如我在本地电脑（Windows）和阿里云（Linux）都已经配置好了对应的环境：

![环境配置图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1V0b3BpYU9mQXJ0b3JpYQ_size_16_color_FFFFFF_t_70]

## 本地电脑测试Hexo框架 ##

> 我们可以在本地电脑上测试Hexo框架的博客效果图。

# 安装hexo必需的依赖包hexo-cli
    npm install -g hexo-cli
    # 在e盘下初始化一个hexo项目的根目录blog
    cd e:
    hexo init blog

hexo初始化后blog项目的目录效果图如下：

![hexo初始化目录效果图][hexo]

目录结构解释如下：

<table> 
 <thead> 
  <tr> 
   <th align="left">名称</th> 
   <th align="left">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">node_modules</td> 
   <td align="left">这是blog项目存放npm依赖包的地方</td> 
  </tr> 
  <tr> 
   <td align="left">public</td> 
   <td align="left">生成的静态文件的存放目录</td> 
  </tr> 
  <tr> 
   <td align="left">scaffolds</td> 
   <td align="left">系统声明了几个默认的标签tag,page等等</td> 
  </tr> 
  <tr> 
   <td align="left">source</td> 
   <td align="left">这是存放blog项目源文件的地方</td> 
  </tr> 
  <tr> 
   <td align="left">themes</td> 
   <td align="left">这是存放blog项目主题的地方</td> 
  </tr> 
  <tr> 
   <td align="left">_config.yml</td> 
   <td align="left">这是blog项目的全站配置文件</td> 
  </tr> 
  <tr> 
   <td align="left">package</td> 
   <td align="left">这是blog项目的hexo依赖版本信息</td> 
  </tr> 
  <tr> 
   <td align="left">package-lock</td> 
   <td align="left">这是blog项目的npm依赖包详细版本信息</td> 
  </tr> 
 </tbody> 
</table>

这里需要做一些额外说明的是：

*  源文件目录source，就是以后我们把写好的Markdown格式文章的存放目录。
 *  主题目录themes，hexo允许我们选取自定义的主题。[hexo官网主题列表][hexo 1]提供了很多可用的主题，我们可以选取自己喜欢的主题，将该主题的源码通过`git clone`命令下载到该themes目录后，在全站配置文件`_config.yml`中配置`theme`属性的值即可启用该主题。
 *  全站配置文件\_config.yml，hexo允许我们在该配置文件中配置属性值来修改页面的样式。之所以叫“全站配置文件”，除了这个配置文件基本都是进行全局配置之外，还有一个原因是：还有一个“主题配置文件”与之对应。如hexo默认的主题配置文件就是（`./themes/landscape/_config.yml`）。基于landscape主题，对该配置文件属性值的修改，可以对局部的样式进行修改。

执行`hexo server`命令，在浏览器地址栏输入`localhost:4000`即可看到如下效果。

![博客默认首页页面][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1V0b3BpYU9mQXJ0b3JpYQ_size_16_color_FFFFFF_t_70 1]

常用的hexo命令汇总如下：

<table> 
 <thead> 
  <tr> 
   <th align="left">命令</th> 
   <th align="left">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">hexo init [folder]</td> 
   <td align="left">hexo项目的初始化</td> 
  </tr> 
  <tr> 
   <td align="left">hexo new &lt;title&gt;</td> 
   <td align="left">新建一篇文章—(在./source目录执行)</td> 
  </tr> 
  <tr> 
   <td align="left">hexo g</td> 
   <td align="left">生成静态文件</td> 
  </tr> 
  <tr> 
   <td align="left">hexo d</td> 
   <td align="left">发布静态文件</td> 
  </tr> 
  <tr> 
   <td align="left">hexo publish</td> 
   <td align="left">发布草稿</td> 
  </tr> 
  <tr> 
   <td align="left">hexo server</td> 
   <td align="left">启动服务器</td> 
  </tr> 
  <tr> 
   <td align="left">hexo clean</td> 
   <td align="left">清理缓存文件</td> 
  </tr> 
 </tbody> 
</table>

注：此时就可以在阿里云服务器上通过上述操作，添加文章，并通过`nohup hexo server &`命令发布自己的静态博客并暴露成一个服务（如果仅仅是使用`hexo server`命令发布，命令行工具会一直阻塞，使用`Ctrl + C`强制停止时客户端就无法访问博客了）。

## 自动化部署实现 ##

> 如果每次想添加新文章时，在本地电脑把文章的内容测试通过后，还需要再将文章手动上传到阿里云服务器，最后重新发布。这样操作未免太不人性化了。这里考虑采用的改进方案是：通过git管理我们的blog项目，本地电脑测试通过好，`git push`推送到云服务器时会通过git提供的钩子`post-receive`实现项目的自动化部署。

实现的思路示意图大致如下:

![自动化部署的架构示意图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1V0b3BpYU9mQXJ0b3JpYQ_size_16_color_FFFFFF_t_70 2]

### 云服务器端安装nginx ###

> hexo默认暴露的端口是4000，为改善用户体验，可用nginx的反向代理技术实现“在客户端的浏览器地址栏中只输入域名，即可跳转至博客首页”。同时nginx还具备记录所有访问该博客系统ip地址日志的功能。因此安装nginx很有必要。

# 通过yum命令安装nginx
    yum install nginx
    
    # 新建测试nginx是否安装成功的默认主页，并编辑页面内容如下
    mkdir -R /home/hexo/
    vim index.html
    # <!DOCTYPE html>
    # <html>
    # <head>
    # <title></title>
    # <meta charset="UTF-8">
    # </head>
    # <body>
    # <p>Nginx running</p>
    # </body>
    # </html>
    
    # 进行nginx的配置如下
    vim /etc/nginx/nginx.conf
    # ...
    # server { 
    # listen 80 default_server;
    # listen [::]:80 default_server;
    # server_name www.zhenye163.cn; #这里需要填写自己的域名
    # root /home/hexo;
    # }
    # ...
    
    # 重启nginx服务，使新配置生效
    systemctl restart nginx

由于我的域名目前还没有备案，因此在客户端浏览器直接输入我的域名`zhenye163.cn`时，页面是看不到“Nginx running”字样的。不过可以在云服务器的命令行中，通过`curl zhenye163.cn`命令测试nginx是否成功安装。

结果图如下时，说明nginx安装成功：

![nginx安装成功示意图][nginx]

### 云服务器配置blog的远程仓库 ###

# 初始化一个裸仓blog.git
    mkdir /home/gitrepo
    cd /home/gitrepo
    git init --bare blog.git
    
    # 配置一个git的post-receive钩子（钩子脚本内容：设置git的工作目录并检出其内容）
    mkdir -p /home/www/blog
    vim /home/gitrepo/blog.git/hooks/post-receive
    # #!/bin/bash
    # git --work-tree=/home/www/blog --git-dir=/home/gitrepo/blog.git checkout -f
    
    # 授予“可执行”权限
    chmod +x /home/gitrepo/blog.git/hooks/post-receive

### 本地电脑配置blog的本地仓库 ###

# 安装相关依赖包
    npm install hexo-cli hexo-server hexo-deployer-git -g
    # 初始化blog项目
    cd e:
    hexo init blog
    # 在本地仓库的全站配置文件中配置发布方式
    cd blog
    vim _config.yml
    # # URL
    # url: http://zhenye163.cn //个人域名
    # # Deployment
    # deploy: 
    # type: git
    # repo: root@zhenye163.cn:/home/gitrepo/blog.git
    # branch: master
    
    # 使用hexo命令生成静态文件，并发布到服务器
    hexo clean
    hexo g
    hexo d

### 修改云服务器的nginx配置 ###

# 重新配置nginx的根目录，并重启nginx服务
    vim /etc/nginx/nginx.conf
    # server { 
    # listen 80 default_server;
    # listen [::]:80 default_server;
    # server_name www.zhenye163.cn; #这里需要填写自己的域名
    # root /home/www/blog;
    # }
    # ...
    systemctl restart nginx

此时，就可以在客户端浏览器的地址栏通过域名（`zhenye163.cn`）访问博客的主页了。前提是我的域名备案流程走完~~~

原理说明：

*  在本地电脑中 执行了`hexo d`命令后，本地电脑会把本地静态文件推送到远端仓库。基于blog项目的全站配置文件中`repo: root@zhenye163.cn:/home/gitrepo/blog.git`的配置项，会推送到远程仓库`/home/gitrepo/blog.git`中。
 *  又由于远程仓库`blog.git`配置了钩子`blog.git/hooks/post-receive`（`--work-tree=/home/www/blog`），`blog.git`成功获取到本地电脑推送的文件后，会自动把这些文件发送到`home/www/blog`。
 *  又由于`nginx.conf`中配置默认端口80的根目录为`root: /home/www/blog`。当客户端在浏览器中输入我的域名`zhenye163.cn`，由于nginx的反向代理，会将云服务器的`/home/www/blog/index.html`的内容（即博客主页）返回到客户端的浏览器中。

所以我们平时更新自己博客的流程就是：

*  在命令行`git bash`的工作目录调整至hexo的根目录（这里就是`cd e:/blog/`），通过执行`hexo new $fileName`命令，hexo会帮我们在`blog/source/_post`生成一个同名的`.md`文件。
 *  我们可以通过使用VSCode/有道云笔记等等文本编辑器，以markdown的语法编辑该`.md`文件的内容，即编辑我们的文章内容。
 *  当文章内容确定后，通过执行`hexo server`命令，访问`localhost:4000`可以在本地电脑看到博客的渲染效果。
 *  当文章内容和样式都确定后，在通过执行`hexo d`命令，将本地电脑的静态文件上传到远程服务器上。又由于我们设置好了git的`post-receice`钩子和nginx的配置。其他所有人就都可以通过域名访问最新的博客主页。

## NexT主题样式配置 ##

> 由于默认的主题`landscape`实在不太美观，所以一般都会考虑换个博客的主题。这里我推荐的就是`NexT`主题。

实际换主题以及主要功能实现的相关配置如下：

# 换成next主题 #

# 通过git clone命令拉取next主题相关的源代码，并放在themes目录下，克隆成功后，该目录会多一个next文件夹
    cd blog/themes
    git clone https://github.com/theme-next/hexo-theme-next next
    
    # 编辑全站配置文件，将其中theme属性的值由landscape替换为next
    vim ../_config.yml
    # # Extensions
    # theme: next
    
    # 保存并退出（:wq）后，重新启动服务器后即可看到效果
    hexo clean
    hexo g
    hexo server

此时本地测试看到的效果如下：

![自动化部署的架构示意图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1V0b3BpYU9mQXJ0b3JpYQ_size_16_color_FFFFFF_t_70 3]

当然，此时的布局也不太美观。具体样式的完善，就是根据不同的配置项去修改全站配置文件`blog/_config.yml`和next主题配置文件`blog/themes/next/_config.yml`。

next主题个性化的配置详情可参考[hexo的next主题个性化配置教程][hexo_next]，这基本是我找到最完整最丰富的配置教程。

在这个教程之外，我还有几点需要补充的就是：

*  next主题全文检索的实现

# 在该项目的根目录，安装本地全文检索必须的依赖包
    cd e:/blog
    npm install hexo-generator-searchdb --save
    
    # 修改全站配置文件，并添加如下配置
    vim _config.yml
    # search:
    # path: search.xml
    # field: post
    # format: html
    # limit: 10000
    
    # 修改next主题配置文件，设置启用全文检索功能
    vim themes/next/_config.yml
    # local_search:
    # enable: true

保存修改之后，目前的实际效果图如下：

![全文检索效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1V0b3BpYU9mQXJ0b3JpYQ_size_16_color_FFFFFF_t_70 4]

*  next主题留言板的实现

> 谷歌或百度到可以添加留言板功能的有很多，但真正免费好用的还是Valine。其他的要么就是需要备案，要么就是需要用户登录。

具体实现步骤如下：

首先去[leanCloud官网][leanCloud]注册账号，并申请一个新应用（我新建的应用名称为blog）,并为该应用配置好安全域名（也就是我们的域名）。此时leanCloud就会免费帮我们存储评论相关的数据记录。

![leanCloud配置安全域名][leanCloud 1]

同时要记录好这里的`App ID`，`App Key`(这里的AppId,AppKey对于每个应用是唯一的)

![记录应用的appId和appKey][appId_appKey]

然后，对next主题配置文件做如下配置：

# 对next主题进行如下配置：
    vim theme/next/_config.yml
    # valine:
    # enable: true # 是否起启用valine
    # appid: xxxxxx # leanCloud获取到appid
    # appkey: xxxxxx # leanCloud获取到的appkey
    # notify: false
    # verify: false 
    # placeholder: Just go go # 评论的提示信息
    # avatar: mm 
    # guest_info: nick,mail,link 
    # pageSize: 10 # 每页评论条数

重新启动后的效果图如下：

![valine评论效果图][valine]

同时，leanCloud还可以对所有的评论，进行管理。这里就是对评论进行简单的增删改查操作。（也就是说，对于一些不友善的评论，我们可以直接在leanCloud里面进行删除）

![valine评论管理效果图][valine 1]

> next主题还有很多其他的配置项，这里就把全文检索和评论这两个最关键的功能的实现进行说明。至于其他的功能实现，有需要的话可以自行谷歌或百度。

## 汇总 ##

目前，我的域名还没备案，因此还不能采用`nginx + git`实现自动部署（客户端直接输入域名时，被重定向到了备案页面）。但实际流程已经实现了（更新博客时，静态文件都能同步上传到阿里云服务器）。

为了博客现在就能访问，我在阿里云服务器上又搭建了一份，并通过`nohup hexo server &`命令实现博客的发布。此时通过域名+实际端口号的方式（`zhenye163.cn:4000`）在浏览器中是可以访问的。

还有一点儿需要说明的是，直接通过百度搜索时，目前是搜索不到我的博客的。还是上面说的那个原因—我的域名没有备案，百度不收录~~~，只能通过在浏览器地址栏直接输入网址才能访问。

[Link 1]: http://zhenye163.cn:4000
[github]: https://github.com/
[Link 2]: https://www.aliyun.com/
[Link 3]: https://help.aliyun.com/?spm=5176.8142029.388261.4.57896d3ep10H4Y
[Node.js]: https://nodejs.org/zh-cn/download/
[Git]: https://git-scm.com/downloads
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1V0b3BpYU9mQXJ0b3JpYQ_size_16_color_FFFFFF_t_70]: /images/20220325/8e493dedac794b17a1036defe39baab9.png
[hexo]: /images/20220325/0a012326f6294f9b9303b552925b9f03.png
[hexo 1]: https://hexo.io/themes/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1V0b3BpYU9mQXJ0b3JpYQ_size_16_color_FFFFFF_t_70 1]: /images/20220325/1412e2a3e5e1444dbb1aa727cc03d761.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1V0b3BpYU9mQXJ0b3JpYQ_size_16_color_FFFFFF_t_70 2]: /images/20220325/4e7dbc2890434d8b8f6445aa3951f556.png
[nginx]: /images/20220325/abde1c8e788b4b7cbb064e8b12fe36ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1V0b3BpYU9mQXJ0b3JpYQ_size_16_color_FFFFFF_t_70 3]: /images/20220325/8d6015cb551f43b697390549fb104d47.png
[hexo_next]: https://segmentfault.com/a/1190000009544924
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1V0b3BpYU9mQXJ0b3JpYQ_size_16_color_FFFFFF_t_70 4]: /images/20220325/6c123df88ace49ec9e890e514103f7cb.png
[leanCloud]: https://leancloud.cn/
[leanCloud 1]: /images/20220325/22336857ef6348779917e55989e900fe.png
[appId_appKey]: /images/20220325/cddda8007b7246ce817e24fdd130e3b2.png
[valine]: /images/20220325/7f0750803a374f3e888b62257f8b7db7.png
[valine 1]: /images/20220325/f70675936ed8469d8076a9d386318266.png