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

前言

想象一下，只需本地项目轻轻一点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. baota面板：

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

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

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

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

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

3. 安装Git

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

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

二、baota软件安装和配置

1. Nginx

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

   

2. Node.js 版本管理器

   

   • 安装Node18+

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

2. 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:[e-mail]/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

三、baota建立网站及运行目录

1. 在baota中新建网站

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

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

   

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

   

四、Gitee 配置

1. 在服务器上配置 SSH 公共密钥

# 生成 SSH 密钥, 一路回车
ssh-keygen -t rsa
# 查看 SSH 公钥
cat ~/.ssh/id_rsa.pub

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

   

3. 配置 Gitee WebHook

• 复制baotaWebHook 提供的URL和密钥

4. 在Gitee 仓库的 WebHook 中添加baota-WebHook的 URL和密钥

五、一键部署，尽在掌握

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

六、总结

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