GitHub Token/ GitHub Stats统计显示图异常

一.背景

1.GitHub Stats统计显示图异常

在我的Github主页介绍中，GitHub Stats下面的统计显示图无法正确显示。

解决方法：将 GitHub stats 图片 URL 替换为新的 Vercel 部署域名。原域名 github-readme-stats.vercel.app 已失效，更新为 github-readme-stats-gilt-one-64.vercel.app。

javascript 复制代码

//原部分readme内容
### 📊 GitHub Stats
| <img src="https://github-readme-stats.vercel.app/api?username=SmallDuck-lang&show_icons=true&theme=dracula" /> | 
<img src="https://github-readme-stats.vercel.app/api/top-langs/?username=SmallDuck-lang&layout=compact&theme=dracula" /> |
| --- | --- |

### 🛠️ Languages and Tools
<div align="left">
  <img src="https://skillicons.dev/icons?i=html,css,javascript,typescript,vue,react,nodejs,git,vscode" />
</div>
<!--
**SmallDuck-lang/SmallDuck-lang** is a ✨ _special_ ✨ repository because its `README.md` (this file) appears on your GitHub profile.

javascript 复制代码

//替换url的部分readme内容
### 📊 GitHub Stats
| <img src="https://github-readme-stats-gilt-one-64.vercel.app/api?username=SmallDuck-lang&show_icons=true&theme=dracula" /> | 
<img src="https://github-readme-stats-gilt-one-64.vercel.app/api/top-langs/?username=SmallDuck-lang&layout=compact&theme=dracula" /> |
| --- | --- |

#### 🛠️ Languages and Tools
<div align="left">
  <img src="https://skillicons.dev/icons?i=html,css,javascript,typescript,vue,react,nodejs,git,vscode" />
</div>
<!--
**SmallDuck-lang/SmallDuck-lang** is a ✨ _special_ ✨ repository because its `README.md` (this file) appears on your GitHub profile.

2.修改url完之后出现的问题

Vercel 部署缺一个 GitHub Token！现在部署虽然跑起来了，但因为没有 GitHub API token，请求被 GitHub 直接拒绝了（未认证用户每小时只有 60 次请求，多人共用 IP 早就被限流了）。

二.什么是 Vercel

Vercel 是一个前端云平台，专门用来快速部署、托管和扩展网站与 Web 应用。简单来说，它就是一个「一键上线」的工具，特别适合前端开发者和静态网站项目。

1.特点

零配置部署：连接 GitHub/GitLab 仓库后，只要推送代码，Vercel 就会自动构建并部署，几乎不用手动设置。

全球 CDN：你的网站会被分发到全球节点，访问速度极快，无论用户在哪都能秒开。

预览部署：每次提交 Pull Request 都会生成一个临时预览链接，方便团队测试和 review。

Serverless Functions：可以直接写 API 接口，不用自己搭服务器，适合轻量级后端逻辑。

框架友好：对 Next.js、React、Vue、Nuxt 等主流前端框架有原生优化，部署体验丝滑。

2.为什么会用到它？

你现在用它来部署 github-readme-stats，就是典型场景：

原官方域名 github-readme-stats.vercel.app 已失效，需要自己 Fork 项目并重新部署。
Vercel 能让你几分钟内把这个统计卡片服务跑起来，生成自己的域名（比如 github-readme-stats-gilt-one-64.vercel.app），然后嵌入到 GitHub README 里展示个人统计数据。

三.什么是GitHub Token

上面界面是GitHub 的 个人访问令牌（Personal Access Token, PAT） 管理页面，用来生成和管理你访问 GitHub API 或进行 Git 操作的身份凭证。

你在本地用 git push 时，提示需要输入密码，现在 GitHub 不再接受账号密码，必须用 PAT。
你要写脚本或用工具来自动管理 GitHub 仓库（比如自动部署、自动发 Issue）。
你要部署像 github-readme-stats 这类需要调用 GitHub API 的服务，需要用 PAT 来提升 API 调用限额。

1.个人访问令牌的作用

替代密码：在 HTTPS 方式下克隆 / 推送代码时，用它代替 GitHub 账号密码进行身份验证。
API 访问：给脚本、工具或第三方应用授权，让它们可以调用 GitHub API（比如管理仓库、获取统计数据等）。
权限控制：你可以精确控制令牌的权限范围和过期时间，比直接用密码更安全。

2.两种令牌的区别

Fine-grained tokens（细粒度令牌） （Generate new token）
- 更安全、更现代的选择
- 可以精确控制到单个仓库 和具体权限（比如只给读权限，不给写权限）
- 支持设置过期时间，默认也会自动过期
- 适合生产环境或对安全要求高的场景
Tokens (classic)（经典令牌）（Generate new token (classic)）
- 传统的、权限更宽泛的令牌
- 可以一次性授权所有仓库或大部分权限
- 操作简单，但安全性稍弱
- 适合快速测试、脚本开发或兼容旧工具

3.配置

第 1 步：生成 GitHub Token

打开 Sign in to GitHub · GitHub → 点击 Generate new token → 选 Generate new token (classic)
Note 随便填，比如 vercel-github-readme-stats
Expiration 选 No expiration（永不过期）
Scopes 全部不勾选（默认即可，不需要任何权限）
点最下面 Generate token → 复制生成的 token （形如 ghp_xxxxxxxxxxxxxxxxxxxx）

第 2 步：把 Token 加到 Vercel

打开 https://vercel.com → 进入你的项目（github-readme-stats）
点 Settings → Environment Variables
在 Key 填：PAT_1，Value 填：刚才复制的 token
点 Save

第 3 步：触发重新部署

在 Vercel 项目页面，点 Deployments 标签
找到最新的 deployment，点右边三个点 → Redeploy
等 1-2 分钟部署完成

等待部署完成后，直接刷新你的github主页就可以看到统计图啦！！！