Guthub 个人主页 (官方称呼是 profile)可以展示很多有用的信息,例如添加一个首页被访问次数的计数器,一个被 Star 与 Commit 的概览信息,以及各种技能标签,设备标签等,还可以利用 wakatime 显示你最近编码各类语言的使用时长,以及你最近 Steam 游戏游玩排行榜。
# 默认主页默认情况下,GitHub 个人主页会显示其仓库信息、提交信息,例如 Linux 之父 Linus 的 GitHub 主页 (opens new window) 长这样:
但是,这个主页是可以定制的。GitHub 支持这个功能,并且有相关的文档说明:Setting up and managing your GitHub profile - GitHub Docs (opens new window)。
例如有的长这样:Luo Lei (opens new window)
这就远比默认主页好看不少,令人印象深刻。
# 原理自定义主页很简单。我们首先在 GitHub 上新建一个仓库,仓库名和自己 Github 用户名相同,然后添加一个 README.md 自述文件,在该文件里添加信息即可。
例如,我创建的仓库:github.com/Peter-JXL/Peter-JXL (opens new window)
可以看到右上角有个提示:
Peter-JXL/Peter-JXL is a special repository.
Its README.md will appear on your public profile.
翻译:
这是一个特殊的仓库。
它的 README.md 会出现在你的首页中。
# 侧边栏在讲解如何定制之前,我们先关注下左侧也有个人信息展示:
这个可以直接在个人首页上,点击左侧的 Edit profile 进行编辑:
可以修改名字、签名(Bio)、公司、地点、邮箱、网站.......... 按需修改即可。
接下来讲讲如何定制右侧。
# 新建仓库新建一个同名仓库,并添加一个自述文件(README.md),确认:
GitHub 默认为此文件添加了一行字:
此时我们的首页也会跟着变:
# 如何定制接下来,你就可以通过修改 README.md 来定制主页了。由于是 Markdown 文件,扩展性很高,并且全面支持 emoji。
此外,人的创造力有限,如何短时间内拥有一个酷炫的个人主页呢?
答案是 ctrl+c,ctrl+v。看到好看的模板,可以直接 fork,修改下相关变量即可。
此外 GitHub 上也有不少人收集优秀案例:
awesome-github-profile-readme (opens new window) awesome-github-profiles (opens new window) beautify-github-profile (opens new window)接下来讲讲一些常见的信息展示。
# GitHub 统计卡片官网:github.com/anuraghazra/github-readme-stats (opens new window)
效果:
使用方法很简单,将如下代码复制到你的 markdown 文件中,更改 ?username= 的值为你的 GitHub 用户名:
![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra) 1
这个是默认样式,很简陋,可以配置显示图标、主题样式等,具体请看官网文档。
# GitHub 使用语言统计官网:github.com/anuraghazra/github-readme-stats (opens new window)
效果:
使用方法同上,复制如下代码,更改 ?username= 的值:
![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra) 1
同理,这个也可以配置主题和布局(参考文档)。
# Metrics 统计信息会展示 GitHub 上的一些统计信息,效果:
我们可以去官网演示下:输入你的 GitHub 用户名,然后点击按钮:
PS:这个项目也是开源在 GitHub 上的:github.com/lowlighter/metrics (opens new window),并且还有其他的功能(后续会讲到)。
就能看到效果如下:
这个配置起来稍微复杂一点点。根据官网文档 (opens new window),使用该功能的方式之一是使用 GitHub Action。
首先我们得创建一个 GitHub personal token,位置:右上角个人头像 → settings → Developer settings → Personal access tokens:
接下来就是勾选 scopes(可以理解为权限,这个就根据不同插件的要求来勾选了,具体得看文档):
然后会生成 token,只展示一次,注意好好保管:
然后去到个人项目里的 settings 页面,将刚刚生成的 token 作为一个密钥(先创建一个环境,名字为 production;然后再创建一个名字为 METRICS_TOKEN 的 secret,值为刚刚生成的 token):
第三步,生成一个 Action,其实 metrics 已经帮我们生成了一个 Action:
内容如下(建议自行核对下,例如我这边在第 9 行加了个 environment 变量):
name: Metricson: # Schedule updates (each hour) schedule: [{cron: "0 * * * *"}] # Lines below let you run workflow manually and on each commit workflow_dispatch: push: {branches: ["master", "main"]}jobs: github-metrics:runs-on: ubuntu-latestenvironment:name: productionpermissions: contents: writesteps: - uses: lowlighter/metrics@latestwith: # Your GitHub token # The following scopes are required: # - public_access (default scope) # The following additional scopes may be required: # - read:org (for organization related metrics) # - read:user (for user related data) # - read:packages (for some packages related data) # - repo (optional, if you want to include private repositories) token: ${{ secrets.METRICS_TOKEN }} # Options user: Peter-JXL template: classic base: header, activity, community, repositories, metadata config_timezone: Asia/Shanghai 1234567891011121314151617181920212223242526272829303132
等我们提交后,就会自动生成一个 svg 文件:
然后我们在自述文件里添加这个图片,例如 Markdown 格式如下(其实也可以用 HTML 格式,更灵活):
![Metrics](/github-metrics.svg) 1
此时的首页效果:
# GitHub 资料奖杯官网:github.com/ryo-ma/github-profile-trophy (opens new window)
效果:
使用方法同上,复制如下代码,更改 ?username= 的值:
![trophy](https://github-profile-trophy.vercel.app/?username=ryo-ma) 1
同理,这个也可以配置主题。
# GitHub 徽章为你的开源项目生成高质量小徽章图标,直接复制