引言

在GitHub首页展示贪吃蛇动画最近挺火了，这里我准备一篇教程来帮助大家快速制作与展示，顺便把我从 掘金-优弧 的Github，无意间发现还可以在Github展示掘金文章数据给大家介绍一下。

一、效果展示

项目制作参考：github.com/HuiDBK/HuiD…

Github数据与掘金数据

Github贡献活跃度-贪吃蛇动画

二、创建个人简介的Github项目

创建一个跟自己名称相同的Github项目，这是一个特殊的个人简介项目，用户访问你的github首页时则会展示这个项目的 REAME.md 文档里内容。

三、修改readme.md 文档

Github统计数据制作

<table border=0>
  <tr>
    <td><img src="https://github-readme-stats.vercel.app/api?username=huidbk&show_icons=true&count_private=true&theme=vue-light&hide_border=true" alt="HuiDBK's GitHub stats" style="zoom:100%;" align="left"/></td>
    <td><img src="https://4sdvg7tqbv.us.aircode.run/juejin?uid=817692384431470&hide_border=true" alt="HuiDBK的掘金数据" style="zoom:100%;" align="left"/></td>
  </tr>
</table>

这里引入html代码的table标签来制作表格展示

如下是Github的数据统计的链接

github-readme-stats.vercel.app/api?usernam…

只要把username={换成你自己的Github用户名}

掘金数据制作

4sdvg7tqbv.us.aircode.run/juejin?uid=…

把uid={换成你掘金账号主页的uid}

就会展示出掘金的一些数据

Github项目置顶制作

官方的置顶项目最多6个，如果想让项目展示在上面，可以使用如下方式置顶放到个人简介的项目的 README.md 文档中。

<p>
  <a href="https://github.com/HuiDBK/py-tools">
        <img align="center" src="https://github-readme-stats.vercel.app/api/pin/?username=huidbk&repo=py-tools&theme=vue-light" />
  </a>
   <a href="https://github.com/HuiDBK/WordSprite">
        <img align="center" src="https://github-readme-stats.vercel.app/api/pin/?username=huidbk&repo=WordSprite&theme=vue-light" />
  </a>
</p>

username={Github用户名}&repo={项目名称}

Github活跃度贪吃蛇动画制作

这个制作麻烦一些，需要通过Github的action来生成贪吃蛇动态图

在这个与自己用户名一样的项目中新建 workflow

输入如下生成贪吃动画的工作流

name: generate-snake

on:
  # 每 12 小时自动运行一次
  schedule:
    - cron: "0 */12 * * *"

  # 允许手动触发执行
  workflow_dispatch:

  # 每当push到master分支时自动执行
  push:
    branches:
    - master


jobs:
  generate:
    runs-on: ubuntu-latest
    timeout-minutes: 5

    steps:
      # generates a snake game from a github user (<github_user_name>) contributions graph, output a svg animation at <svg_out_path>
      - name: Generate github-contribution-grid-snake.svg
        uses: Platane/snk/svg-only@v3
        with:
          github_user_name: ${{ github.repository_owner }}
          outputs: |
            dist/github-contribution-grid-snake.svg
            dist/github-contribution-grid-snake-dark.svg?palette=github-dark
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          
      # push the content of <build_dir> to a branch
      # the content will be available at https://raw.githubusercontent.com/<github_user>/<repository>/<target_branch>/<file> , or as github page
      - name: Push github-contribution-grid-snake.svg to the output branch
        uses: crazy-max/ghaction-github-pages@v3.1.0
        with:
          target_branch: output
          build_dir: dist
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

查看是否运行成功，如果一直失败可以查看下官方的工作流是否变更 github.com/Platane/snk

如果出现如上情况，说明 action 的 workflow 的权限不足，可以到项目中 settings->actions->general 中调整下 Workflow permissions 权限就可以了

然后重新运行，成功运行就会在项目中自动新建一个 output 分支然后生成贪吃蛇的动画图

最后就是在readme文档中引用这张动态图就行

![HuiDBK's github activity graph](https://raw.githubusercontent.com/HuiDBK/HuiDBK/output/github-contribution-grid-snake.svg)

换成自己Github用户名就行

raw.githubusercontent.com/HuiDBK/HuiD…

四、参考

github.com/itcodes （掘金优弧的Github）
github.com/BEPb （有很多展示图）

感觉还是不要让Github的个人首页展示太多花里胡哨的东西，我个人还是喜欢简洁一些，重要还是展示自己写和参与的项目。

好奇心会加强你的执行力。

教你Github首页展示贪吃蛇动画与掘金数据

引言