1. 为什么要在Github主页放条贪吃蛇作为一个程序员我每天打开Github的第一眼看到的就是个人主页。那个绿色的贡献图就像我的编码日记记录着每一天的努力。但说实话静态的方块图看久了总觉得少了点趣味。直到我发现可以把贡献图变成会动的贪吃蛇这简直是为技术宅量身定做的个性化装饰这个创意来自开源项目snk它能把你的贡献数据实时转换成SVG格式的贪吃蛇动画。蛇身会随着你的提交记录生长今天多写几行代码明天蛇就会多吃几个绿点。我实测下来发现几个特别实用的场景面试前给HR展示动态编码记录团队内部激励组员保持提交频率个人学习进度的可视化追踪最棒的是整个过程完全自动化只需要配置一次工作流之后每天都会自动更新。下面我就手把手教你如何实现这个既实用又有趣的功能。2. 准备工作搭建基础环境2.1 创建特殊仓库首先需要创建一个与你Github用户名同名的公开仓库。比如我的账号是dev-zhang那么仓库名就必须是dev-zhang。这个仓库会被Github自动识别为主页仓库其README内容将展示在你的个人主页。如果已经存在这个仓库直接进入下一步。没有的话点击Github右上角选择New repository在Repository name栏输入你的用户名注意大小写选择Public可见性勾选Add a README file点击Create repository注意仓库必须设置为公开私有仓库无法通过外链访问SVG文件2.2 生成访问令牌自动化流程需要PERSONAL_ACCESS_TOKEN来推送代码到新分支。生成步骤点击头像 → Settings → Developer settings → Personal access tokens点击Generate new token命名随意如snake-token勾选repo权限下的所有子权限点击Generate token复制生成的字符串这个只会显示一次接着在仓库中添加这个token进入仓库Settings → Secrets and variables → Actions点击New repository secret名称输入PERSONAL_ACCESS_TOKEN值粘贴刚才复制的token点击Add secret3. 配置自动化工作流3.1 创建工作流文件在仓库中新建文件路径必须为.github/workflows/snake.yml。这个路径是Github Actions的固定要求任何工作流文件都必须放在这个目录下才能生效。文件内容如下name: generate animation on: schedule: - cron: 0 2 * * * # 每天UTC时间2点运行 workflow_dispatch: # 允许手动触发 push: branches: [ main ] # main分支推送时触发 jobs: generate: runs-on: ubuntu-latest timeout-minutes: 10 steps: - name: generate snake uses: Platane/snk/svg-onlyv3 with: github_user_name: ${{ github.repository_owner }} outputs: | dist/github-contribution-grid-snake.svg dist/github-contribution-grid-snake-dark.svg?palettegithub-dark - name: deploy to output branch uses: crazy-max/ghaction-github-pagesv4 with: target_branch: output build_dir: dist env: GITHUB_TOKEN: ${{ secrets.PERSONAL_ACCESS_TOKEN }}关键参数说明cron: 0 2 * * *表示每天UTC时间2点自动运行北京时间上午10点workflow_dispatch允许在Github网页手动点击运行outputs指定生成亮色/暗色两种主题的SVG文件target_branch: output将生成的文件推送到output分支3.2 工作流原理解析这个配置实现了完整的自动化流水线定时触发每天自动抓取你的最新贡献数据数据转换使用snk工具将方块图转为贪吃蛇路径主题适配同时生成亮色/暗色两种SVG适配Github主题自动部署将结果推送到output分支保持更新我特别喜欢它的智能路径规划算法——贪吃蛇会优先吃掉最近的绿点就像真的在觅食一样。如果某天没有提交蛇就会保持原状这种反馈机制莫名让人有写代码的动力。4. 在README中展示动态效果工作流成功运行后仓库会多出一个output分支里面包含两个SVG文件。现在只需要在README.md中添加以下内容 替换链接中的你的用户名和你的仓库名为实际值。例如我的配置是 保存后刷新主页就能看到动态贪吃蛇了它会根据你的Github主题自动切换亮暗样式。我在团队内部分享这个方法后现在每个人的主页都有一条独一无二的编码轨迹蛇。5. 高级定制与问题排查5.1 自定义蛇的外观如果想调整蛇的样式可以修改工作流中的输出参数outputs: | dist/github-contribution-grid-snake.svg?size3gap2 dist/github-contribution-grid-snake-dark.svg?palettegithub-darksize4支持的参数包括size蛇身宽度默认3gap方块间距默认2palette颜色方案github/github-darkradius圆角半径默认0我习惯设置size4gap1radius2让蛇看起来更圆润。这些参数可以自由组合随时修改工作流文件后提交就能生效。5.2 常见问题解决问题1工作流执行失败检查PERSONAL_ACCESS_TOKEN是否有repo权限确认token已正确添加到仓库Secrets查看Actions日志中的具体报错问题2SVG图片不更新手动触发工作流Actions → generate animation → Run workflow确认cron表达式时区是UTC检查output分支是否成功生成问题3图片显示为空白确认SVG链接中的用户名/仓库名拼写正确尝试直接访问raw.githubusercontent.com的链接测试清除浏览器缓存后刷新我在初期配置时遇到过token权限不足的问题后来发现是漏选了workflow权限。建议生成token时直接全选repo下的所有权限最省事。另外推荐设置每天自动运行两次把cron改为0 2,14 * * *就能在UTC时间2点和14点各更新一次。
Github贡献图变身贪吃蛇：自动化工作流配置全解析
1. 为什么要在Github主页放条贪吃蛇作为一个程序员我每天打开Github的第一眼看到的就是个人主页。那个绿色的贡献图就像我的编码日记记录着每一天的努力。但说实话静态的方块图看久了总觉得少了点趣味。直到我发现可以把贡献图变成会动的贪吃蛇这简直是为技术宅量身定做的个性化装饰这个创意来自开源项目snk它能把你的贡献数据实时转换成SVG格式的贪吃蛇动画。蛇身会随着你的提交记录生长今天多写几行代码明天蛇就会多吃几个绿点。我实测下来发现几个特别实用的场景面试前给HR展示动态编码记录团队内部激励组员保持提交频率个人学习进度的可视化追踪最棒的是整个过程完全自动化只需要配置一次工作流之后每天都会自动更新。下面我就手把手教你如何实现这个既实用又有趣的功能。2. 准备工作搭建基础环境2.1 创建特殊仓库首先需要创建一个与你Github用户名同名的公开仓库。比如我的账号是dev-zhang那么仓库名就必须是dev-zhang。这个仓库会被Github自动识别为主页仓库其README内容将展示在你的个人主页。如果已经存在这个仓库直接进入下一步。没有的话点击Github右上角选择New repository在Repository name栏输入你的用户名注意大小写选择Public可见性勾选Add a README file点击Create repository注意仓库必须设置为公开私有仓库无法通过外链访问SVG文件2.2 生成访问令牌自动化流程需要PERSONAL_ACCESS_TOKEN来推送代码到新分支。生成步骤点击头像 → Settings → Developer settings → Personal access tokens点击Generate new token命名随意如snake-token勾选repo权限下的所有子权限点击Generate token复制生成的字符串这个只会显示一次接着在仓库中添加这个token进入仓库Settings → Secrets and variables → Actions点击New repository secret名称输入PERSONAL_ACCESS_TOKEN值粘贴刚才复制的token点击Add secret3. 配置自动化工作流3.1 创建工作流文件在仓库中新建文件路径必须为.github/workflows/snake.yml。这个路径是Github Actions的固定要求任何工作流文件都必须放在这个目录下才能生效。文件内容如下name: generate animation on: schedule: - cron: 0 2 * * * # 每天UTC时间2点运行 workflow_dispatch: # 允许手动触发 push: branches: [ main ] # main分支推送时触发 jobs: generate: runs-on: ubuntu-latest timeout-minutes: 10 steps: - name: generate snake uses: Platane/snk/svg-onlyv3 with: github_user_name: ${{ github.repository_owner }} outputs: | dist/github-contribution-grid-snake.svg dist/github-contribution-grid-snake-dark.svg?palettegithub-dark - name: deploy to output branch uses: crazy-max/ghaction-github-pagesv4 with: target_branch: output build_dir: dist env: GITHUB_TOKEN: ${{ secrets.PERSONAL_ACCESS_TOKEN }}关键参数说明cron: 0 2 * * *表示每天UTC时间2点自动运行北京时间上午10点workflow_dispatch允许在Github网页手动点击运行outputs指定生成亮色/暗色两种主题的SVG文件target_branch: output将生成的文件推送到output分支3.2 工作流原理解析这个配置实现了完整的自动化流水线定时触发每天自动抓取你的最新贡献数据数据转换使用snk工具将方块图转为贪吃蛇路径主题适配同时生成亮色/暗色两种SVG适配Github主题自动部署将结果推送到output分支保持更新我特别喜欢它的智能路径规划算法——贪吃蛇会优先吃掉最近的绿点就像真的在觅食一样。如果某天没有提交蛇就会保持原状这种反馈机制莫名让人有写代码的动力。4. 在README中展示动态效果工作流成功运行后仓库会多出一个output分支里面包含两个SVG文件。现在只需要在README.md中添加以下内容 替换链接中的你的用户名和你的仓库名为实际值。例如我的配置是 保存后刷新主页就能看到动态贪吃蛇了它会根据你的Github主题自动切换亮暗样式。我在团队内部分享这个方法后现在每个人的主页都有一条独一无二的编码轨迹蛇。5. 高级定制与问题排查5.1 自定义蛇的外观如果想调整蛇的样式可以修改工作流中的输出参数outputs: | dist/github-contribution-grid-snake.svg?size3gap2 dist/github-contribution-grid-snake-dark.svg?palettegithub-darksize4支持的参数包括size蛇身宽度默认3gap方块间距默认2palette颜色方案github/github-darkradius圆角半径默认0我习惯设置size4gap1radius2让蛇看起来更圆润。这些参数可以自由组合随时修改工作流文件后提交就能生效。5.2 常见问题解决问题1工作流执行失败检查PERSONAL_ACCESS_TOKEN是否有repo权限确认token已正确添加到仓库Secrets查看Actions日志中的具体报错问题2SVG图片不更新手动触发工作流Actions → generate animation → Run workflow确认cron表达式时区是UTC检查output分支是否成功生成问题3图片显示为空白确认SVG链接中的用户名/仓库名拼写正确尝试直接访问raw.githubusercontent.com的链接测试清除浏览器缓存后刷新我在初期配置时遇到过token权限不足的问题后来发现是漏选了workflow权限。建议生成token时直接全选repo下的所有权限最省事。另外推荐设置每天自动运行两次把cron改为0 2,14 * * *就能在UTC时间2点和14点各更新一次。
