Github自定义个人首页_github主页搭建

前言

GitHub 个人主页，官方称呼是 profile，是一个以 Markdown 脚本语言编写的个人 GitHub 展示主页面。Guthub 个人主页可以展示很多有用的信息，例如添加一个首页被访问次数的计数器，一个 Github 被 Star 与 Commit 的概览信息，以及各种技能标签，设备标签等，还可以利用 wakatime 显示你最近编码各类语言的使用时长，以及你最近 Steam 游戏游玩排行榜。本文主要介绍了如何创建 Github 个人主页以及美化个人主页，通过使用一些功能组件，提升主页功能性和视觉效果。

由于无法解决国内 GitHub API 访问困难的问题，文中的图片和动图均为静态，能够科学上网的同学可以尝试访问代码中的链接查看效果

创建Github主页

首先登陆 Github，创建一个新的公开仓库，仓库名和自己 Github 用户名相同，并且添加一个 README.md自述文件。

当创建的仓库名称与 Github 账户名称相同的时候，下面会弹出对话框，内容如下：

xxxx/xxxx is a ✨special ✨ repository that you can use to add a README.md to your GitHub profile. Make sure it’s public and initialize it with a README to get started.

同名仓库创建成功以后，点击 Github 右上角的头像，然后选择 “Your profile” 即可看到刚刚初始化的 README,点击 README.md 右上角的编辑图标即可进入编辑模式。在编辑程中想要实时预览，点击左上角的 preview 按钮即可。

Github 提供了这样一个特殊的 Markdown 文件以供我们 DIY 主页，扩展性很高，如果想要定制化更高的排版形式，还可以使用 HTML，CSS 语法。如果不熟悉 Markdown 语法，可以参考这篇文章一篇文章搞懂 Markdown，或者直接跳转到本文 Profile 编辑器部分，该部分介绍了一个可视化的编辑工具，省去了 Markdown 脚本编写，只需要勾选相应的选项即可自动生成 profile。

GitHub Stats Card（GitHub 统计卡片）

在 README 文件中添加下面的代码，可以得到关于仓库 Star 、提交、贡献等统计信息：

<div align="center"> <img src="https://github-readme-stats.vercel.app/api?username=yang-tian-hub&show_icons=true&theme=tokyonight" /> </div>
1

url 中 username 为你的 Github 用户名,详情可查看 Github readme stats 官方文档，其实 Github readme stats 这个开源项目是用来用于在个人 Github 页面上的 Readme 介绍中动态展示自己的 Github 活跃状态的，不过因为它本质上只是提供一个接口可以返回对应的图片，所以可以用到其他很多地方。

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

在 README 文件中添加下面的代码，可以得到使用编程语言对比统计图：

<div align="center"> <img src="https://github-readme-stats.vercel.app/api/top-langs/?username=yang-tian-hub" /> </div>
1

同样，具体的风格可查看上面的官方文档。

GitHub streak（GitHub 连续打卡）

在 README 中展示您连续提交代码的次数，官方文档

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

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

动态生成的活动图，用于显示您过去 31 天的 GitHub 活动，官方文档

<div align="center"> <img src="https://github-readme-activity-graph.vercel.app/graph?username=yang-tian-hub&theme=xcode" /> </div>
1

添加徽标

相比于纯文字，徽标显得更显眼，并且有助于提炼关键词，避免写一堆口水话。徽标的生成也很简单，在 shields.io 网站上填想要生成的内容就行了。

比如这个代码：

https://img.shields.io/badge/python-3.9-orange
1

可以生成下面的徽标：

也可以通过接口修改外观：

https://img.shields.io/badge/python-3.9-orange?style=for-the-badge&logo=python&logoColor=orange
1

首页计数器

这个很容易实现，只需要一个统计资源请求的后台服务即可，有很多第三方的服务可以使用,例如

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

page_id 后面替换为自己的 Github 用户名

<div align="center"> <img src="https://profile-counter.glitch.me/yang-tian-hub/count.svg" /> </div>
1

将 yang-tian-hub 替换为个人 Github 用户名

这些徽标会实时改变，记录 Github 个人主页被访问的次数

打字特效

Readme Typing SVG，可以生成循环打字的动图,如下：

<div align="center"> <img src="https://readme-typing-svg.herokuapp.com/?lines=今日事，今日毕!;活着就是一个个无可替代的;日子的累积;小杨同学祝您今天愉快!&center=true&font=Roboto&size=27" /></div>
1

<div align="center"> <a href="https://blog.ytadx.cn/"> <img src="https://readme-typing-svg.herokuapp.com/?lines=今日事，今日毕!;活着就是一个个无可替代的;日子的累积;小杨同学祝您今天愉快!&center=true&size=27"> </a> </div>
1

全面支持 emoji

下面内容可以直接复制来用，emoji 不是图片，所以可以任意字号展示,这里只是一部分，并不是全部：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/575819