为个人博客添加GitHub 贡献统计卡片（含私有部署与网络优化方案）

Naseele docker 4 次阅读 1345 字 预计阅读时间: 6 分钟 发布于 18 小时前 最后更新于 18 小时前

AI 摘要

想让你的博客“关于”页面也拥有酷炫的GitHub贡献热力图和语言统计吗？这篇文章手把手教你两种方法！如果你的服务器网络好，可以部署一个实时更新的API服务；如果网络受限，也有“闪电战”方案：只在需要时启动服务，生成静态图片，平时关闭，既安全又快速。快来给你的博客加上这个程序员专属的“战绩展示墙”吧！

在博客的“关于”页面展示 GitHub 的提交热力图和常用语言统计，是程序员博主的“标配”。本文将介绍如何实现这一功能，并针对服务器网络环境的不同，提供两套解决方案。

方案一：服务器网络优异（直连模式）

适用场景：

  1. 服务器位于海外，或者对 GitHub 连接非常顺畅。
  2. 希望数据是实时的（每次刷新页面都是最新数据）。
  3. 希望通过 API 接口动态获取。

实现步骤

准备工作：

1.申请 GitHub Personal Access Token (勾选 repo 和 user 权限)。

    2.部署服务：使用 Docker 部署 github-readme-stats，可以跟你的wordpress放在同一个配置文件内。

    # docker-compose.yml
services:
  gh-stats:
    image: node:18-alpine
    container_name: gh_stats
    restart: always
    environment:
      - PAT_1=你的GitHubToken
      - COUNT_PRIVATE=true # 开启私有仓库统计
      - PORT=9000
    command: sh -c "apk add git && git clone https://github.com/anuraghazra/github-readme-stats.git . && npm install && node express.js"
    ports:
      - "9000:9000"

    3.反向代理：配置 Caddy 或 Nginx，将 https://你的域名/api/gh/ 转发到容器的 9000 端口。

    4.在博客个人页直接调用：HTML 图片链接直接指向自己的 API：HTML<img src="/api/gh/api?username=你的ID&count_private=true...">

    方案二：服务器网络受限（静态快照模式）

    适用场景：

    1. 国内服务器，直连 GitHub 经常超时/失败。
    2. 安全性要求高：不希望 Token 暴露给第三方，也不希望服务长期运行。
    3. 追求极致加载速度：静态 SVG 图片加载速度远快于 API 动态生成。

    核心思路

    “按需启动 -> 瞬时抓取 -> 生成静态文件 -> 关闭服务”。

    平时容器处于关闭状态，仅在维护期间（开启 VPN 时）手动触发脚本更新图片，将图片保存到 WordPress 媒体库目录，供前端直接调用。

    1. 目录结构规划

    为了不干扰主博客运行，我们将工具单独存放：

    /home/naseele/blog/WP/gh-auto/
├── gh_stats/            # 源码目录 (含 Dockerfile)
├── docker-compose.yml   # 独立的容器配置
└── run_update.sh        # 一键更新脚本

    2. 关键文件配置

    A. Dockerfile (修复官方镜像缺失问题)

    在 gh_stats 目录下新建：

    FROM node:18-alpine
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
ENV PORT=9000
CMD ["node", "express.js"]  # 直接运行 express 服务器

    B. docker-compose.yml (独立配置)

    services:
  gh-stats-generator:
    build: ./gh_stats
    container_name: gh_stats_tool
    restart: "no"           # 禁止自动重启，平时关机
    network_mode: host      # 【关键】共享宿主机网络(以便蹭VPN)
    environment:
      - PAT_1=你的GitHub_Token
      - COUNT_PRIVATE=true
      - PORT=9000

    C. run_update.sh (一键更新脚本)

    #!/bin/bash
# 自动获取脚本所在路径
BASE_DIR=$(dirname "$(readlink -f "$0")")
# 图片保存到 WordPress 上传目录
TARGET_DIR="/home/naseele/blog/WP/wordpress/wp-content/uploads/static"

mkdir -p $TARGET_DIR

echo "🚀 启动生成器容器..."
cd $BASE_DIR && docker compose up -d
sleep 8  # 等待 Node.js 启动

echo "📸 抓取数据并保存为 SVG..."
# 访问 localhost:9000 下载图片
curl -s "http://localhost:9000/api?username=你的ID&...&count_private=true" > $TARGET_DIR/gh-stats.svg
curl -s "http://localhost:9000/api/top-langs/?username=你的ID&...&count_private=true" > $TARGET_DIR/top-langs.svg

if [ -s "$TARGET_DIR/gh-stats.svg" ]; then
    echo "✅ 更新成功！修复权限..."
    # 【关键】将文件所有者改为 www-data，防止 WordPress 无法管理
    chown 33:33 $TARGET_DIR/*.svg
    echo "💤 任务完成，停止容器..."
    docker compose stop
else
    echo "❌ 失败，请检查网络/VPN。"
fi

    3. 日常维护流程

    1. 在服务器开启 VPN。
    2. 运行 sudo ./run_update.sh。
    3. 脚本会自动完成“启动服务-生成图片-修复权限-关闭服务”全流程。
    4. 关闭 VPN。