GitHub 个人页的README文件 GitHub Profile

GitHub-Profile-GitHub个人首页

Posted by cl9000 on October 15, 2020

GitHub 个人页的README文件

当你尝试去创建一个与你Github用户名相同的仓库时,会发现这是Github为你预留的特殊仓库,用来作为你的Github Profile,这个仓库就相当于一个可以显示在你Github个人页的README文件。

img-gprpf-20201106.png

本文会帮助你美化你的Github Profile,让它展示更多有用的信息。
img-gh-profile-20201106.png

例如添加一个首页被访问次数的计数器,一个Github被Star与Commit的概览信息,以及各种技能标签,设备标签等。还可以利用wakatime显示你最近编码各类语言的使用时长,以及你最近Steam游戏游玩排行榜

首页计数器

这个很容易实现,只需要一个统计资源请求的后台服务即可,有很多第三方的服务可以使用,page_id后面替换为自己的Github用户名。

![](https://visitor-badge.glitch.me/badge?page_id=cl9000.readme)

参考另位博友自己搭建的,是使用下方。(@后面替换为自己的Github用户名)
![](http://antzuhl.cn:4000/get/@antzuhl.readme)

Github信息概览

info

这个也是使用现有的开源github项目 github-readme-stats,根据url来配置卡片信息。

![info](https://github-readme-stats.vercel.app/api?username=cl9000&show_icons=true&count_private=true&hide=prs&theme=default_repocard)

url中username为你的Github用户名,theme为主题配置,支持的主题样式丰富,如下:
dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontrast, dracula

技能 && 设备卡片

这是Github很多开源仓库都会使用的东西,其本质也是第三方服务后台动态生成的图片,类似:
访客徽章

simpleicons提供了很多的icon,几乎可以找到所以的程序语言,设备,IDE,开源产品的icon。
img-simpleicons-20201106.png

可参阅 simpleiconsshields.io 配合使用展现不同样式,如下:

  • linux卡片

[![](https://img.shields.io/badge/OS-Arch%20Linux-33aadd?style=flat-square&logo=arch-linux&logoColor=ffffff)](https://www.archlinux.org/)

  • mac卡片

[![](https://img.shields.io/badge/macOS-Hackintosh-292e33?style=flat-square&logo=apple&logoColor=ffffff)](https://www.tonymacx86.com/)

  • 手机设备

[![](https://img.shields.io/badge/Honor-V30-f5010c?style=flat-square&logo=huawei&logoColor=ffffff)](https://www.apple.com/)

  • 程序语言

[![](https://img.shields.io/badge/-Java-007396?style=flat-square&logo=java&logoColor=ffffff)](https://reactjs.org/)

  • 游戏

[![](https://img.shields.io/badge/Steam-171a21?style=flat-square&logo=steam&logoColor=ffffff)](https://steamcommunity.com/id/antzuhl)

编程 && 游戏时长统计

主要利用了 Github Action 的机制,触发定时任务去 Wakatime平台 拉取数据进行统计,而 Wakatime 平台提供了 JetBrains全家桶、 VsCode、 Chrome的插件,用于统计用户的编程时长数据。

  1. 创建一个Github Gist(下方): https://gist.github.com/
  2. 新建一个拥有gist空间权限的Token,保存它 https://github.com/settings/tokens/new
  3. 创建一个WakaTime的账号 https://wakatime.com/signup
  4. 在你的WakaTime账号设置中选择公开你的编码活动 https://wakatime.com/settings/profile
    img-wakatim-20201106.png
  5. 在你WakaTime账户设置中创建Api-Key,并且复制它 https://wakatime.com/settings/api-key
  6. Fork这个仓库 https://github.com/matchai/waka-box
  7. 编辑 .github/workflows/schedule.yml 文件,将其中的GIST_ID设置为你创建的gist页面的url
  8. 在你仓库的安全设置中添加下面两个环境变量 Settings > Secrets
    • GH_TOKEN: 第2步的 gist token
    • WAKATIME_API_KEY: 第5步中的 wakatime Api-key

这样就算是完成了,如果你有 Github Action知识,并且懂 cron 表达式,可以看看这个仓库的action脚本。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
name: Update gist with WakaTime stats
on:
schedule:
- cron: "0 0 * * *"
jobs:
update-gist:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@master
- name: Update gist
uses: matchai/waka-box@master
env:
GH_TOKEN: ${{ secrets.GH_TOKEN }}
GIST_ID: 968220c97e8da1d047a9a480fa432e54
WAKATIME_API_KEY: ${{ secrets.WAKATIME_API_KEY }}

其中 cron 就是该脚本执行的时间,每个小时的0秒0分,也就是指每小时执行一次。

你可以将这个gist的script文件添加到你的 Github Profile 中,用来在首页显示你的编码时间。

统计 Steam 游戏时间也是类似,不过没有 Wakatime 这样的平台去让我们拉取数据,但是我们可以直接去 Steam 拉取。

可以参考这个仓库 https://github.com/journey-ad/steam-go

代码片段,可以看到 STEAM_API_KEYSTEAM_ID 也是需要你设置到仓库环境变量中去的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
package main

import (
true"context"
true"fmt"
true"os"
true"strconv"

truesteam "github.com/YouEclipse/steam-go/pkg"
)

func main() {
truesteamClient := steam.NewClient(os.Getenv("STEAM_API_KEY"), nil)
truesteamID, _ := strconv.ParseUint(os.Getenv("STEAM_ID"), 10, 64)
truectx := context.Background()
trueparams := &steam.GetOwnedGamesParams{
truetrueSteamID: steamID,
truetrueIncludeAppInfo: true,
truetrueIncludePlayedFreeGames: true,
true}

trueresult, err := steamClient.IPlayerService.GetOwnedGames(ctx, params)
trueif err != nil {
truetruepanic(err)
true}

truefmt.Println(result)
}

本质都是类似于爬虫,利用 Github Action 来达到触发的效果。

这样就算是完成了,还有更多玩法可以自己探索。

关于访问Gist入口 && 无法访问Gist解决方案

  1. 登录GitHub后,菜单中 your gists
  2. 修改hosts文件,新增以下:
1
2
3
192.30.253.113  github.com
192.30.253.118 gist.github.com
192.30.253.119 gist.github.com

ref

http://antzuhl.cn/archives/githubprofile



支付宝打赏 微信打赏

赞赏一下 坚持原创技术分享,您的支持将鼓励我继续创作!