GitHubCard 介绍：展示你的 GitHub 个人主页和开源项目

在 Twitter/X、群聊或技术文章里直接贴一个 GitHub 链接时，默认的预览图往往只是一张大头像加一行字，很难看出这个开发者或项目到底在做什么。想在个人网站或 README 里嵌一块好看的统计卡，要么得自己截图（过几天数据就旧了），要么得去拼凑一堆第三方参数链接。

我们做 GitHubCard，就是为了把公开的 GitHub 个人主页和开源仓库变成可直接分享、可自由排版的矢量卡片。

默认的 GitHub 链接预览差在哪？

• 信息太少：默认预览图看不出语言构成、近期提交活跃度或项目的增长趋势。
• 样式难统一：在个人博客或作品集里引用多个外部徽章时，字体、圆角和深浅色背景很难融入页面本身的设计。
• 维护麻烦：靠手写参数或自己搭脚本生成图片，改一次布局就要折腾半天。

两大核心生成器：个人名片与项目卡片

1. GitHub Profile Card（个人名片生成器）

把你的头像、简介、核心贡献统计、常用语言和代表作仓库整合进同一张名片里。

对比一下默认预览和 GitHubCard 的效果：

在 Twitter/X 上直接分享 GitHub 主页的默认预览：

使用 GitHubCard (githubcard.com/sxyazi) 后的效果：

包含哪些内容：

• 完整个人资料：自动拉取头像（采用 Base64 内联，确保在 GitHub README 的代理环境下也能稳定显示）、用户名、简介、公司、所在地和社交链接。
• 实时统计指标：公开仓库数、粉丝数、Commit、PR、连续提交天数（Streak）动态更新。
• SVG 矢量输出：在任何分辨率和手机屏幕上都保持清晰。

常见用法：

• 放在个人主页 <username>/<username> 的 README.md 顶部（详见 2026 年如何打造 GitHub 个人主页 README）
• 嵌在个人网站或博客的「关于我」页面（看看大家是怎么在博客里用 GitHubCard 的）
• 附在简历或作品集里展示开源经历

2. GitHub Repo Card（项目展示卡片）

为开源仓库生成一张专属卡片，适合放在项目文档首页、发布公告或技术评测文章里。

对比一下默认预览和 GitHubCard 的效果：

默认社交媒体预览：

使用 GitHubCard (githubcard.com/Cactusinhand/filter-repo-rs) 后的效果：

包含哪些内容：

• 项目基本信息：仓库名称、简介、开源许可证、Topics 标签
• 热度与增长趋势：Star、Fork、Issue 计数，以及基于 GitHub 隐私安全 Star History API 的增长曲线、周提交量和贡献者列表
• 语言占比：一眼看清项目代码的技术栈构成
• 即拿即用：支持直接复制 Markdown、HTML <img> 或 <iframe> 嵌入代码

Canvas 可视化画布编辑器

不用记任何 URL 查询参数，直接在浏览器里打开画布编辑器就能拖拽排版。

画布支持哪些能力

• 自由拖拽与对齐：内置智能参考线和图层管理，组件位置和大小随手调。
• 25+ 数据组件：
  • 个人资料：头像、简介、详细资料、连续打卡（Streak）、热门仓库
  • 统计与语言：综合数据统计、语言条形图、语言环形图
  • 仓库信息：标题、描述、核心指标、许可证、主题标签、外链、状态
  • 数据图表：Star 历史曲线、代码增删频率、周提交量、贡献者头像墙、贡献热力图
  • 辅助元素：自定义文本、GitHub Logo

预设画布尺寸：

• Minimal 布局（800×400）：紧凑型卡片，适合直接塞进 README 或博客正文
• Detailed 布局（1200×900）：大画幅，适合同时放多张图表和仓库列表
• Social Media 布局（1200×630）：符合 Open Graph 标准的社交分享尺寸

保存与导出：

• 支持导出 SVG 和 PNG
• 使用 GitHub 登录后可保存设计、生成专属短链（了解为什么保存设计需要登录）
• 支持将 1200×630 卡片设为你的默认社交分享预览图（OG Image）

基于 Cloudflare Workers 边缘渲染

GitHubCard 运行在 Cloudflare Workers 全球边缘节点上，生成的卡片就近缓存和分发，不需要你自己维护服务器或配置定时 GitHub Actions。

快速上手

把 GitHub 链接里的 github.com 换成 githubcard.com，或者直接打开可视化设计器：

个人名片 (Profile Cards)：

• 原链接：https://github.com/your-username
• 设计器：GitHub 个人名片生成器
• 预览页：https://githubcard.com/your-username
• 画布编辑：https://githubcard.com/your-username/card/edit

项目卡片 (Repository Cards)：

• 原链接：https://github.com/owner/repo
• 设计器：GitHub 仓库卡片生成器
• 预览页：https://githubcard.com/owner/repo
• 画布编辑：https://githubcard.com/owner/repo/card/edit

嵌入到 README：

![GitHubCard](https://githubcard.com/your-username.svg)
![Repo Card](https://githubcard.com/owner/repo.svg)

网站：githubcard.com · Twitter：@githubcard · YouTube：@githubcard

---

GitHubCard Team