自动化部署

本地开发流程

在 VSCode 修改代码
本地预览：npm run docs:dev
确认没问题后，提交并推送到 GitHub

服务器开发流程

服务器安装 Git

bash

npm run docs:dev

服务器克隆仓库

bash

cd /www/wwwroot
sudo git clone https://用户名:Token@github.com/用户名/仓库名.git

服务器安装依赖

bash

cd WenDang
sudo $(which npm) install --unsafe-perm
sudo chmod -R 755 node_modules/.bin/

确认 node 和 npm 路径

bash

which node   # /usr/local/bin/node
which npm    # /usr/local/bin/npm

. 在宝塔文件管理创建部署脚本路径：/www/wwwroot/deploy.sh，内容：

bash

#!/bin/bash
# 指定使用 bash 解释器执行此脚本
export PATH=$PATH:/usr/local/bin
# 将 node 和 npm 所在目录加入环境变量，确保脚本能找到这两个命令
cd /www/wwwroot/WenDang
# 进入服务器上的项目目录
rm -rf .vitepress/dist
# 删除上次构建的产物，避免旧文件和新文件冲突
git pull https://用户名:Token@github.com/用户名/仓库名.git
# 从 GitHub 拉取最新代码，Token 用于身份验证（替代输入用户名密码）
npm run docs:build
# 执行构建命令，将 md 文件编译成静态 HTML 文件，输出到 .vitepress/dist
cp -r /www/wwwroot/WenDang/.vitepress/dist/* /www/wwwroot/new_site/
# 将构建好的文件复制到网站目录，Nginx 从这里读取文件对外提供访问
echo "部署完成！"
# 打印提示信息，告知脚本执行结束

给脚本加执行权限

bash

sudo chmod +x /www/wwwroot/deploy.sh

测试脚本

bash

sudo bash /www/wwwroot/deploy.sh

自动化部署 ​

本地开发流程 ​

服务器开发流程 ​

自动化部署

本地开发流程

服务器开发流程