如何拥有一款有特色的 Github Profile？

什么是 Github Profile

Github Profile 用于展示个人的一些成果，把 Markdown 转换为 HTML 渲染在个人主页上，并且高度支持自定义。

话不多说，先展示两个酷炫的主页。

如果你也想拥有这样酷炫主页，继续往下看

创建自己的 Profile

可以参照Profile 官方文档[1]，建一个和用户名同名的仓库，在仓库中编辑 README.md 文件就可以了。

接下来

开始丰富你的 Profile

1. 添加图片

markdown 支持两种添加图片的方式

1. ![alt](src)
2. 普通的 <img> 标签 使用 标签会更灵活，比如设置 width=xxx, height=xxx 来固定宽高，也可以设置 align="left | center | right" 来规定对齐方式

可以合理使用 gif 让主页更酷炫

2. 添加一些开源 Element

1. GitHub 数据统计[2]

根据你的用户名，获取并直观展示 Github 贡献数据。根据提交数、贡献数、issue 数量、star 数量、PR 数量等计算出一个等级值。

2. GitHub 统计奖杯[3]

统计你的 Github 数据，评估各分项等级并以奖杯的形式展示，最高级 SSS，并有一个隐藏奖杯的彩蛋。

3. Badge（徽章）[4]

推荐大家直接利用 shield.io[5] 做徽章自定义，能力非常强大，大部分开源项目 README 里的 badge 都是通过此网站生成的。

也可以直接白嫖markdown-badges [6]，有许多现成的 badge。

4. Views Counter（访问数量）[7]

使用免费的微服务，来统计你的 GitHub Profile 被查看了多少次。

5. Dev Metrics（开发指标）[8]

在你的 Github Profile 上以酷炫可视化的方式展示一些开发指标。支持 Profile 动态定时更新。

后面会使用「在 Profile 中展示自己的关注者」这一示例，来解析动态更新的原理及源码实现。

3. Profile 动态更新

要使得 README.md 能动态更新，其核心原理是「数据获取」和「展示」两部分。

目前有两种方案：

• Github Action 定时触发 -> 获取数据 -> 执行逻辑 -> 更新 README.md -> 提交。适用于简单的展示，类似于上面的 Dev Metrics。
• 发送请求到 Serverless 服务器 -> 获取数据 -> 执行逻辑 -> 返回构建好的 svg 资源。适用于动态可视化图表，类似于上面的 Github 数据统计。

关于 Github Action 入门，推荐阅读 GitHub Actions 入门教程- 阮一峰的网络日志[9]

这里分享一个利用 Github Acton 实现 Profile 动态更新的实践：

「在 Profile 中展示自己的关注者」

1. 首先在 README.md 中加入一段代码

### My Followers

<!--START_SECTION:followers-->
<!--END_SECTION:followers-->

这两行将会作为 followers 块的插入点

1. 编写更新 Followers 视图的代码 follower.js

首先获取 followers 块之前及之后的部分 startPart 和 endPart，因为他们不会更新，所以先将他们暂存起来，方便后续拼接还原。

const readmeData = fs.readFileSync(`${__dirname}/README.md`, 'utf8');
// 找到插入点
const startWords = '<!--START_SECTION:followers-->';
const endWords = '<!--END_SECTION:followers-->';
const startIndex = readmeData.search(startWords) + startWords.length;
const endIndex = readmeData.search(endWords);
// 暂存插入点之前和之后的内容
const startPart = readmeData.slice(0, startIndex);
const endPart = readmeData.slice(endIndex);

接着使用环境变量中的 Github Token 利用 Github API 获取到关注者数据。(「环境变量会在后面的步骤中使用 Github Action 注入」)

// 根据环境变量里的 token 登录 github 获取 followers
const octokit = new Octokit({ auth: `token ${githubToken}` });
// 登录
await octokit.rest.users.getAuthenticated();
// 获取 followers 数据
const followersRes =
await octokit.rest.users.listFollowersForAuthenticatedUser({
  per_page: 100,
});
const { data: followers } = followersRes;

使用获取到的数据构造展示关注者的视图代码，最终拼接上startPart 和 endPart，得到新的 README，写入文件。

const getNewContent = (followers) => {
  let html = '';
  html += '\n<table>\n';
  followers.forEach((follower, index) => {
    const { avatar_url, login: name, id } = follower;
    if (index % 7 === 0) {
      if (index !== 0) {
        html += '  </tr>\n';
      }
      html += '  <tr>\n';
    }
    html += `<td align=\"center\">
          <a href="https://github.com/${name}">
            <img src="${avatar_url}" width="50px;" alt="${name}"/>
            </a>
          <br />
         <a href="https://github.com/${name}">${name}</a>
        </td>
        `;
  });
  html += '  </tr>\n</table>\n';
  const newContent = `${startPart}${html}${endPart}`;
  return newContent;
};

// ...

// 获取关注者数据
const { data: followers } = followersRes;
const newContent = getNewContent(followers);
// 写入新的 README
fs.writeFileSync(`${__dirname}/README.md`, newContent);

3.在仓库下创建一个 Github Action 的 workflow，注入环境变量，定时执行上面的代码

首先你需要生成一个 Github Token[10]，用于 Github API。

在 Profile 仓库的Settings > Secrets中添加你生成的 Github Token。

接着在仓库下创建 Github Action 文件

#.github/workflows/update-followers.yml
name: Update followers

on:
  push:
    branches:
      - master
  schedule:
    # 每天的 UTC 0点执行
    - cron: '0 0 * * *'

jobs:
  update-followers:
    runs-on: ubuntu-latest
    env:
      # 注入添加的 Github Token 环境变量
      GH_TOKEN: ${{ secrets.GH_TOKEN }}
    permissions:
      actions: write
      checks: write
      contents: write
      deployments: write
      issues: write
      packages: write
      pull-requests: write
      repository-projects: write
      security-events: write
      statuses: write

    steps:
      - uses: actions/checkout@v2
      - run: yarn install --registry=https://registry.yarnpkg.com

      # 执行上面的代码，更新 README
      - name: Create local changes
        run: node follower.js

      # 对本地修改打 commit，然后 push 到仓库，完成对 README 更新
      - name: Commit changes
        run: |
          git config --local user.email "xxx@.com"
          git config --local user.name "xxx"
          git add -A
          git diff-index --quiet HEAD || git commit -m "update followers"

      - name: Pull changes
        run: git pull -r

      - name: Push changes
        uses: ad-m/github-push-action@master
        with:
          github_token: ${{ secrets.GH_TOKEN }}
          branch: ${{ github.ref }}

大功告成！

附上动态更新关注者-仓库源码[11]

更多有意思的 Profile

「与头像联动」

「与作者互动，可以提 MR 帮他落好棋」

「递归」

「社区也有站点收集了一些有创意的主页」

• awesome-github-profile-readme[12]
• awesome-github-profiles[13]

懒人神器，一键制定

当然，如果你觉得上面的步骤太繁琐，这里也提供一个社区制作的Profile 在线制作网站[14]，只需要输入一些基础信息就能一键得到 README 代码，拷贝保存就完事。

如果你在发布 Profile 前想本地预览 README 最终展示效果，推荐使用 grip[15] 工具。

参考资料

[1]

官方文档: https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/managing-your-profile-readme

[2]

GitHub 数据统计: https://github.com/anuraghazra/github-readme-stats

[3]

GitHub 统计奖杯: https://github.com/ryo-ma/github-profile-trophy

[4]

Badge（徽章）: https://shields.io/

[5]

shield.io: https://shields.io/

[6]

markdown-badges : https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2FIleriayo%2Fmarkdown-badges

[7]

Views Counter（访问数量）: https://github.com/antonkomarev/github-profile-views-counter

[8]

Dev Metrics（开发指标）: https://github.com/anmol098/waka-readme-stats

[9]

GitHub Actions 入门教程- 阮一峰的网络日志: https://www.ruanyifeng.com/blog/2019/09/getting-started-with-github-actions.html

[10]

生成一个 Github Token: https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token

[11]

动态更新关注者-仓库源码: https://github.com/Leecason/Leecason

[12]

awesome-github-profile-readme: https://github.com/abhisheknaiidu/awesome-github-profile-readme

[13]

awesome-github-profiles: https://github.com/EddieHubCommunity/awesome-github-profiles

[14]

Profile 在线制作网站: https://github.com/rahuldkjain/github-profile-readme-generator

[15]

grip: https://github.com/joeyespo/grip