[教程] 给你的GitHub主页写一个爆炸的Readme吧

Posted 2021-03-31 吃寿司果的牛油猫

我! 膨! 胀! 了!

最近的生活真的是惊喜不断呀, 要是等一段时间我确认了不是我在做梦, 一定第一时间更新!

心情大好, 这周高产一次给大家送来第二篇推文。这应该是我目前写过最最最干货的文章了, 想装*的人一定要好好读完喔~

注: 这一篇纯操作教学, 并无原理解析, 如果需要的人可以自行谷歌Markdown或html相关内容。

这是一条分界线

今天, 我来教大家怎么写一个

高端 大气 上档次

的GitHub的Profile README

不多逼逼, 先上图 (我的个人GitHub)

以上是我当前的GitHub主页, 虽然不算特别美观, 不过功能上绝对能秒杀很大一部分了。这里, 我很不要脸的丢一个链接, 大家可以直接去看源码(或者看看我写的bugs):

https://github.com/Sushi6006

到这里, 肯定有人疑惑了:

那, GitHub的Profile README到底是个啥呢?

首先呢, GitHub是啥我就不解释了, 要是不知道这个平台的, 请面壁思过 (不知道的应该不会点进来看吧)。前段时间, 大概2020年7月中旬, GitHub发布了一个新的Feature, 叫做GitHub Profile, 简单来说就是给你自己的GitHub主页 (链接为 github.com/<你的用户名/) 添加一些自定义的显示。

所以说起来实在没什么特殊的, 就是一个Markdown文件嘛。但是, 既然是作为个人主页, 随随便便写几行字怎么能满足我的虚荣心呢? 那必须各种"高科技"耍起来呀

这是一条分界线

首先, 你得有一个GitHub Profile README

第一步

创建一个Profile Repo

如何创建Repo应该不用多说了。打开GitHub, 在首页上点击加号新建就好。当然, 也可以直接移步 github.com/new

Repository Name这里, 输入的是你的 GitHub ID, 输入正确的话你会看到一个很可爱的提示, 如图

下方, 确保你选择的是Public Repository

并且直接建立一个README (也可以之后添加, 如果你真的很闲很闲很闲的话)

创建好之后呢, 你的主页就会有一个Profile README了, 里面有简简单单的一句话:

就这样, 你的Profile README就建立成功了。

对, 这就是GitHub上那只小猫咪

第二步

编辑README内容

这时候呢, 就可以点击"编辑"来写一写你想放在首页上的东西。当你点击编辑的时候就会发现, GitHub灰常贴心的帮你写了一个template(如图)来帮你做一个好的开头 (真是一只贴心的小猫咪呢)

你可以uncomment掉这些内容, 删掉不相干的, 然后把这个template补充完整, 这样呢, 你就有了一个简单却优美还很高大上的Profile README了! 是不是特别特别的激动人心

这是一条分界线

1. GitHub Stats (GitHub数据)

2. Top Languages (最常使用的语言)

3. Recent Activities (近期动态)
   

GitHub Stats

我感觉我可以把某些Stats给隐藏一下了... 有那么一内内的小尴尬哈

从最简单的开始, 这个功能其实只是一张图片, 想加入这一个只需要一行代码:

![<your display name>'s github stats](https://github-readme-stats.vercel.app/api?username=<your username>)

你要做的就是把尖括号<>里面的东西替换掉就好了, 例如:

![SushiCat's github stats](https://github-readme-stats.vercel.app/api?username=Sushi6006)

不过其实如果你们看我Readme的源码会发现我在图片链接部分做了一些改变, 主要是当我之前了解到这个库的时候, 很多人有反馈说他炸了, 主要原因是瞬间太火了, 导致他的Vercel App炸了, 所以我是Fork了这位大佬的Repo并且新建了我自己的Vercel Instance, 这里不做教学

不过现在你们可以直接使用了, 因为好一段时间前已经被开发者修好了, 实在不放心的话也可以用我的链接 (替换圆括号里的内容), 记得替换最后的用户名喔~

https://github-readme-stats.sushi6006.vercel.app/api?username=Sushi6006

原作者以及他的Repo:

https://github.com/anuraghazra/github-readme-stats

大家如果想更多的自定义的方式, 一定一定要去看原链接(你不想要其他自定义也要去看, 我不能白嫖别人的工作成果), 还是有很多很多自定义方式的, 举个例子, 你可以省略一些数据, 也可以有不同的Themes:

Top Languages

我绝大多数时候都是在写文档可是真的一点错儿都没有啊... 我之前其实把HTML给Hide了, 但是后来闲的无聊想看看自己到底写了多少文档又放了出来...

这个其实与上面的GitHub Stats来自同一个Repo, 也是anuraghazara的作品。操作上一样简单, 只需要复制下面这行代码, 帖进去就好啦~ 记得替换尖括号里面的username呢

![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=<username>)

Recent Activities

(我其实已经想移除自己这一个部分了, 因为实在没内容...)

这个相对来说会稍微复杂那么一内内, 除了Markdown的编写, 我们还需要使用Yaml在GitHub Action里面编写一个简单的Workflow, 具体操作如下:

首先, 需要在你的README.md里面放入以下两行 (插入在你想放的地方)

<!--START_SECTION:activity--><!--END_SECTION:activity-->

到时候更新的内容就会出现在这两个comment之间

第二步呢, 我们需要创建一个yaml文件, 这将被用于Recent Activities的更新。

在Repo的根目录下面, 我们需要创建一个路径:

.github/workflows

我们会把这个yaml文件以及未来其他workflow都存在这一个路径下面。

然后在这个路径下创建一个文件叫做 update-readme.yml

创建workflow最后一步: 将以下的代码复制粘贴进你刚刚创建的update-readme.yml

name: Update README
on: schedule: - cron: '*/30 * * * *' workflow_dispatch:
jobs: build: runs-on: ubuntu-latest name: Update this repo's README with recent activity
 steps: - uses: actions/checkout@v2 - uses: jamesgeorge007/github-activity-readme@master env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

这一段代码里面没有任何需要改的内容, 请全文复制粘贴并保存 (如果你是在本地进行的这一段操作, 记得push到GitHub上)

那如何运行呢, 其实在第4-5行, 我们已经标明了每30分钟运行一次, 不过如果要是心急的话也可以手动运行: 移步到你的Repo里边, 有一个叫做Actions的功能页

点进去之后呢, 你应该能看到一个你刚刚建立的Workflow

这时候点击这个小蓝条边上的Run workflow

再点击Run workflow就好啦!

在这一顿瞎操作之后, 你的主页就会出现你近期的一些活动, 如果什么都没显示呢, 只能说明: 你啥也没做, 该为社区做一点贡献了盆友们。

附上原作者的链接:

https://github.com/jamesgeorge007/github-activity-readme

再我走完这些繁琐的流程之后呢, 原作者还在GitHub的Marketplace发布了他的Action, 你可以选择直接使用而不是走这么繁琐的一套流程, 链接:

https://github.com/marketplace/actions/github-activity-readme

这是一条分界线

篇幅原因, 这篇就先介绍到这里。这应该是迄今为止我写的最干货最有用的一篇推文了, 十分感谢@anuraghazra与@jamesgeorge007两位开发者提供的这么棒的Repo, 大家可以去他们的Repo里面了解到很多我没有提到的细节。这里再次附上他们的链接:

@anuraghazra: 

https://github.com/anuraghazra/

GitHub Readme Stats:

https://github.com/anuraghazra/github-readme-stats

@jamesgeorge007:

https://github.com/jamesgeorge007

GitHub Activity Readme:

https://github.com/jamesgeorge007/github-activity-readme

GitHub Activity Readme on Marketplace:

https://github.com/marketplace/actions/github-activity-readme

大家如果还有什么不理解的或者不确定怎么使用的, 或者是不知道Readme还能写一些什么的, 也欢迎参观我的GitHub Profile哈~

@Sushi6006: https://github.com/Sushi6006

这是一条分界线

写在最后: 这个GitHub Profile Readme确实给我带来了不少快乐, 但是能耍起来的绝对不止这些, 我将在下一篇(应该没这么快更了, 最近有点忙) 教给大家更多更硬核的操作, 包括了比如说"我一般什么时间写代码" 或者 "我的Spotify正在播放什么歌"等实时更新的信息。大家还是可以期待一下滴~ 创作不易, 还希望大家点赞+在看+转发一哈~ 谢谢~