如何创建 GitHub 个人资料 README 功能

2025-06-08

如何创建 GitHub 个人资料自述文件

特征

我们去年推出了 GitHub Profile READMEs,开发人员非常喜欢这个功能。

当我们推出 Profile README 时,我们发布了一个简短的剪辑,让您了解如何创建自己的 Profile README。

从那以后,我的直播里经常有人问我,想提供一些关于设置个人资料的模板、教程和想法。所以,我想写下一些想法,以及一些你可以使用的代码片段。

步骤 1. 创建您的个人资料自述文件

在我们了解如何创建个人资料自述文件之前,请先查看我的自述文件以获取灵感:

👋 大家好,我是 MishManners®™,又名 Hackathon Queen®™ 👋

mishmanners 游戏室 - 我实际游戏室设置的 gif

👋 大家好,我是科技和游戏社区的多才多艺人士。过去十年我一直在科技领域工作,在开发者宣传🥑、社区管理、市场营销和内容创作方面拥有丰富的经验。我喜欢创作有趣、引人入胜且真实的内容。我撰写了1700多篇文章,发表了380多场演讲,其中包括十多场主题演讲,并制作了200多个视频,内容涵盖技术主题、协作的重要性、社区建设以及未来的工作方式。我也是黑客马拉松社区中一位受人尊敬的领导者,曾在众多活动中获奖、组织和指导过。我是一位成功的企业家和创始人,共同创立了多家公司,其中包括一家人工智能公司。您经常会在活动现场、舞台上或直播中看到我!

是的,我的名字是 Michelle“MishManners”Mannering,现在我……

我将从我的个人资料中分享想法和代码片段。

要设置您的个人资料,您首先需要创建一个特殊的 README 仓库:

  1. 登录 GitHub 并转到您的个人资料
  2. 点击“存储库”
  3. 点击“新建”
  4. 使你的存储库名称与你的用户名相同
  5. 确保您的 repo 设置为“公共”
  6. 勾选“添加自述文件”复选框
  7. 点击“创建存储库”

特殊回购创建

您应该有一个很酷的绿色框,上面写着 repo“是一个特殊的存储库”。

特别回购

现在是时候定制和个性化您的个人资料自述文件了。

第 2 步:自定义您的个人资料

首先,你需要思考一下你想在个人资料中展示哪些内容。你想要动图还是图片?你想展示哪些信息?你想谈谈你自己、你的项目还是你的工作?

在开始创建个人资料之前,制定一个小计划通常是一个好主意——即使这个计划只是在你的脑海中!😏

添加图片和 gif

图片和 GIF 是为你的个人资料增添亮点的绝佳方式。添加它们也非常简单。现在你可以直接将 GIF 或图片拖放到 Markdown 中。

但是,如果您想对图像进行更多控制,请使用以下代码片段:

<a href="URL_REDIRECT" target="blank"><img align="center" src="URL_TO_YOUR_IMAGE" height="100" /></a>

每个元素的作用如下:

  • a href允许您链接到任何 URL。如果您不想链接到任何内容,可以删除href,或者将 URL 留空,以便稍后再返回。
  • target="blank"意味着您上面链接的 URL 将在新选项卡中打开。
  • img align="center"会使图片居中对齐。您也可以使用“左”或“右”。
  • src是可以找到您的图片的 URL。您可以将其设置为公开 URL,但我强烈建议您将图片上传到 GitHub,因为这样可以保证您的图片始终存在于该 URL 上。
  • height是图片的高度。您也可以使用“宽度”。高度或宽度有助于确保所有图片具有相同的尺寸。

复制并粘贴上面的代码片段,并添加图片或动图的 URL。现在,您的个人资料上就有一些很酷的图片了。

在哪里可以找到社交图标

说到酷炫的图片。你可能注意到很多人的个人资料上都有一些非常漂亮的社交图标。比如我的,就有很多时尚的社交媒体和游戏图标。

社交图标

在哪里可以找到这些?有几个地方可以查找:

添加 GitHub 统计信息

好吧,你有一些很棒的图片、链接和社交媒体图标。但是,你可能看到过那些炫酷的 GitHub 图表,那该怎么办呢?

统计数据

感谢开源开发者的贡献,这些设置起来非常简单。首先,是Anurag Hazra编写的GitHub README Stats

GitHub 徽标 anuraghazra / github-readme-stats

⚡ 为您的 GitHub Readmes 动态生成统计数据

GitHub 自述文件统计

GitHub 自述文件统计

在您的 README 上获取动态生成的 GitHub 统计数据!

测试通过 GitHub 贡献者 测试覆盖率 问题 GitHub 拉取请求 OpenSSF 记分卡

查看演示·报告错误·请求功能·常见问题解答·提出问题

法语·简体中文·西班牙语·德语·日本语·巴西葡萄牙语·意大利语· 한국어 ·荷兰· नेपाली · Türkçe

请注意,文档翻译可能已过时;如果可能,请尝试使用英文文档。

喜欢这个项目吗?请考虑捐款,帮助它不断改进!

给印度标志

您是否考虑通过捐款来支持我的项目?请不要捐款!

科罗曼德特快列车惨剧图片

印度最近遭遇了最严重的火车事故之一,您的帮助对于受此悲剧影响的人们来说将非常宝贵。

请访问此链接并进行小额捐赠,帮助有需要的人。小额捐赠意义重大。❤️

特征

README 文件包含大量关于设置统计数据、如何显示统计数据以及可用主题的信息。您可以选择使用 GitHub 统计数据、Pins、热门语言和每日统计数据。我添加了一个src控制图像宽度的选项:

<img src="https://github-readme-stats.vercel.app/api?username=YOUR_USERNAME&show_icons=true&theme=ADD_THEME_HERE" width="400">

如果您想将 GitHub 连续记录添加到您的个人资料中,请直接转到GitHub README Streak Stats

条纹

您可以直接在本网站输入您的用户名,然后您将收到可添加到您个人资料的代码片段。您可以查看代码库,了解更多关于如何自定义此代码片段的信息。

GitHub 徽标 DenverCoder1 / github-readme-streak-stats

🔥 保持动力,秀出你的贡献记录!🌟 在你的 GitHub 个人资料 README 上展示你的贡献总数、当前贡献记录和最长贡献记录

Github 自述文件连续统计


在您的 GitHub 个人资料 README 上显示您的总贡献、当前连续贡献和最长连续贡献

⚡ 快速设置

  1. 将下面的 markdown 复制粘贴到你的 GitHub 个人资料 README 中
  2. 将后面的值替换?user=为您的 GitHub 用户名
[![GitHub Streak](https://streak-stats.demolab.com/?user=DenverCoder1)](https://git.io/streak-stats)
Enter fullscreen mode Exit fullscreen mode
  1. 为该仓库加注星标😄

后续步骤

  • 查看下面的演示站点选项以了解可用的自定义。

  • 建议自行托管项目以获得更好的可靠性。有关更多详细信息,请参阅自行部署。

部署到 Heroku 部署到 Vercel

⚙ 演示站点

您可以在此处通过实时预览自定义您的 Streak Stats 卡。

https://streak-stats.demolab.com

演示站点

🔧 选项

user字段是唯一必填选项。所有其他字段均为可选。

如果theme指定了参数,则指定的任何颜色自定义都将应用于主题之上,覆盖主题的值。
















范围 细节 例子
user 显示统计信息的 GitHub 用户名 DenverCoder1





添加你的 GitHub Skyline

很多人在我的 GitHub 个人资料上看到过这个,并询问如何获取它:

前往GitHub Skyline 页面,输入你的用户名并选择年份。如果你愿意,可以点击右下角的眼睛图标关闭 UI:眼睛

然后使用你最喜欢的 gif 录制工具截取 GitHub Skyline 的短截图。如果你没有最喜欢的工具,可以看看我关于使用 ScreenToGif 的文章:

其他元素

关于自定义个人资料有很多很棒的教程。Supritha的这个教程有很多有趣的想法。你可以搜索更多精彩的想法。你可以在 DEV、YouTube、Twitter 等平台上找到帖子。

另一个很棒的方法就是浏览 GitHub,找到适合你个人主页的内容。浏览其他人的个人资料。如果你看到喜欢的内容,可以查看他们的 README 文件,看看他们是如何创作的。你可以做很多有创意的事情,只需开始行动即可。找到之后,你就可以继续添加精彩的元素。

如果你喜欢这篇文章,别忘了回顾一下上周的教程。我写了一篇简短的文章,讲解了如何在个人资料中添加操作。

您可能还想了解一下我几周前研究过的一些 GitHub 风格的 Markdown 更改:

鏂囩珷鏉ユ簮锛�https://dev.to/github/how-to-create-a-github-profile-readme-jha
PREV
如何为您的组织创建个人资料自述文件
NEXT
我是如何构建它的:VS Code 扩展的剖析