# 克隆 Git 仓库创建网站并实现自动更新

> 介绍如何在宝塔面板（BT Panel）中使用 Git 仓库克隆创建网站并配置 Webhook，实现代码推送后站点自动更新，适用于 GitHub、GitLab、Gitee 仓库。

# 克隆 Git 仓库创建网站并实现自动更新

本教程以 GitHub 为例，介绍如何在宝塔面板中克隆 Git 仓库创建网站，并配置 Webhook 实现仓库更新时自动同步网站内容。

## 克隆仓库并创建网站

### 1. 复制宝塔面板的 SSH Key 并添加到 GitHub

进入 **网站** → **添加站点** → **Git 创建**，复制面板生成的 SSH Key。

![复制 SSH Key](https://docs.bt.cn/img/practical-tutorials/git-webhook/copysshkey.png)

:::warning 注意
首次使用请按照提示安装 Webhook 插件。
:::

### 2. 登录 GitHub 添加 SSH Key

在 GitHub 中，点击 **头像** → **Settings** → **SSH and GPG keys** → **New SSH key**

![添加 SSH Key](https://docs.bt.cn/img/practical-tutorials/git-webhook/addsshkey.png)

![添加 SSH Key 详情](https://docs.bt.cn/img/practical-tutorials/git-webhook/addsshkey-2.png)

- 输入一个 `Title`（标题）用于标识该密钥
- 将从宝塔面板复制的 SSH Key 粘贴到 `Key` 字段中

### 3. 创建新仓库或选择已有仓库

在 GitHub 上创建一个新仓库，或者使用已有的仓库。

### 4. 复制仓库 URL

可以选择 `HTTPS` 或 `SSH` 方式克隆仓库。

:::tip 注意
记下您需要的 `分支名称`（如 main），稍后创建网站时需要选择正确的分支。
:::

![复制仓库地址](https://docs.bt.cn/img/practical-tutorials/git-webhook/copy-repository.png)

### 5. 在宝塔面板中创建网站并克隆仓库

进入 **网站** → **添加站点** → **Git 创建**

- 设置网站目录（如 `/www/wwwroot/your_site`），**注意：该目录必须为空**
- 粘贴仓库 URL（如 `https://github.com/username/repository.git` 或 `git@github.com:username/repository.git`）
- 选择分支名称（如 `main`）

![Git 创建网站](https://docs.bt.cn/img/practical-tutorials/git-webhook/add-site-for-git.png)

确认后，网站将自动创建并克隆仓库内容。

:::warning 故障排查
如果克隆过程中出现错误，请根据屏幕提示排查问题（如 SSH Key 配置错误、仓库 URL 无效、分支名称错误、网络连接问题等）。
:::

## 配置 Webhook 实现自动更新

当仓库更新时，可以通过配置 Webhook 触发指定脚本执行，自动将最新代码同步到网站目录，实现网站自动更新。

:::info 提示
使用 Git 创建 功能会默认在软件商店安装 Webhook 插件。
:::

### 1. 在宝塔面板中添加部署脚本

找到通过 Git 创建的网站，点击 **设置** 进入 **Git 管理**，然后在 **仓库** 中添加脚本。

**Git 管理** → **仓库**

- 输入脚本内容，例如：

```bash
pnpm i
pnpm run docs:build
\cp -r .vitepress/dist dist
```

![添加脚本](https://docs.bt.cn/img/practical-tutorials/git-webhook/add-script.png)

添加完成后，点击 **保存**。

### 2. 复制 Webhook URL

**Git 管理** → **仓库**

![复制 Webhook URL](https://docs.bt.cn/img/practical-tutorials/git-webhook/copy-webhook.png)

### 4. 在 GitHub 仓库设置中添加 Webhook

进入 GitHub 仓库的 **Settings** → **Webhooks** → **Add webhook**

![GitHub 设置 Webhook](https://docs.bt.cn/img/practical-tutorials/git-webhook/git-set-webhook.png)

填写 Webhook 配置：

- **Payload URL**：粘贴从宝塔面板复制的 Webhook URL
- **Content type**：选择 `application/json`
- **SSL verification**：选择 `Disable`（如果您的面板没有配置 SSL）

![Webhook 配置详情](https://docs.bt.cn/img/practical-tutorials/git-webhook/git-set-webhook-2.png)

### 5. 测试 Webhook 自动更新功能

添加 Webhook 后，测试自动更新功能：

1. 修改仓库中的文件并提交（commit）到 GitHub
2. 提交操作会触发 Webhook 执行指定脚本

**触发成功：**

![Webhook 触发成功](https://docs.bt.cn/img/practical-tutorials/git-webhook/webhook-success.png)

**脚本执行结果：**

![脚本执行结果](https://docs.bt.cn/img/practical-tutorials/git-webhook/webhook-result.png)
:::warning 故障排查
如果网站内容未更新，请检查：
- 宝塔面板 Git 管理中的 **Webhook 日志**
- GitHub 仓库 Webhooks 页面的 **Recent deliveries**

根据日志信息排查问题（如 Webhook 请求失败、脚本执行错误等）。
:::