通过宝塔使用webhook同步GitHub中项目

通过宝塔使用webhook同步GitHub中项目实现建站

前置条件

  • 已经安装宝塔面板的服务器：此步骤网上或者B站有很多
  • 安装webhook：在宝塔面板中的软件商店查找安装即可。
  • 已有Github账号：默认有的。
  • 已有网站静态文件：项目编译后的静态文件已上传到Github仓库中。
  • 域名：若服务器在国内，则需要备案，否则不需要。

步骤

1. 安装git以便拉取项目代码

笔者系统使用的是Debian，若是其它系统则可问chatgpt。

  • 进入宝塔面板，点击终端输入代码。
  • 更新软件包列表：
    1
    sudo apt update
  • 安装git:
    1
    sudo apt install git
    系统会提示安装所需的依赖项，输入 Y 确认安装。
  • 验证安装:
    1
    2
    git --version
    # 安装成功显示：git version 2.x.x

2. 配置ssh实现免登录

  • 进入Github官网，点击右上角自己的头像：
    1. 在弹出列表中点击Settings进入设置页
    2. 在左侧列表中点击SSH and GPG keys
    3. 在中部选项卡中点击New SSH key按钮
  • 回到终端生成SSH密钥：
    1
    ssh-keygen -t rsa
  • 出现以下停顿回车即可：
    • Enter file in which to save the key (/root/.ssh/id_rsa):ssh文件保存目录，默认即是圆括号中的地址。
    • Enter passphrase (empty for no passphrase):文件密码，默认空白即可，个人使用无所谓。
    • Enter same passphrase again:确认密码，默认空白。
  • 获取公钥内容：
    1
    2
    cat /root/.ssh/id_rsa.pub
    # 通常为：ssh-rsa AAAAB3... rest_of_key ...== root@your-hostname
  • 复制公钥内容并输入：
    • Title - 展示名称，可以为XX服务器的SSH等等。
    • key type - 键类型，默认即可。
    • Key - 公钥内容粘贴进去。
  • 最后点击Add SSH Key
  • 回到终端测试连接：
    1
    ssh -T git@github.com
  • 出现一下内容：
    • 由本人确认是否信任主机：GitHub 的官方 ED25519 指纹为（SHA256:+DiY3wvvV6TuJJhbpZisF/zLDA0zPMSvHdkr4UvCOqU）
    • 可以在 GitHub 官方文档 SSH key fingerprints 中查到这一指纹。
    • 如果指纹匹配并且你确信是连接到 GitHub，可以输入 **yes**，然后按 Enter。
      1
      2
      3
      4
      5
      6
      #The authenticity of host 'github.com (20.205.243.166)' can't be established.
      #ED25519 key fingerprint is SHA256:+DiY3wvvV6TuJJhbpZisF/zLDA0zPMSvHdkr4UvCOqU.
      #This key is not known by any other names.
      Are you sure you want to continue connecting (yes/no/[fingerprint])? yes
      #Warning: Permanently added 'github.com' (ED25519) to the list of known hosts.
      #Hi 你的名字! You've successfully authenticated, but GitHub does not provide shell access.

3. 拉取项目文件，并创建网站

  • 进入宝塔面板
    1. 点击左侧菜单中的文件项。
    2. 点击地址栏切换地址为：www/wwwroot/。
    3. 点击终端按钮。
  • 输入进行项目拉取：
    1
    2
    #此次为你的项目SSH连接
    git clone git@github.com:yourname/project_xxx.git
  • 拉取完成后创建网站
    1. 点击左侧菜单中的网站项
    2. 点击HTML项目选项卡。
    3. 点击添加HTML项目按钮。
  • 输入内容
    1. 域名 - 你的域名例如：www.myblog.com以及myblog.com。
    2. 备注 - 展示用例如：XX博客网站。
    3. 根目录 - 项目目录：www/wwwroot/myproject。
    4. 完成后点击确定。

注意：

  • 此刻如果你的域名已经解析到了服务器ip，并且服务器实例中的安全组以及宝塔面板中的安全选项中开启了80端口和443端口，那么得稍等片刻后才能打开得了网站。

顺便一提，443端口是添加了SSL证书后使用到的，以及不建议直接将域名解析到个人服务器ip地址，随便找个CDN加速网站隐藏。

4. 设置webhook实现代码同步

  • 添加Hook：

    1. 在宝塔面板中点击软件商店。
    2. 点击以安装找到WebHook并点击。
    3. 在弹出窗口点击添加Hook。

  • 添加Hook：

    • 名称 - 展示的名称，可为XX博客同步
    • 执行脚本 - 填入以下内容
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      #输出更新时间
      echo "网站更新时间为："
      date --date='0 days ago' "+%Y-%m-%d %H:%M:%S"
      #project_name为网站项目，目录基本都是这样
      cd /www/wwwroot/project_name
      #执行的git拉取命令，本质上是镜像仓库，所以不用保存本地修改
      #获取远程最新状态 
      git fetch --all 
      # 强制将本地分支重置为远程分支的状态 
      git reset --hard origin/<你的分支名> 
      # 删除本地所有未被 Git 跟踪的文件和目录
      git clean -fd

  • 添加完成后点击查看密钥，复制GET/POST后的URl。

  • 测试Webhook是否能自动拉取：

    1. 进入项目文件夹删除某些文件
    2. 点击测试按钮
    3. 查看文件是否被拉取下来
    4. 如果文件恢复了则成功完成

  • 到网站项目仓库中:

    • 点击Settings选项。
    • 点击Webhook选项。
    • 点击Add webhook按钮。

  • 将URL填入。

  • 将Content type设置为application/json

  • 将SSL verification设置为Disable (not recommended)

  • 点击Add webhook

  • 测试项目更新是否能同步更新网站：

    1. 更新项目……
    2. 打开网站检查……

5. 扩展

如果你熟悉构建网站并部署，例如使用node.js命令。那么实现以下功能也不是不行：

  • 将Vue项目部署到服务器上实现动态部署网站。
  • 每次更新后保存记录。
  • ……

反正这个基本原理流程如下：

  1. 远程仓库更新，向服务器提供的接口发送更新消息
  2. 服务器接收到更新消息，则执行对应代码脚本。

至于GitHub中的SSL verification选项问题：

  • 如果想开启的话，需要给宝塔配置域名并且设置SSL证书，我看了下宝塔webhook使用的是服务器ip+端口号，是否应该给面板设置域名看你自己吧。
  • 如果不想给面板设置域名则：新建域名解析→CDN→服务器→反向代理（https://127.0.0.1:宝塔端口），并给反向代理和CDN设置SSL证书。然后用域名替换webhook的url中服务器ip+端口号即可。