使用hexo部署个人博客

前言

今天我们使用hexo来部署自己的博客，虽然网上都说hexo是一键部署，但我还是吃了不少亏，所以写这一篇博客，把遇到的坑记录一下

前置要求

1. 准备虚拟机

这次依然使用VMware来部署虚拟机，采用的镜像是CentOS-8.5.2111-x86_64-dvd.iso，之前我都习惯使用CentOS7，但是centos7已经停止维护了（其实centos8也已经停止维护），在使用中也遇到越来越多的问题，包括yum、docker镜像源不再维护，无法安装较新版本的node，等等；所以这次安装centos8的镜像源；虚拟机需要根据前面的文章虚拟机的初始准备及一般操作先配置网络和防火墙，安装基础软件（yum、gcc、gcc-c++）

2. 安装node和pm2

如果之前的准备顺利完成，这一步是很容易的，参考文章虚拟机的初始准备及一般操作中“安装npm”的条目，唯一要说的是我安装的版本是“v22.11.0”

3. 安装git

文章虚拟机的初始准备及一般操作中也有条目，这里不再赘述

安装hexo

1. 安装hexo

铺垫了这么多终于要安装hexo了，我将其安装在‘/usr/local/project/blog’，其实命令很简单

1	npm install -g hexo-cli

在安装完成后，在适当的地方创建项目文件夹，然后在其中执行hexo初始化命令

hexo init

2. 启动hexo服务

在项目的根目录下创建hexo-server.js文件，这个文件是项目的启动文件

const { exec } = require('child_process')
exec('hexo server -p 4000',(error, stdout, stderr) => {
if(error){
        console.log('exec error: ${error}')
        return
}
console.log('stdout: ${stdout}');
console.log('stderr: ${stderr}');
})

然后用pm2命令启动项目

1	pm2 start hexo-server.js

然后我们就可以通过浏览器从本地访问hexo的博客了，可以看到，在hexo-server.js文件中，我们设置的端口为4000（-p 4000），所以通过http://localhost:4000可以从虚拟机的浏览器访问，或者通过http://192.168.218.137:4000从宿主机的浏览器访问（虚拟机的ip为192.168.218.137）

3. hexo部署博客的简单原理

这里需要简单说说hexo的原理，hexo是根据我们上传的.md格式文件，生成静态的.html文件；这样看来其实hexo的缺点还是很明显，那就是不能线上修改，每次修改都必须重新编辑上传再部署；不过作为可以在一天时间内搞定的简易博客，还要什么自行车；

我们将.md格式的文件上传到“/hexo/source/_posts”中，然后执行命令部署博客

# 清除缓存
hexo clean 
# 生成静态html文件
hexo g (hexo generate)
# 部署
hexo d (hexo deploy)

4. hexo的图片路径问题

第一次部署博客会发现图片是无法渲染出来的，这个问题我也是弄了好就，最后找到一篇博客：hexo博客中插入图片失败——解决思路及个人最终解决办法

这篇里面说的就比较清楚了，我再来总结一下怎样才能解决这个问题：

（1）在hexo根目录下的_config.yml文件中的“post_asset_folder”属性设置为“true”

（2）在/hexo/source/_posts目录下创建.md文件时，创建一个同名的文件夹，这个文件夹中就是用来放置图片

（3）使用命令“npm install https://github.com/CodeFalling/hexo-asset-image –save”安装hexo-asset-image插件，这个插件会自动将.md文件中的相对图片路径转为.html文件中的绝对图片路径，这个绝对路径在“/hexo/public/年/月/日/文章名称”的目录下，在hexo生成静态html文件的时候也会把图片复制到那里

（4）.md文件中的图片文件名称前不能带任何路径，要做到这一点，在我们编写.md文件时就要确保，如何确保呢，如果你使用的是Typora软件，在‘文件’-’偏好设置‘-’图像‘中，’插入图片时‘选择’复制到指定路径‘、’./${filename}‘

5. 博客的域名解析

我们现在解决了图片路径问题，在本地已经可以看到博客了，但是如何让别人也能看到我们的博客呢？

这里我们要讲一点点网络知识，我们家中用的宽带一般都是没有外网ip的（这里不再解释为什么没有），我们可以用github、gitee等免费提供域名的网站进行域名解析，也可以在腾讯云购买云服务器（带有外网ip）和域名，然后自己配置解析；这里我使用的是腾讯云服务器+自己域名的方式

（1）首先，在腾讯云服务器和家中的电脑（我搞了一台二手的惠普工作站）上部署内网穿透软件（我选用frp，虽然会暴露端口，但是凑合用吧，本来就是自娱自乐，如何配置内网穿透我会再写博客），我们的hexo服务的端口是4000，配置好内网穿透，就可以在浏览器通过url（http://腾讯云服务器ip:4000）访问我们的博客了

（2）让后在腾讯云配置域名解析

（3）在腾讯云服务器安装nginx并配置端口转发

server {
    listen 80;
    server_name blog.qiuli.site qiuli.site;
    location / {
        proxy_pass http://10.6.0.3:4000/;
    }
}

注意，我们这里转发的端口的ip配置的是腾讯云服务器的内网ip，可能有人觉得奇怪，这里确实有点绕；我们整理一下思路，用户通过域名访问腾讯云服务器（默认80端口），被nginx监听到，他会检测url中的头信息，检测到是‘blog.qiuli.site’或‘qiuli.site’，就会将信息转发给自己的4000端口，而4000端口我们已经配置了内网穿透，就能访问到我们在家中工作站的虚拟机上部署的hexo博客服务了；那么既然是转发给云服务器自身，为什么这里不直接用‘http://localhost:4000’或者‘http://127.0.0.1:4000’呢，主要是我用docker部署的nginx，网络连接方式使用的是默认的‘bridge’方式，因此nginx的网络是独立的，使用localhost或者127.0.0.1只能连接容器自身，是连接不到腾讯云服务器（宿主机）的

TODO

好了，到这里我们终于可以通过域名‘http://qiuli.site’访问我们的博客了, 当然我们还有很多工作，比如调整主题，调整页面，实现更多功能，这些留着以后慢慢来吧~