记录一次GitHub自述文件首页的项目部署

前言

要先知道，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去做的，这个也是一个不错的技巧。