自定义github个人主页:程序员最好的自我介绍

282 阅读3分钟

自定义github个人主页:程序员最好的自我介绍

前记

少年,你也想拥有让人耳目一新的开场特效吗?众所周知github作为全球程序员最大的“交友平台”,每天都会有超级多的大佬在上面进行交流,当我们在简历上贴上自己的github账户,很多面试官都会去打开看一看,github上可以记录着你的学习痕迹,让你的学习曲线有迹可循。

实现效果

  • 展示代码统计信息的

image.png

  • 自动跟踪自己近期博客、项目动态的

image.png

  • 可以跟访客下五子棋的

image.png

GitHub 在2020年就推出了这种自定义首页的功能,这大概是作为程序员最浪漫的向世界介绍自己的方式了

实现方法

创建仓库

第一步,新建一个仓库,特殊的是仓库名必须和用户名完全一致。填写完成之后会出现一个绿框,说明这个仓库很特殊,里面的 README 文件会作为自定义首页使用。

image.png 仓库必须设置为公共可见的(Public),并且勾选添加一个 README 文件。创建完成后进入仓库,点击下方README文件旁边的灰色小铅笔图标,正式进入编辑首页文件。

image.png

书写

书写自定义首页可以同时支持 MarkdownHTML 方式,也就是说可以两种方式混着用。

  • Markdown 的例子,左右两边分别是编辑和预览模式:

image.png

  • HTML 的方式大家有兴趣的话自行去体验吧。

统计信息

README文件中添加下面的代码,就可以获得关于仓库star、提交、贡献等统计信息:

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

只需要把username=修改成自己的Github名称就行了,就能得到类似这样子的卡片:

image.png

还可以通过接口对卡片细节进行定制,比如想要显示图标、radical 主题的卡片,代码修改为:

![Dusai's GitHub stats](https://github-readme-stats.vercel.app/api?username=???&show_icons=true&theme=radical)

结果如下:

image.png

更多的个性配置,查看github-read-stats文档

image.png

显示徽标

相对于纯文字,徽标显得更加的显眼,那种很吸睛的感觉,更有助于提炼关键词,避免写一堆口水话。类似于这种小效果:

image.png

徽标的生成其实很简单,在shield.io网站上填上想要生成的内容就行了。

![](https://img.shields.io/badge/javascript-3.9-orange)

像生成这种:

还可以通过接口修改徽标的外观:

![](https://img.shields.io/badge/python-3.9-orange?style=for-the-badge&logo=python&logoColor=orange)

像这种:

动态更新

展示博客近期文章、代码统计这类动态追踪的功能,就得稍微研究下 Github Actions 了。首先进入 Waka Time网站,用 Github 账号登录,并在setting/account页面获取密钥(Secret API Key)

image.png

接着回到 Github 自定义首页的仓库,在 Settings/Secrets/ 中创建仓库密钥(Repository secrets),名称是 WAKATIME_API_KEY ,内容则是上一步取得的 Secret API Key:

image.png

接着打开仓库的 Actions 新建一个 .yml 文件,清空初始内容并写入:

name: Waka Readme

on:
  workflow_dispatch:
  schedule:
    # Runs at 12am UTC
    - cron: "0 0 * * *"

jobs:
  update-readme:
    name: Update this repo's README
    runs-on: ubuntu-latest
    steps:
      - uses: athul/waka-readme@master
        with:
          WAKATIME_API_KEY: ${{ secrets.WAKATIME_API_KEY }}

这段的意思就是设置了一个定时任务,每天 UTC 时间12点,WakaTime 将动态更新你的首页 README 文件。 最后,在 README 文件中想要插入代码统计的位置,添加一个标志位:

<!--START_SECTION:waka-->
<!--END_SECTION:waka-->

这就大功告成了。显示结果大致像这样:

image.png

总结

以上就是GitHub自定义首页的基本玩法了,如果想整些更花里胡哨的,例如一开始的下象棋,可以参考awesome-github-profile-readme