这是对[Pulumi Deploy and Document Challenge]，用Pulumi和GitHub玩转创意的提交：删除“针对”前的逗号，并在“Pulumi Deploy and Document Challenge”后添加中文逗号，使句子更流畅。将“投稿”改为“提交”，更符合原文的语气和语境。可以将“:” 替换为“，”，以符合中文的习惯用法。

修正后的翻译如下：

这是对[Pulumi Deploy and Document Challenge]，用Pulumi和GitHub玩转创意的提交。

这个项目是一个GitHub Metrics Dashboard，为Get Creative with Pulumi and GitHub Challenge打造。它使用Pulumi、GitHub Webhooks和Grafana自动化GitHub数据分析的可视化。系统收集GitHub仓库事件，处理这些事件并在Grafana仪表板中展示，提供实时洞察。

https://github.com/Adonai-Technologies/GitHub-Metrics-Dashboard-Pulumi-Grafana-.git

• 自动化 GitHub 指标收集 – 使用 webhooks 来跟踪仓库活动。
• Pulumi 基础设施即代码 (IaC) – 部署和配置云资源。
• Grafana 可视化 – 使用丰富的仪表板来展示 GitHub 分析。
• 可扩展且灵活 – 支持多个仓库及各种事件类型。

• Pulumi（基础设施即代码）
• GitHub Webhooks（事件触发）
• Node.js & TypeScript（Webhook接收端）
• Grafana（指标可视化）
• Cloudflare Tunnel（Webhook公开）

1️⃣ 复制仓库

```git clone https://github.com/yourusername/github-metrics-dashboard.git``` 和 ```cd github-metrics-dashboard``` 分别用于克隆仓库和切换到指定文件夹。

git clone https://github.com/yourusername/github-metrics-dashboard.git
cd github-metrics-dashboard

切换到全屏，退出全屏

### 2️⃣ 安装相关依赖

如果你想安装依赖，可以运行 `npm install`。

全屏模式，退出全屏

### 3️⃣ 设置 Webhook 接收端

在命令行中输入以下内容：

cd webhook-receiver
npm install
运行 node index.js

这将安装必要的依赖项并启动应用程序。

全屏切换 退出全屏

如果成功，你应该能看到：

运行在端口4000的Webhook

全屏查看，退出全屏

### 4️⃣ 展示 Webhook 接收端

运行命令：云flare隧道 --url http://localhost:4000

全屏 退出全屏

这会生成一个公开的 URL，例如：

https://your-tunnel.trycloudflare.com``` (你的隧道网址)

可以按全屏键进入全屏模式，然后点击退出全屏键退出全屏模式

5️⃣ 设置 GitHub 的 Webhook

1. 前往你的 GitHub 仓库。
2. 导航到 设置 > Webhooks 选项。
3. 点击 添加 Webhook 按钮。
4. 在 Payload URL 中填入 https://your-tunnel.trycloudflare.com/github-webhook。
5. 选择 JSON 作为内容类型。
6. 勾选所需的事件（推送、拉取请求、问题等）。
7. 再次点击 添加 Webhook 按钮。

6️⃣ 使用 Pulumi 部署到云端

确保你已经安装并配置好了 Pulumi。

    `pulumi up` 命令

点击这里进入全屏模式，点击这里退出全屏模式

7️⃣ 查看 Grafana 仪表板

一旦 Pulumi 配置了 Grafana，就可以通过提供的 URL 访问并配置数据源了。

贡献代码/时间/想法等

欢迎贡献！您可以随时提交问题和pull request。

MIT许可证协议。详情请参见许可证文件。

🚀 使用 Pulumi 和 GitHub 发挥创意的挑战赛专属打造！

初始规划及构思
项目最初是从为 Pulumi 和 GitHub 挑战进行头脑风暴开始的。目标是将 GitHub 数据分析可视化自动化，使其更方便地实时监控仓库动态。

⚙️ 设置 Pulumi 和 Webhook 接收器
设置 Pulumi：我们使用 Pulumi 来定义用于部署 webhook 接收器以及 Grafana 仪表板所需的云资源。

使用 Node.js 和 TypeScript 实现的 Webhook 接收器，监听并响应来自 GitHub 的事件并处理这些事件。

Cloudflare Tunnel 用于将 GitHub 的 webhook 接收器暴露出来。

🚧 面临的挑战与解决方案
🔒 Webhook 安全问题

问题: Ngrok 需要自定义域名的话要付费，而 localtunnel 则不太靠谱。

解决办法：换成了Cloudflare Tunnel，提供了一个稳定的网址。

💾 验证webhook签名

问题：GitHub webhooks 需要一个安全密钥来确保安全，这最初引发了认证失败的问题。

已实现HMAC验证机制，以在处理GitHub事件之前验证其签名。

📊 Grafana 部署与数据导入

挑战：把Grafana配置成从webhook接收器拉取数据很有挑战性。

解决方法：使用了时间序列数据库等（如Prometheus）来存储 webhook信息，并连接到 Grafana。

🎯 我们学到的
✅ 利用Pulumi实现的基础设施即代码（IaC） – 自动化基础设施部署使得设置更加可重复和可扩展。
✅ GitHub Webhook 安全性 – 正确实现 webhook 的身份验证非常重要。
✅ Grafana 仪表板 – 实时可视化 GitHub 仓库活动能提供有价值的见解。

Pulumi在这个项目中发挥了关键作用，自动化了基础设施的部署。我们利用Pulumi的TypeScript SDK动态定义和提供资源，从而使设置更容易重现和更易于扩展。

🔹 Pulumi 实现的关键：
部署 webhook 接收器以处理来自 GitHub 的事件 – 使用 Pulumi 部署了一个云 webhook 接收器来处理来自 GitHub 的事件。

_部署 Grafana _ – Pulumi 自动部署了这样一个用于 GitHub 指标的 Grafana 实例。

配置云资源 – 通过Pulumi，你可以将托管服务、网络和安全配置以代码形式进行管理，从而无需手动管理基础设施。

🚀 为什么使用 Pulumi？
✅ 基础设施即代码 (IaC) – 让我们能够以声明式定义基础设施，减少人为错误。
✅ 自动化部署 – 一个命令 (pulumi up) 即可搞定整个部署。
✅ 多云且灵活 – Pulumi 支持多种云服务商，使未来的扩展变得更加容易。