VuePress 博客云端部署：详细步骤与自动化配置

Yasin2025年4月23日大约 4 分钟

记录一下从零开始搭建博客的过程，温故而知新。

1. 准备工作：域名与服务器

1.1 域名注册与备案

ICP 备案： 网站在中国大陆境内运营，需要向工信部提交备案申请，获得 ICP 备案号。
公安网备案：、站在公安机关进行备案，以符合中国大陆地区的网络安全管理规定。
域名解析： 将域名指向你的服务器 IP 地址，使用户可以通过域名访问你的博客。

1.2 ECS 云服务器配置

重置密码： 修改默认密码，确保服务器安全，设置一个强密码。
Git 安装：
```
sudo apt update
sudo apt install git
```

SSH 配置： 配置 SSH 密钥，用于XShell/item2远程连接。

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
cat ~/.ssh/id_rsa.pub >> ~/.ssh/authorized_keys

SSL 配置： 申请和配置 SSL 证书，启用 HTTPS，可以在阿里云申请免费证书，免费证书有效期90天。到期需要更换。

Node.js 安装： VuePress 基于 Node.js 运行，需要安装 Node.js 环境。

curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt install nodejs

npm 安装： npm 是 Node.js 的包管理工具，用于安装 VuePress 和相关依赖。
```
sudo apt install npm
```

Nginx 安装与配置： Nginx 是一个高性能的 Web 服务器，用于反向代理和静态资源服务。

HTTP (80) 重定向到 HTTPS (443)：配置 Nginx，将 HTTP (80 端口) 请求重定向到 HTTPS (443 端口)。
GitHub Webhook 端口设置：设置 Nginx 监听的端口，用于接收 GitHub Webhook 的请求。
本地根目录地址设置：设置 Nginx 服务的静态资源根目录，指向 VuePress 打包生成的目录。

server {
    listen 80;
    server_name yourdomain.com;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name yourdomain.com;

    ssl_certificate /path/to/your/ssl_certificate.pem;
    ssl_certificate_key /path/to/your/ssl_certificate_key.pem;

    root /path/to/your/vuepress/dist;

    index index.html index.htm;

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

PM2 安装与配置： PM2 是一个 Node.js 进程管理器，可以保证 Node.js 应用持续运行，并在崩溃时自动重启。
```
npm install -g pm2
pm2 start your_webhook_server.js
```

2. VuePress 博客配置

2.1 安装 vuepress-theme-hope 主题

npm install -D vuepress-theme-hope@next

2.2 博客信息配置

在 VuePress 的配置文件中，配置博客的标题、描述、作者等信息。

2.3 Algolia 爬虫配置与搜索功能集成

Algolia 提供免费的爬虫服务，可以为你的 VuePress 博客提供强大的搜索功能。

2.4 博客打包与部署

首先，在本地开发环境中启动 VuePress，进行预览和调试：

npm run docs:dev

确认无误后，执行打包命令，生成静态资源文件：

npm run docs:build

打包完成后，将生成的代码上传至 GitHub 仓库，为后续的自动化部署做准备。

3. 自动化部署

为了实现博客的自动化更新，我们需要配置 GitHub Webhook，并在云服务器上部署 Webhook Server。

3.1 创建 GitHub 仓库

如果还没有 GitHub 仓库，需要先创建一个新的仓库，用于存放 VuePress 博客的源代码。

3.2 配置 GitHub Webhook

在 GitHub 仓库的 Settings -> Webhooks 中，添加一个新的 Webhook。

Payload URL: 填写你的 Webhook Server 的地址，例如 http://yourdomain.com:port/webhook。
Content type: 选择 application/json。
Secret: 设置一个 Secret，用于验证 Webhook 请求的合法性。
Which events would you like to trigger this webhook?: 选择 Just the push event.，表示只在代码 push 时触发 Webhook。
Active: 确保 Webhook 处于 Active 状态。

3.3 服务器 Webhook Server 部署

在云服务器上，你需要编写一个 Webhook Server，用于接收 GitHub Webhook 的请求，并执行相应的自动化部署脚本。

以下是一个简单的 Node.js Webhook Server 示例：

const http = require('http');
const crypto = require('crypto');
const { exec } = require('child_process');

const secret = 'your_webhook_secret'; // 替换为你的 Webhook Secret
const port = 3000; // 监听端口

http.createServer((req, res) => {
  if (req.method === 'POST' && req.url === '/webhook') {
    let body = '';
    req.on('data', (chunk) => {
      body += chunk;
    });

    req.on('end', () => {
      const sig = `sha1=${crypto
        .createHmac('sha1', secret)
        .update(body)
        .digest('hex')}`;
      const githubSignature = req.headers['x-hub-signature'];

      if (sig === githubSignature) {
        // 验证通过，执行部署脚本
        exec('./deploy.sh', (error, stdout, stderr) => {
          if (error) {
            console.error(`执行出错: ${error}`);
            res.statusCode = 500;
            res.end('执行出错');
            return;
          }
          console.log(`stdout: ${stdout}`);
          console.error(`stderr: ${stderr}`);
          res.statusCode = 200;
          res.end('部署成功');
        });
      } else {
        // 验证失败
        res.statusCode = 403;
        res.end('验证失败');
      }
    });
  } else {
    res.statusCode = 404;
    res.end('Not Found');
  }
}).listen(port, () => {
  console.log(`Webhook Server 监听 ${port} 端口`);
});

3.4 自动化脚本编写：代码拉取、编译与部署

创建一个 deploy.sh 脚本，用于自动拉取代码、编译 VuePress 博客，并将生成的静态资源文件拷贝到 Nginx 配置的根目录。

#!/bin/bash

# 进入 VuePress 项目目录
cd /path/to/your/vuepress/project

# 拉取最新代码
git pull origin main

# 安装依赖
npm install

# 构建 VuePress 博客
npm run docs:build

# 拷贝静态资源文件到 Nginx 根目录
cp -r .vuepress/dist/* /path/to/your/nginx/root/

# 重启 Nginx 服务
sudo systemctl restart nginx