打造个性化的GitHub首页

本文最后更新于：2024年3月20日中午

一、前言

Github 首页美化教程

这是之前写过的一篇文章了，现在把这篇文章发表在个人博客上，希望各位大佬可以多多支持。

相信很多童靴在敲代码之余，都致力于美化自身所处的环境。比如对IDE的美化，对电脑壁纸的精挑细选等等。

GitHub（Gayhub）相信大多数童靴（程序基）都不陌生，GitHub用户的个人主页是这样的。

然鹅…

我们在GitHub上见到过更炫酷的主页！

想拥有吗？

那么正式进入我们今天的教程部分。

二、秘密仓库

其实DIY Github 的首页很简单，我们只需要新建一个仓库名和自己 Github 用户名相同的仓库并且添加一个 README.md自述文件即可。

理论存在，实践开始。（新建一个同名仓库，并添加一个自述文件后确认）

新建同名仓库

GitHub默认为此文件添加了demo，我们编辑此文件，即可开启自己的DIY之路了！

编辑文件

变化前

变化后

三、炫酷一点

Github提供了这样一个特殊的markdown文件以供我们DIY主页，扩展性很高，如果您熟悉HTML，CSS以及MarkDown 语法的话。

可是。。。毕竟个人的创造力有限，如何能在短时间拥有一个酷炫的个人主页呢！

emmm，有了，ctrl+c ctrl+v

以下展示内容基本上把我的Github ID换成你自己的就可以了， sun0225SUN –> your id

1、Metrics（GitHub 信息统计）

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

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

代码格式可以是markdown语法，也可以是HTML语法，但HTML的扩展性更强一点，建议采用HTML语法格式书写。

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

其实这个网站能做的还有很多，不只这一个，我会在后续的教程中展示这个网站amazing的地方

2、GitHub Stats Card（GitHub 统计卡片）

在您的自述文件中获取动态生成的 GitHub 统计信息 –> 传送门

详情可以看上面的官方文档，在README.md添加如下代码，查看展示demo

<div align="center"> <img height="137px" src="https://github-readme-stats.vercel.app/api?username=waahah&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>

3、Most used languages（GitHub 使用语言统计）

在您的自述文件中添加使用编程语言对比统计图 –> 传送门

<div align="center"> <img src="https://github-readme-stats.vercel.app/api/top-langs/?username=waahah&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>

4、Github Profile Trophy（GitHub 资料奖杯）

添加奖杯信息–> 传送门

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

5、Shields（GitHub 徽章）

为你的开源项目生成高质量小徽章图标，直接复制链接使用。 –> 传送门

<span > <img src="https://img.shields.io/badge/-HTML5-E34F26?style=flat-square&logo=html5&logoColor=white" /> <img src="https://img.shields.io/badge/-CSS3-1572B6?style=flat-square&logo=css3" /> <img src="https://img.shields.io/badge/-JavaScript-oringe?style=flat-square&logo=javascript" /> </span>

6、Visitor Badge（GitHub 访客徽章）

这个徽章会实时改变，记录此页面被访问的次数。–>传送门

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

7、GitHub Readme Activity Graph （GitHub 活动统计图）

动态生成的活动图，用于显示您过去 31 天的 GitHub 活动。 –> 传送门

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

8、GitHub streak（GitHub 连续打卡）

在 README 中展示您连续提交代码的次数。 –> 传送门

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

9、社交统计

在 README 中展示你在一些流行的网站的数据。 –> 传送门

1	`<div align="center"> <img src="https://stats.justsong.cn/api/csdn?id=weixin_50915462"> </div>`

10、打字特效

嗯。。。对，是种循环打字的效果，很炫酷，–> 传送门

<h1 align="center"> <a href="https://sunguoqi.com/"> <img src="https://readme-typing-svg.herokuapp.com/?lines=console.log(%22Hello%2C%20World!%22);小孙同学祝您今天愉快!&center=true&size=27"> </a> </h1>