Git Push即部署！宝塔面板+Gitee，VuePress项目自动化部署博客/文档站实战分享

澍码
622 阅读4分钟

前言

想象一下，只需本地项目轻轻一点Git Push，您的VuePress项目便能自动部署到服务器上，无需繁琐的手动操作，无需担心配置错误，一切尽在您的指尖掌控。这就是“Git Push即部署”的魅力所在！

一、部署环境准备

  1. 服务器系统：

    CentOS 7系统中的glibc和 libstdc++ 库版本过低，建议使用CentOS 8以上，当然你也可以选择升级依赖库。

    # CenOS7 安装node18+ 运行node -v时 会报错如下
node: /lib64/libm.so.6: version `GLIBC_2.27' not found (required by node)
node: /lib64/libc.so.6: version `GLIBC_2.25' not found (required by node)
node: /lib64/libc.so.6: version `GLIBC_2.28' not found (required by node)
node: /lib64/libstdc++.so.6: version `CXXABI_1.3.9' not found (required by node)
node: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.20' not found (required by node)
node: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.21' not found (required by node)

  2. 宝塔面板：

    一款强大的服务器管理软件，能够极大地简化服务器的配置与管理过程。

    在CentOS系统上安装宝塔面板的步骤如下：

    yum install -y wget && wget -O install.sh https://download.bt.cn/install/install_6.0.sh && sh install.sh ed8484bec

    其他系统安装脚本参考： 【官方教程】宝塔Linux面板安装教程

    • 安装完成后，请确保服务器开放宝塔面板的默认端口，以便远程访问和管理。

  3. 安装Git

    为了从Gitee拉取最新的项目代码，我们需要在服务器上安装Git。使用以下命令即可完成安装：

    # 安装脚本
yum install git
# 检查安装情况
git --version

二、宝塔软件安装和配置

  1. Nginx

    • 在宝塔面板中新建网站时，Nginx将作为默认的Web服务器，后续能够代理VuePress项目。

  2. Node.js 版本管理器

    • 安装Node18+

      由于VuePress对Node.js版本有特定要求（推荐18+），我们需要在宝塔面板的Node.js版本管理器中安装相应的版本。同时务必设置命令行版本，以避免版本不可用或冲突的问题。

  1. WebHook

    • WebHook是一种强大的自动化工具，它能够在代码仓库（如Gitee）发生变动时自动触发特定的操作，如部署更新。在宝塔面板中配置WebHook时，需要按照以下步骤操作：

  • 在WebHook中添加脚本

    # 部署脚本
#!/bin/bash
echo ""
#输出当前时间
date --date='0 days ago' "+%Y-%m-%d %H:%M:%S"
echo "Start"
#git分支名称(根据实际情况修改)
branch="dev"
#git项目路径(根据实际情况修改)
gitPath="/home/wgyc/docTemp"
#git 仓库地址(根据实际情况修改)
gitHttp="https://checkChen:xxx@gitee.com/checkChen/xx-xx.git"
echo "Web站点路径：$gitPath"
#判断项目路径是否存在
if [ -d "$gitPath" ]; then
cd $gitPath
#判断是否存在git目录
if [ ! -d ".git" ]; then
echo "在该目录下克隆 git"
sudo git clone $gitHttp gittemp
sudo mv gittemp/.git ./
sudo rm -rf gittemp
fi
echo "拉取最新的项目文件"
#sudo git reset --hard origin/$branch
git remote add origin $gitHttp
git branch --set-upstream-to=origin/$branch $branch
sudo git reset --hard origin/$branch
sudo git pull $gitHttp 2>&1
echo "设置目录权限"
sudo chown -R www:www $gitPath
sudo chmod -R 755 $gitPath
echo "代码拉取结束"
​
echo "安装依赖中......"
sudo npm install
if [ $? -eq 0 ]; then
    echo "等待打包中......"
    sudo npm run docs:build
fi
if [ $? -eq 0 ]; then  
    echo "等待压缩中......"
    cd /home/wgyc/docTemp/docs/.vuepress/
    sudo zip -r dist.zip dist/ && sudo unzip -o dist.zip -d /www/wwwroot/wgyc-doc
    echo "成功了"
fi
else  
    echo "docs:build 执行失败"  
fi
exit
else
echo "该项目路径不存在"
echo "新建项目目录"
exit
fi

三、使用宝塔建立网站及运行目录

  1. 在宝塔中新建网站

    • 数据库选择“不创建”，PHP版本选择“纯静态”。

  1. 设置vuePress项目的运行目录

  2. 查看网站目录是否被创建

四、Gitee 配置

  1. 在服务器上配置 SSH 公共密钥
# 生成 SSH 密钥, 一路回车
ssh-keygen -t rsa
# 查看 SSH 公钥
cat ~/.ssh/id_rsa.pub

2. 配置 Gitee 仓库的 部署公钥

![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/3b6c99b839df4f0ebdfc6fb7320fe2ee~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5r6N56CB:q75.awebp?rk3s=f64ab15b&x-expires=1772589444&x-signature=QApjTH4W%2BPmx0nqbsuQJ4NUuhjU%3D)

3. 配置 Gitee WebHook

  • 复制宝塔WebHook 提供的URL和密钥

  1. 在Gitee 仓库的 WebHook 中添加宝塔WebHook的 URL和密钥

五、一键部署，尽在掌握

完成所有配置后，不要忘记进行Git Push测试以验证自动化部署流程是否按预期工作

六、总结

通过“Git Push即部署”的方式，我们实现了VuePress项目的自动化部署，不仅提高了部署效率，还减少了人为错误的可能性。无论你是个人开发者还是团队负责人，都可以尝试使用这种高效便捷的部署方案来优化你的工作流程。

avatar
文章
阅读
粉丝