创建杀手级 GitHub 个人资料自述文件（第一部分）

2025-05-24

创建杀手级 GitHub 个人资料自述文件（第一部分）

README 文件。就是那些在创建新项目或创建 GitHub 仓库时创建的 Markdown 文件。也许你是一位开发者，会在每个项目完成后更新 README 文件。又或许你是一位开发者，会将样板内容保留在 README 文件中。

自 2020 年 7 月起，GitHub 现在允许开发人员创建个人资料级别的存储库，并使用 README 为他们的页面添加一些个性。

我已经知道这件事几个月了，但直到最近才开始深入研究。而且，嗯......我可能有点过头了。

自述文件 Gif

在这里查看我的 GitHub 个人资料。

我相信，许多开发人员在他们的个人资料中注入了一堆“酷”的小部件和徽章，而没有意识到他们的 GitHub 个人资料非常像一个作品集——它应该突出显示你的独特之处。

网上有很多文章和教程（其中一些链接在本文各处），教你如何向README.md文件添加基本信息——图片、徽章和统计数据。但我想要一些更个性化的东西；我想要一个独特的个人资料，可以完成以下几件事：

  1. 为访客提供找到我的其他社交渠道的途径
  2. 突出显示我最近发表的文章
  3. 以视觉上赏心悦目的方式显示固定存储库
  4. 允许访问者查看我的一些 GitHub 统计数据
  5. 为感兴趣的人或未来的雇主列出我的一些技能
  6. 用一些更有趣的东西来结束这次体验；引用我构建的 API。

我鼓励你列一个清单——你想在你的个人资料里写些什么？如何才能凸显你的独特之处？

在这个由两部分组成的系列文章中，我将逐步介绍如何创建我的个人资料，以便您可以使自己的README.md文件脱颖而出。

理解限制

如果你对 Markdown 文件还不熟悉，那么了解我们将要做的事情的总体思路就很重要。毕竟，不了解其中的局限性就无法提供解决方案。

我知道我需要在 README 中添加一些基本的内容和信息——比如图片、标题、点击后跳转的徽章，甚至还有显示 GitHub 统计信息的图表和小工具。网上有很多教程，实现这些功能相对容易。

但我也知道我希望我的 README 文件是动态的；我希望它能自动获取我最近的博客文章，并显示我构建的 Office API 中的引用。这就是事情变得棘手的地方。Markdown 文件无法自行发出 API 请求，那么我该如何动态地注入内容呢？

GitHub Actions。这些内置的仓库管道允许开发人员自动化任务和工作流程，我用它来获取博客文章并从我的 API 中请求随机报价。这些工作流程可以触发文件或函数来获取信息，并将内容注入我的 README 文件。我指定了一个 cron 作业，每小时运行一次该工作流程，这样我的个人资料就能始终保持最新文章，访客每次访问我的个人资料时都能获得最新的报价。

我们将在下一篇文章中讨论此实现中的一些“陷阱”，但我希望这可以让您大致了解我们如何解决这个问题。

创建您的个人资料存储库

前往GitHub并创建一个与您的 GitHub 用户名同名的新仓库。我的用户名是braydoncoyer，所以我创建了一个名为 的仓库braydoncoyer。如果您操作正确，GitHub 将显示一条秘密消息（如下图所示）。

我将存储库访问权限设置为私有，直到我准备好让全世界看到它，但如果您愿意，可以随意将其公开。

README.md我还用和文件初始化了存储库.gitignore。

注意：下面的截图报错，因为我已经创建了一个配置文件级别的仓库。你应该不会看到这个错误。另外，如果你不知道的话，GitHub 最近推出了暗黑模式。

创建 GitHub 仓库

创建存储库后，我将其克隆下来并在我最喜欢的编辑器中打开它。

创建 README 模板

虽然我用一个文件初始化了仓库README.md，但我很快发现我需要在一个单独的文件中编辑内容，并将其用作模板——一个静态内容的框架，用于构建最终README.md文件。这样做有几个原因，但其中最重要的两个是：

  1. 最终，GitHub Actions 工作流程将触发使用模板的文件，注入动态内容，然后获取整个模板并将其粘贴到 README 文件中。
  2. 如果您直接编辑README.md文件，动态注入发挥作用后，您将会遇到大量合并冲突。

话虽如此，在我的存储库的根目录下，我创建了一个名为 的新文件README.template.md。这是我将手动编辑的文件。

横幅图片

我决定让访客看到一个漂亮的横幅图像，当访客点击该图像时，该图像会将访客引导至我的投资组合。

我打开 Illustrator，创建了一个 1500x500 的文档，并根据我的个人风格设计了横幅图像。

回到我的存储库，我创建了一个名为的新根级目录assets，将图像放在文件夹中并在README.template.md文件中使用它。

[![Braydon's GitHub Banner](./assets/GitHubHeader.png)](https://braydoncoyer.dev)
Enter fullscreen mode Exit fullscreen mode

社交徽章

我使用 GitHub 个人资料 README 的目标之一是将访问者引导到我的其他社交网络（特别是 Twitter、LinkedIn 和 CodePen）。

为了做到这一点，我确保在个人资料顶部列出社交徽章，以便它是访问者首先看到的内容之一。

为了创建这些徽章，我使用了shields.io并编辑了徽章文本、徽章颜色和目标网址。

我认为跟踪我的个人资料访问也很有趣，所以我创建了一个徽章并将其列在社交徽章旁边。

要创建您自己的访问徽章，请复制下面的“访问徽章”标记内容并更改 URL 中的存储库目标（“/visits/”之后的所有内容）。

[![Visits Badge](https://badges.pufler.dev/visits/braydoncoyer/braydoncoyer)](https:braydoncoyer.dev)
[![Twitter Badge](https://img.shields.io/badge/Twitter-Profile-informational?style=flat&logo=twitter&logoColor=white&color=1CA2F1)](https://twitter.com/BraydonCoyer)
[![LinkedIn Badge](https://img.shields.io/badge/LinkedIn-Profile-informational?style=flat&logo=linkedin&logoColor=white&color=0D76A8)](https://www.linkedin.com/in/braydon-coyer/)
[![CodePen Badge](https://img.shields.io/badge/CodePen-Profile-informational?style=flat&logo=codepen&logoColor=white&color=black)](https://codepen.io/braydoncoyer)
Enter fullscreen mode Exit fullscreen mode

引言部分

信不信由你，横幅图片和社交徽章根本不占空间。既然访客可以选择通过其他途径查看我的其他社交网络，他们就需要了解一些关于我的信息。

我只写了一小段简介。如果访客想了解更多关于我的信息，可以在我的作品集网站或领英主页上找到。不要犯信息量过大的错误，以免访客感到不知所措。

在介绍的最后，我向访问者发出号召，让他们访问我的作品集网站——同样，我不想让访问者感到不知所措，而是提供足够的关于我的信息，并为他们提供一种方式，让他们可以根据需要阅读更多内容。

最新博客文章

接下来，我希望访客能够看到我最新的博客文章。这需要动态更新，并定期更新。这项繁琐的工作最终将委托给一个单独的文件，GitHub Action 工作流程将运行该文件，但为了让该文件知道将内容注入到哪里，需要在模板中遵循一定的模式。

目前，我将以下内容放在博客文章部分：

<!-- BLOG-POST-LIST:START -->

<!-- BLOG-POST-LIST:END -->
Enter fullscreen mode Exit fullscreen mode

为了将我的博客 feed 注入README.md文件，我遵循了Darsh Shah 的文章《如何使用 GitHub Actions 将最近发布的文章添加到 GitHub 个人资料自述文件》🤖

固定存储库和 GitHub 统计信息

除了我最近的博客文章之外，我还想将焦点转移到我的其他几个代码库上，并展示一些统计数据。为此，我使用了 Anurag Hazra 的GitHub ReadMe Stats——从他的 API 中检索的内容可以封装在<img>标签中，并以多种方式设置样式。该文档简单易懂，推荐您查看！

<!-- Pinned Repositories -- >

<a href="https://github.com/braydoncoyer/tailwindcss-v2-dark-mode-template">
  <img align="center" style="margin:1rem 0.5rem" src="https://github-readme-stats.vercel.app/api/pin/?username=braydoncoyer&repo=tailwindcss-v2-dark-mode-template&title_color=ffffff&text_color=c9cacc&icon_color=4AB197&bg_color=1A2B34" />
</a>

<br>

<a href="https://github.com/braydoncoyer/ng-limeade">
  <img align="center" style="margin:0.5rem" src="https://github-readme-stats.vercel.app/api/pin/?username=braydoncoyer&repo=ng-limeade&title_color=ffffff&text_color=c9cacc&icon_color=4AB197&bg_color=1A2B34" />
</a>

<a href="https://github.com/braydoncoyer/officeapi">
  <img align="center" style="margin:0.5rem" src="https://github-readme-stats.vercel.app/api/pin/?username=braydoncoyer&repo=officeapi&title_color=ffffff&text_color=c9cacc&icon_color=4AB197&bg_color=1A2B34" />
</a>

<!-- GitHub Stats -- >

<a href="https://github.com/braydoncoyer">
  <img align="center" style="margin:0.5rem" src="https://github-readme-stats.vercel.app/api/top-langs/?username=braydoncoyer&hide=html,css&title_color=ffffff&text_color=c9cacc&icon_color=4AB197&bg_color=1A2B34" />
</a>

<a href="https://github.com/braydoncoyer">
  <img align="center" style="margin:0.5rem" src="https://github-readme-stats.vercel.app/api?username=braydoncoyer&show_icons=true&line_height=27&count_private=true&title_color=ffffff&text_color=c9cacc&icon_color=4AB097&bg_color=1A2B34" alt="Braydon's GitHub Stats" />
</a>
Enter fullscreen mode Exit fullscreen mode

技能

接下来，我需要找到一种方式来向访客展示我作为一名全栈 Web 开发者的技能。我不想把我的技能放在无序列表中；这会占用页面的大量空间，而且无序列表也不太美观。

相反，我使用了来自shield.io的徽章并在页面上以内联方式显示徽章，使用与横幅图像相同的背景颜色来保持整个配置文件的设计一致性。

因为我想列出很多技能，所以我决定默认显示一些核心技能，并可选择使用<details>标签显示更多技能。

[](https://img.shields.io/badge/Code-Angular-informational?style=flat&logo=angular&logoColor=white&color=4AB197)
![](https://img.shields.io/badge/Code-Ionic-informational?style=flat&logo=ionic&logoColor=white&color=4AB197)
![](https://img.shields.io/badge/Code-React-informational?style=flat&logo=react&logoColor=white&color=4AB197)
...

<details>
<summary>More Skills</summary>

[](https://img.shields.io/badge/Style-CSS-informational?style=flat&logo=css3&logoColor=white&color=4AB197)
![](https://img.shields.io/badge/Style-Tailwind-informational?style=flat&logo=Tailwind-CSS&logoColor=white&color=4AB197)
![](https://img.shields.io/badge/Style-Sass-informational?style=flat&logo=Sass&logoColor=white&color=4AB197)
![](https://img.shields.io/badge/Style-Stylus-informational?style=flat&logo=Stylus&logoColor=white&color=4AB197)
...
</details>
Enter fullscreen mode Exit fullscreen mode

要查看我在文件中使用的徽章完整列表README.template.md，请单击此处。

办公室引言

在访客离开我的个人资料之前，我希望以一些独特且个性化的内容来结束他们的体验。与博客文章部分非常相似，GitHub Action 工作流会运行一个脚本，该脚本会在内容中寻找规律README.template.md并注入随机的引言。

我在 Office 引用部分中放置了以下模式：

<p>{office_quote}</p>

<p>{office_character}</p>

Check back at the top of the hour for a new quote!
Enter fullscreen mode Exit fullscreen mode

这样，静态内容就完整了，并且满足了我在个人资料中列出的目标。

结论

在下一篇文章中，我将向您展示如何创建我的 GitHub Action 工作流并将动态内容注入到README.md文件中！

感谢阅读！如果你喜欢这篇文章，并且想了解更多类似的内容，请订阅我的新闻通讯，并在Twitter上关注我！

daily.dev在每个新标签页发布最棒的编程新闻。我们将为您筛选数百个优质资源，助您掌控未来。
每日海报

文章来源：https://dev.to/dailydotdev/creating-a-killer-github-profile-readme-part-1-33nm
Devto 翻译
PREV
5 个简洁的 JavaScript 技巧
NEXT
每个初学者都必须尝试的 5 个基于 React 的项目