基于Nginx与git在VPS上使用Hexo搭建博客

环境准备

搭建博客需要使用的几个框架/软件:

• Hexo: 博客主体框架，用于生成静态网页，用于一键部署；
• Git: 部署需要，用于将本地开发机的博客内容推送到远端VPS；
• Nginx: 反向代理，serve静态网页。

需要两台机器，分别为：

• 本地开发机: 平常用来写博客，并且会保存hexo主体框架与代码，无需安装nginx，无需暴露公网IP;
• VPS: 国内外均可，用于实际的博客部署，仅保持hexo框架生成的静态网页assets，需要公网IP需要nginx；

我自己的开发机是一台Arch Linux，VPS装的是ubuntu 22.04，都是常用系统。

安装hexo-cli

下列操作均运行在本地开发机内。

AUR内直接有现成的hexo-cli, 很方便好用, 直接安装即可。
hexo-cli需要使用npm与nodejs作为前置，因此首先安装前置程序:

sudo pacman -S npm nodejs

随后直接安装AURhexo-cli:

yay hexo-cli

安装成功后新开一个文件夹用于首个blog的存放位置, 使用cli建立博客。

mkdir MyFirstBlog && cd MyFisrtBlog && hexo init

hexo-cli此时会使用npm下载hexo核心部件并建立相关文件夹，等待cli完成操作之后，便可以一键启动server:

hexo server

一个sample blog就运行在开发机的localhost4000端口啦。可以点进去看看内容，但是目前还没办法直接将其部署在VPS上。

博客主题与评论区设置

hexo内置了众多blog主题，可以尝试一些看看效果。目前hexo使用landscape作为默认主题。因此landspace的module已经伴随着hexo-cli的配置下载完成。

landscape的默认主题配置并没有直接在_config.landspace.yml内生成，如果需要自己配置theme，需要先拷贝默认配置即node_modules/hexo-theme-landscape/_config.yml的内容至_config.landspace.yml内。此时直接修改此配置文件便可以直接生效。

我自己使用的是Fluid主题，主要是看到他家github仓库的更新频率很高，之前浏览过很多博客都用的是这个主题，网上的教程和讨论也比较多，还支持自定义json和css，可以随便自己鼓捣。具体对Fluid的配置直接参考官方手册，非常详细非常好用。

评论区使用的是waline插件，寄托于海外Leancloud并使用Vercel部署。详细教程可以参考Waline的官方手册。跟着步骤一步一步来，最后在fluid的配置文件内启用waline插件即可。

使用waline的问题在于国内有可能访问不太顺畅，目前国内直连有以下问题:

• 评论区加载较慢，中国联通访问尤其慢;
• 自带的表情会无法加载;

而且突然发现waline的ip定位直接定位到了地级市，ip归属地直接会在评论区展示出来，我一直都很反感ip归属地展示这个功能……之后看看怎么把它去掉。

使用git推送更新

部署主要用到git和nginx。首先在VPS安装nginx，在开发机和VPS都安装git:

sudo apt-get install nginx && apt-get install git

确保nginx服务正常运行:

sudo systemctl status nginx

在部署时需要明确三个VPS上的文件夹位置，下文会会用到。分别是:

• 网站静态资源存放位置(nginx会读取该位置的静态资源);
• git仓库存放位置(我们在本地开发机的更新会推送到这里);
• nginx配置文件存放位置(nginx会根据该配置文件进行serve);

为网站建立静态资源文件(html/js/css)存放的位置，参考一般的网站部署习惯，将网站静态文件放在/var/www/**site.com/内。即建立文件夹:

mkdir -p /var/www/myblog.com

随后再建立一个文件夹用于当做git仓库，之后在开发机改动会直接推送到这个仓库，存放位置随便了:

mkdir -p ~/blog/workdir/blog.git

# non-root user could using ~/blog as git path
cd /root/blog/workdir/blog.git
git init --bare

注意上面git使用的--bare指令，目的在于创建一个仅用于存储的repo，不包含工作目录(working directory)。

随后创建一个hook脚本，git每次接受到文件后都执行该脚本，我们的目的是让它每次接受推送更新之后就将接收到的静态文件复制到上面我们刚建立的静态资源存放位置。

# 位置还在 /root/blog/workdir/blog.git下
vim hooks/post-receive

使用的脚本如下:

#!/bin/bash
git --work-tree=/var/www/myblog.com --git-dir=/root/blog/workdir/blog.git checkout -f

chmod使该脚本可执行:

chmod +x hooks/post-receive

这时候就可以尝试在开发机进行推送更新了，首先在开发机使用npm安装hexo的git部署插件:

npm install hexo-deployer-git --save

随后便可以在hexo的_config.yml内配置git repo:

deploy:
    type: git
    repo: username@vps_ipaddr:/root/blog/workdir/blog.git
    branch: master

由于git是基于ssh的，强烈建议先配置好ssh的私钥登录，否则每次ssh连接到vps时都需要在shell内输入密码。

配置完成后便可以尝试部署:

# hexo g 表示生成静态文件
# hexo -d 表示创建仓库、提交更新、推送更新
# vps的repo收到更新后便直接将静态文件复制到/var/www/下的地址
hexo clean && hexo g -d

指令完成后可以去vps内检查/var/www/myblog.com下有没有对应的文件，有就代表成功了，以后更新博客只需要hexo g -d一条指令即可。

使用nginx进行部署

根据我之前有限的nginx经验，首先在/etc/nginx/目录下创建博客的配置文件:

sudo vim /etc/nginx/sites-available/myblog.com

在不考虑https和ssl证书的情况下，使用80端口的http协议，配置文件内容如下:

server {

    listen 80;
    listen [::]:80;

    root /var/www/myblog.com;
    
    # hexo生成的是index.html，以防万一把.htm也加上
    index index.html index.htm;

    # 假设域名就是myblog.com
    # 如果有www子域名就可以加上www 或者有别的子域名也可以加上 看需求
    server_name myblog.com www.myblog.com;

    location / {
        try_files $uri $uri/ =404;
    }
}

随后创建软链接至真正nginx可以读取配置文件的地址:

sudo ln -s /etc/nginx/sites-available/myblog.com /etc/nginx/sites-enabled/

使用-t指令检查配置文件有无语法错误:

sudo nginx -t

没有语法错误的情况下，直接重启nginx服务即可完成部署:

sudo systemctl restart nginx

之前使用Let’s Encrypt做ssl证书支持https，后来发现用cf的域名可以直接免费拿到有效期15年的ssl证书
配置也比Let’s Encrypt更简单，详细信息可以看我另外一篇博客