Hexo完全服务端自动部署搭建记录

(Updated: )
,

简介

本文基于 Ubuntu-22.04 操作。

遑论指南，只希望这些杂七杂八的对后来者有一些帮助。

Blog Start

游戏不想玩闲下来了，想写点记录给小东西，免得你萝卜杯难以后继。

“沉淀”许久 ，有了把 Blog 从 Typecho 换成 Hexo 的想法。原来的服务器也快过期了，就从挑选服务器开始一条龙折腾，也算是成功了

过程中有命令需要提权，烦请自行判断并添加 sudo。

服务器

目标：国外域名国外服务器，懂的都懂。

看到某些厂商正在优惠，随便从 RackNerd 抓了一个 2C 2.5G 的服务器，年付$23.88，是比国内的贵很多，懒得找其他更便宜的机子了（

具体服务器初始化流程见另一篇博客。

域名

老早前在 Porkbun 捞了一个.moe的域名，一年$12.98，renew要$13.68… 已经可以买另一个服务器了。

准备

根据之前的经验，我的方向是：方便自己写东西；尽量不要影响本地环境。

Hexo 是使用 Markdown 渲染生成静态的HTML页面。Markdown 本身并没有什么麻烦的，一个 Typora 就可以搞定编辑环境，不想购买也可以用 VSCode 等 free 的编辑器。

网上看的很多资料都是需要自己本地搭建 Hexo：本地编写md，generate，然后藉由 git 等工具 deploy 到各种平台。我当然是不想在自己的机子东搞西搞，因此目标很明确：本地只有 Markdown 文件，生成部署等操作及其依赖环境完全在服务器上。后文会附上其他方式的配置思路。

环境架构

Nginx 简单设置一下，80端口没设置TLS之前可以用来测试。

Nginx架构

Hexo这边是：

Hexo架构

Hexo本体安装

安装跟着 官方教程 走一遍就行了，大概流程如下。

  1. Node.js

    Ubuntu-22.04 上直接使用 apt install nodejs 的Node.js是12.22（目前），理论上应该不可以安装最新的Hexo。教程说在此安装：nodesource。

  2. Hexo

    1
    npm install -g hexo-cli

    -g表示全局安装，不然会安装到你当前目录。

  3. 项目初始化

    我选择保存Hexo在/var/www中。

    1
    2
    3
    4
    5
    cd /var/www

    hexo init blog
    cd blog
    npm install

博客配置修改参考：_config.yml 配置。

Git仓库

创建远程仓库要用到 Bare Reposity，可以说是一个单独的 .git 文件夹，里面只保存 Git 控制信息。

去到/srv目录，

1
2
3
cd /srv

git init --bare blog.git

创建Hook，Hook应该和回调函数相似，就是在git push事件时触发 post-receive 脚本。

1
emacs ./blog.git/hooks/post-receive

配置如下

1
2
3
4
5
6
7
8
9
10
11
12
#!/bin/sh

BLOG_DIR=/var/www/blog
GIT_DIR=/srv/blog.git

git --work-tree=${BLOG_DIR}/source/_posts --git-dir=${GIT_DIR} checkout -f main

cd ${BLOG_DIR}

hexo clean

hexo generate

还需要给它可执行权限：

1
chmod u+x ./blog.git/hooks/post-receive

以上代码做两件事：

  1. 将更改应用于Hexo的“源码”文件夹
  2. 生成页面

就是不知道是不是全部页面重新生成，有待研究（

好像hexo generate --no-clean 能只生成改动页面。

Git用户（Optional）

理论上操作 git 用别的没有 sudo 权限的账户比较安全。其实和我们刚进 VPS 做的事差不多，这里简单介绍一下。

我们用adduser这个命令创建一个新用户：

1
adduser git

题外话：adduser其实就套着用的useradd，useradd <username>出来的用户没设置默认终端，没有用户目录(/home/<username>)

本地创建SSH密钥，

1
ssh-keygen -t ed25519 -C <your domain>

上传密钥到服务器，

1
2
3
4
5
6
7
8
9
touch ~/.ssh/authorized_keys

# 注意权限问题，可以用以下指令修改
chmod 700 ~/.ssh
chmod 600 ~/.ssh/authorized_keys

# Linux系统应该会有以下命令
# ssh-copy-id <vps-id>
# 没有或者用Windows的话，可以将公钥(.pub)直接粘贴进authorized_keys里

随后使用这个账户作为用户，ssh看看是否能够用密钥登录。

[!NOTE]

设置完密钥后，可以将这个用户终端设置为/bin/git-shell

文件权限

对操作的文件以及文件夹需要拥有读写权限，比如 Git 需要写blog.git文件夹。我们将 Hexo 项目文件夹和 Git 文件夹的所有者设置为用来操作的用户。Hexo 项目文件夹的所有者需要和 Nginx 的用户相同，这个下面会说到。

这里用上述的git用户示范，

1
chown -R git:git <target_dir>

生成页面

去到 Hexo 项目文件夹，执行：

1
2
3
hexo clean

hexo generate

Nginx设置

安装Nginx，备份一下原配置 /etc/nginx/nginx.conf，更改user确保能够读 Hexo 项目文件夹，比如之前的git

1
2
3
user <Username>;
worker_processes auto;
...

在/etc/nginx/sites-available/下创建一个新文件，比如blog

1
emacs /etc/nginx/sites-available/blog

对应设置如下

1
2
3
4
5
6
7
8
9
10
11
12
13
server {
       listen 80;
       listen [::]:80;

       server_name Your@Domain;
       root /var/www/blog/public	# Hexo项目public文件夹

       location / {
            # First attempt to serve request as file, then
            # as directory, then fall back to displaying a 404.
            try_files $uri $uri/ =404;
       }
}

为该文件创建软链接到隔壁的sites-enable，顺便把旁边的default配置给 Down 了：

1
2
3
ln -s /etc/nginx/sites-available/blog /etc/nginx/sites-enable/blog

rm /etc/nginx/sites-enable/default

检查并重载配置，

1
2
3
4
5
6
# 检查配置
nginx -t

# 重载
nginx -s reload
# systemctl reload nginx

确保防火墙开放80端口，比如 VPS 服务商自带的防火墙，或者自己服务器上的。

网页访问之前 Nginx 设置的域名看看是否正常看见 Hexo 初始博客。

测试本地Git

先从服务器clone 仓库

1
git clone <your user>@<your domain>:/srv/blog.git

随便创建一个blog，和平常使用git那样上传更改。

图床（Optional）

GitHub创建一个 Public 仓库，去Setting-Developer Settings创建一个 Personal access tokens，细粒度 token 那个没用过，我选的 classic ，大概这么设置即可。

GitHub Token

或者去 Imgur 注册一个账号， PicList 上的接口好像需要 access token ，看教程还要通过api获取，我直接登录后F12找的，不知道啥时候过期（

Typora 里对 PicGo/PicList 有支持，设置好就可以愉快的上传图片了。

TLS/SSL

1
2
3
apt install certbot python3-certbot-nginx

certbot --nginx

全程交互式操作，certbot 会帮你更改 nginx 配置（见 server 块内带 #managered by cert bot 的语句）。

主题

去 GitHub 找自己中意的主题，直接git clone到Hexo项目的的theme/下。修改Hexo里的_config.yml：theme: <your theme>。其它配置照着别人的说明增删即可。

其他架构

以上是完全依赖于服务端的部署步骤。假如你觉得服务器本来就很累了，想在本地上分担一些压力；又或者是想使用GitHub Pages，那么本地搭建Hexo，并且服务端仅分发页面，也ok，许多教程也是这么教的。其实挺简单的，这里仅介绍思路。

以下内容， Hexo 均在本地搭建

部署于GitHub Pages

新建一个 Public 仓库，仓库名字需要是 <username>.github.io。

来到 Hexo 项目文件夹，执行：

1
npm install hexo-deployer-git --save

在_config.yml找到deploy块：

1
2
3
4
deploy:
  type: git
  repo: https://github.com/<username>/<username>.github.io.git
  branch: main

写好文章后，使用 Hexo 三连

1
2
3
4
5
hexo clean

hexo generate

hexo deploy

就可以完成部署。

部署在本地

在利用 GitHub Pages 的部署中，可以看到基本只是多了 deploy 方法，那么按照这个思路，服务端更改 hook

1
2
3
4
5
6
#!/bin/sh

BLOG_DIR=/var/www/blog
GIT_DIR=/srv/blog.git

git --work-tree=${BLOG_DIR} --git-dir=${GIT_DIR} checkout -f

在本地生成好页面后，直接push到服务器，就会替换为新页面。

总结

如此一来本地只需要操作 Markdown 就好了。但正常来说编写一篇新文章需要hexo new [layout] <title>，本文绕过了这个方法，可能会影响一些依赖于hexo new触发的功能？以及需要自己添加“头”（参考原始博客的hello-world.md）。

结语

因为这篇文章是在操作得差不多之后写的，难免有一些细节会有遗漏，敬请谅解。