今天教大家打造一个炫酷的 GitHub 首页。
如何实现
其实自定义 Github 的首页很简单，我们只需要新建一个仓库名和自己 Github 用户 ID 相同的仓库并且添加一个 README.md 自述文件即可。
理论存在，实践开始 新建一个同名仓库，添加一个自述文件后点击确认。
1、Typing svg
用于生成动态生成的、可定制的 SVG。
开源项目地址： https://github.com/DenverCoder1/readme-typing-svg
在线demo地址：
Readme Typing SVG - Demo Site (demolab.com)
我自己生成的动态图如下：
[](https://git.io/typing-svg)
2、Shields.io
开源项目地址： https://github.com/badges/shields
参考项目说明，复制如下代码，便可以在 GitHub 首页中展示您所需要的徽章图标。
在线demo地址：
Shields.io: Quality metadata badges for open source projects
我自己生成的徽章图标如下：第二个徽标图标外面嵌套了一个链接，点击后会跳转到我的个人网站。
[](https://chanjeunlam.github.io/)
3、Visitor Badge
开源项目地址： https://github.com/jwenjian/visitor-badge
这个图标和上面的徽章类似，但作用不同，这个徽标会实时改变，记录此页面被访问的次数。（注意修改 ID）
<div align="center">
<img src="https://visitor-badge.glitch.me/badge?page_id=sun0225SUN" />
</div>
或者用markdown语法：
4、Spotify
开源项目地址： https://github.com/kittinan/spotify-github-profile
参考项目说明，复制如下代码（仅供参考），便可以在 GitHub 首页中展示您最近在 spotify 中所听过的音乐。
<img src="https://spotify-github-profile.vercel.app/api/view?uid=31k53kp6hgkbovg72427dya5av44&cover_image=true&theme=default&show_offline=false&background_color=121212" />
5、Joke
开源项目地址： https://github.com/ABSphreak/readme-jokes
参考项目说明，复制如下代码，便可以在 GitHub 首页中展示一些关于 IT 行业的笑话。
<img src="https://readme-jokes.vercel.app/api?hideBorder&bgColor=%23121212" alt="Jokes Card" />
6、GitHub streak
开源项目地址： https://github.com/DenverCoder1/github-readme-streak-stats
参考项目说明，复制如下代码，便可以在 GitHub 首页中展示您连续提交代码的天数及贡献总数。（注意修改 ID）
<div align="center">
<img src="https://github-readme-streak-stats.herokuapp.com/?user=sun0225SUN&theme=dark&hide_border=true" />
</div>
或者用markdown语法：
[](https://git.io/streak-stats)
7、Metrics
工具网站： https://metrics.lecoq.io/
在浏览器中打开上方链接，在左侧选择您要展示的内容，复制右边的 Maekdown 代码即可。
<div align="center">
<img src="https://metrics.lecoq.io/sun0225SUN?template=classic&config.timezone=Asia%2FShanghai">
</div>
或者用markdown语法：
8、Quotes
开源项目地址： https://github.com/shravan20/github-readme-quotes
参考项目说明，复制如下代码，便可以在 GitHub 首页中随机展示一段名人名言。
<img src="https://quotes-github-readme.vercel.app/api?type=horizontal&theme=dark" />
9、Github Profile Trophy
开源项目地址： https://github.com/ryo-ma/github-profile-trophy
参考项目说明，复制如下代码，便可以在 GitHub 首页中展示您的奖杯成就（注意修改 ID）
<div align="center">
<img src="https://github-profile-trophy.vercel.app/?username=sun0225SUN&theme=gruvbox&row=1&column=7&no-frame=true&no-bg=true" />
</div>
或者用markdown语法：
[](https://github.com/ryo-ma/github-profile-trophy)
10、GitHub 统计卡片
开源项目地址： https://github.com/anuraghazra/github-readme-stats
参考项目说明，复制如下代码，便可以在 GitHub 首页中展示您的编码数据统计图（注意修改 ID）
<div align="center">
<img src="https://github-readme-stats-git-masterrstaa-rickstaa.vercel.app/api/top-langs/?username=sun0225SUN&hide_title=true&hide_border=true&layout=compact&langs_count=6&text_color=000&icon_color=fff&bg_color=0,52fa5a,4dfcff,c64dff&theme=graywhite" />
</div>
<div align="center">
<img height="137px" src="https://github-readme-stats-git-masterrstaa-rickstaa.vercel.app/api?username=sun0225SUN&hide_title=true&hide_border=true&show_icons=trueline_height=21&text_color=000&icon_color=000&bg_color=0,ea6161,ffc64d,fffc4d,52fa5a&theme=graywhite" />
</div>
或者用markdown语法：
[](https://github.com/anuraghazra/github-readme-stats)
11、GitHub Readme Activity Graph
开源项目地址： https://github.com/Ashutosh00710/github-readme-activity-graph
参考项目说明，复制如下代码，便可以在 GitHub 首页中展示 GitHub 活动统计图（注意修改 ID）
<div align="center">
<img src="https://activity-graph.herokuapp.com/graph?username=sun0225SUN&theme=xcode" />
</div>
或者用markdown语法：
[](https://github.com/sun0225SUN)
案例仓库
好的创意总是能博得人的关注，吸引人的眼球。
当我们在逛 GitHub 时，如果遇到了好看的主页，我们便可以直接把他扒下来，为我所用。
下面几个仓库收集了一些好看的 GitHub 主页，仅供大家欣赏和参考。
开源地址： https://github.com/EddieHubCommunity/awesome-github-profiles
开源地址： https://github.com/abhisheknaiidu/awesome-github-profile-readme
开源地址： https://github.com/eryajf/awesome-github-profile-readme-chinese
