前言

要先知道,GitHub在创建仓库的时候,是有彩蛋的,如果你创建的仓库名与你的用户名相同的话,他会提示你,你可以使用它将README.md添加到你的配置文件中。你设置为公共库后,别人打开你的主页后,你的写在同用户名仓库文件夹下的自述文件将在你的网页右侧呈现。

最近在刷github的时候,突然发现别人github的主页,挺酷的,于是乎就找了教程自己部署了一下,做了个自己的,过程挺简单的不复杂,简单记录一下吧。

开始部署

1,Metrics(GitHub 信息统计)

 

获得类似上图的 GitHub 数据统计,需要用到一个在线工具「Metrics」,打开网站之后,在左侧输入你的 GitHub ID,稍等一会,就会返回右侧所有和你相关的数据,你还能自定义一些数据类型。

点击右侧的 Markdown code e选项卡,切换到统计视图对应的 Markdown 链接,复制代码添加到README.md文件中自定义位置。

Markdown

![Metrics](https://metrics.lecoq.io/sxlz-jack?template=classic&base=header%2C%20activity%2C%20community%2C%20repositories%2C%20metadata&base.indepth=false&base.hireable=false&config.timezone=Asia%2FShanghai)

 

HTML

<div align="center"> <img src="https://metrics.lecoq.io/sxlz-jack?template=classic&config.timezone=Asia%2FShanghai"> </div>

 

当然,熟悉Action的可以用Action code,用工作流定时更新图。

(注:docker部署,GitHub里有详解)

2,GitHub Stats Card(GitHub 统计卡片)

在您的自述文件中获取动态生成的 GitHub 统计信息

把username改成自己的github id

Markdown

![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=sxlz-jack&show_icons=true&theme=radical)

 

HTML

<div align="center">
    <img src="https://metrics.lecoq.io/sxlz-jack?template=classic&config.timezone=Asia%2FShanghai">
</div>

 

3,Most used languages(GitHub 使用语言统计)

同第二个github项目

Markdown

[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=sxlz-jack&layout=compact)](https://github.com/anuraghazra/github-readme-stats)

 

HTML

<div align="center">
    <img height="200px" src="https://sxlz-readme-stats.vercel.app/api/top-langs/?username=sxlz-jack&layout=compact&locale=cn&theme=algolia"/>
</div>

 

顺便看到这个项目有说明,可以部署至Vercel上,于是乎我也部署了一个,sxlz-readme-stats.vercel.app可以用这个,替换github-readme-stats.vercel.app,虽然原作者说#58后调用api应该不会触发限制了,但是借用别人资源还是不太放心,关于部署详解,原作者github里有。

 

4,Github Profile Trophy(GitHub 资料奖杯)

Markdown

https://github-profile-trophy.vercel.app/?username=sxlz-jack&theme=flat

 

HTML

<div align="center"> <img src="https://github-profile-trophy.vercel.app/?username=sxlz-jack" /> </div>

5,Shields(GitHub 徽章)

作者的生成徽章站点:https://shields.io/

我部署后的生成徽章站点:https://sxlz-shields.herokuapp.com/

(利用heroku部署,github文档有详解)

 

6,Visitor Badge(GitHub 访客徽章)

Markdown

![visitor badge](https://visitor-badge.glitch.me/badge?page_id=sxlz-jack)

 

 

HTML

<div align="center"> <img src="https://visitor-badge.glitch.me/badge?page_id=sxlz-jack" /> </div>

 

7,GitHub Readme Activity Graph (GitHub 活动统计图)

Markdown

[![Ashutosh's github activity graph](https://sxlz-activity-graph.herokuapp.com/graph?username=sxlz-jack&theme=react-dark)](https://github.com/ashutosh00710/github-readme-activity-graph)

 

HTML

<div align="center"> <img src="https://activity-graph.herokuapp.com/graph?username=sxlz-jack&theme=xcode" /> </div>

 

原作者:activity-graph.herokuapp.com

在线自定义生成:https://ashutosh00710.github.io/github-readme-activity-graph/

 

我部署的:sxlz-activity-graph.herokuapp.com

部署方法,github文档有详解

 

8,GitHub streak(GitHub 连续打卡)

Markdown

[![GitHub Streak](https://github-readme-streak-stats.herokuapp.com/?user=sxlz-jack)](https://git.io/streak-stats)

 

HTML

<div align="center"> <img src="https://github-readme-streak-stats.herokuapp.com/?user=sxlz-jack" /> </div>

 

原作者的:http://github-readme-streak-stats.herokuapp.com/demo/

我部署的:https://sxlz-streak.herokuapp.com/demo/

部署方法github文档里有详解

 

9,打字特效

原作者:https://readme-typing-svg.herokuapp.com/demo/

我部署的:https://sxlz-readme-typing.herokuapp.com/demo/

HTML

<div align="center">
<a href="https://git.io/typing-svg"><img alt="Typing SVG" height="60%" src="https://readme-typing-svg.herokuapp.com?font=Fira+Code&amp;size=31&amp;duration=3000&amp;pause=500&amp;color=298EBB&amp;center=%E7%9C%9F%E5%AE%9E%E7%9A%84&amp;vCenter=%E9%94%99%E8%AF%AF%E7%9A%84&amp;width=478&amp;height=60&amp;lines=%E8%BF%99%E4%B8%AA%E9%9A%90%E8%97%8F%E7%9A%84%E8%8F%9C%E9%B8%A1%E8%A2%AB%E4%BD%A0%E5%8F%91%E7%8E%B0%E4%BA%86;console.log%EF%BC%88%22welcome%22%EF%BC%89" width="60%"/></a>
</div>

 

部署方法,github文档有说明

 

 

结尾

 

其实大多是通过大佬们做好的API插入到我们的readme.md文件中进行展示的,还有很大一部分内容我是通过GitHub actions去做的,这个也是一个不错的技巧。

届ける言葉を今は育ててる
最后更新于 2022-08-26