本文首发于公众号「小李的前端小屋」，欢迎关注～

什么是 Github Profile

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

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

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

创建自己的 Profile

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

接下来

开始丰富你的 Profile

1. 添加图片

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

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

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

2. 添加一些开源 Element

1. GitHub 数据统计

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

2. GitHub 统计奖杯

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

3. Badge（徽章）

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

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

4. Views Counter（访问数量）

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

5. Dev Metrics（开发指标）

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

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

3. Profile 动态更新

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

目前有两种方案：

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

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

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

在 Profile 中展示自己的关注者

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

### My Followers

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

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

编写更新 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，用于 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 }}