虽然很早就知道 GitHub 发布了 Profile 功能，可以使用 README 来丰富 Profile 页面。但是一直以来没啥动力，大多数时候都不会去到主页去访问。但现在有些时候逛 GitHub 的时候会点到 其他人 的主页去看，发现有一些主页虽然只有寥寥几句，但却可以清楚的知道「他/她」最近在贡献什么内容，擅长什么技能。虽然我在 GitHub 上还是观摹大佬居多，但也想着通过这个契机在整理 GitHub Profile 的时候加深一下对自己的认知。

至于如何建立同名的 repository，如果提交代码就先略过了，官方的帮助和其他文章的内容都非常详细。

刚开始去 Google 「GitHub Profile」 就发现了如下的页面生成器 GitHub Profile Generator ，可以用这个生成器生成一个初始版本，然后在其基础上修改。

在调研的过程中基本发现了两大类主流的用法，一类是通过 GitHub 的 API ，或者其他服务的 API，生成一个 Badge 展示，另外一类就是通过 [[GitHub Actions]] 通过定时任务动态的使用代码聚合一些内容，然后再动态地展示到页面中。

因为 README 中可以直接写 HTML，所以如下的 HTML 也可以直接使用，注意替换其中的链接。

<h3 align="left">Connect with me:</h3>
<p align="left">
<a href="your link" target="blank"><img align="center" src="https://cdn.jsdelivr.net/npm/[email protected]/icons/twitter.svg" alt="" height="30" width="40" /></a>
<a href="your link" target="blank"><img align="center" src="https://cdn.jsdelivr.net/npm/[email protected]/icons/linkedin.svg" alt="" height="30" width="40" /></a>
<a href="your link" target="blank"><img align="center" src="https://cdn.jsdelivr.net/npm/[email protected]/icons/instagram.svg" alt="" height="30" width="40" /></a>
<a href="your link" target="blank"><img align="center" src="https://cdn.jsdelivr.net/npm/[email protected]/icons/youtube.svg" alt="" height="30" width="40" /></a>
</p>

或者使用外部的 Readme-stats 来生成一个数据卡：

<p>
  <a href="https://github.com/einverne/">
    <img  margin-top="-30px" width="55%" align="right" alt="einverne's github stats" src="https://github-readme-stats.vercel.app/api?username=einverne&show_icons=true&include_all_commits=true&count_private=true&layout=compact&hide_border=true" />
  </a>
</p>

图标

如果要在页面中放入图标可以到如下的网站寻找。

  • Simple Icons 是一个开源的 SVG 图标库，包含了上百个品牌的图标。
  • Skill Icons 是一组可以用来展示技能的图标。
  • Flaticon 提供了很多彩色的图标，也提供很多收费的图标，可以根据需要选择。
  • Icons8 同样是一个图标库，但是也包含一些收费的图标
  • Wikimedia Commons 是另一个不错的选择，可以找到很多官方的图标，并且可以自由使用。

另外一个寻找 icon 的方式就是利用 https://cs.github.com GitHub 的 Code Search，然后直接搜索，比如我想要找到豆瓣的 svg ，输入 douban.svg 然后就能找到。

其他徽章

github-readme-stats

github-readme-stats 是一个用来生成 GitHub 统计数据的工具，可以在页面上展示获得的⭐，提交的次数，总共的 PR 等等。

徽章

生成从构建，代码覆盖率，开源协议，到社交网络等等，非常多的徽章。

统计页面访问量

如果想要统计访问 GitHub Profile 的数量，可以使用 GitHub Profile Views Counter 这个项目。

显示奖杯

GitHub Profile Trophy

样例：

github-readme-streak-stats

Streak stats

https://skyline.github.com/

GitHub Actions

基于 GitHub Actions 动态生成内容展示在 Profile 页面。

因为有 GitHub Actions，所以简单的用脚本可以展示

  • 最近在阅读的图书
  • 最近分享的文章
  • 当前正在听的音乐

等等。

显示最近博客内容

可以使用 blog-post-workflow 来显示最近更新的博客内容。通过定时读取 Feed ，来在页面动态展示内容。

GitHub 最近动态

GitHub Activity Readme 可以在页面上显示最近在 GitHub 上的动态。

Waka

如果你使用 [[WakaTime]] 来统计编码时间，那么可以使用 waka-readme-stats 来展示。

总结

最终的效果见 https://github.com/einverne/

reference