Github自定义首页

Github自定义首页

原文地址：https://zhuanlan.zhihu.com/p/180550738

今天摸鱼之余，看到某个高中生的 GitHub 首页，让人眼前一亮

Google 一番，原来 GitHub 在上个月就推出了自定义首页这个功能。并且结合 GitHub Action，可以有非常多的玩法，甚至可以显示 Twitter 、微博以及豆瓣的相关动态。

下面是 Profile 的制作教程。

创建 Repo

首先新建一个仓库，仓库的名称需要和用户名一致。如果填写正确，会出现绿色的提示框，提示你正在创建一个 GitHub profile。

注意将仓库仓库设置为 Public，并选择初始化一个 README 文件，点击 Create repository 按钮创建仓库。

创建好后，页面会自动跳转到仓库主页，点击右上角的 Edit README 开始制作。

定制页面

内容方面，GitHub 给出了默认的欢迎内容，同时提供了一些建议和提示，这一部分默认被注释掉了。

### Hi there  
<br/><!--**Mayandev/Mayandev** is a ✨ _special_ ✨ repository because its `README.md` (this file) appears on your GitHub profile.
<br/>Here are some ideas to get you started:
<br/>-   I’m currently working on ...<br/>-   I’m currently learning ...<br/>-   I’m looking to collaborate on ...<br/>-   I’m looking for help with ...<br/>-   Ask me about ...<br/>-   How to reach me: ...<br/>-   Pronouns: ...<br/>- ⚡ Fun fact: ...<br/>-->

你可以删除这个注释，或者按照这个模板来进行编写相关的介绍。

另外也可选择一些更加个性化的展示方式。

仓库统计信息

在 README 中加入下面的代码，可以清晰明了的展示自己仓库统计信息。

![](https://github-readme-stats.vercel.app/api?username=mayandev)

注意将 username 后面的参数改为自己的用户名。上面的代码会渲染出类似下面的图片：

传入 &theme=dark 参数会显示暗色的图片。

![](https://github-readme-stats.vercel.app/api?username=mayandev&theme=dark)

如果你熟悉 Markdown[1] 语法或者 HTML 的话，你还可以再此基础上进行样式上的设置。

使用徽标

使用徽标可以使得主页更加吸引眼球，可以在 http://shield.io[2] 搜索找到你想要的图标。

徽标相关可以参考 @moshfiqrony[3] 的个人介绍。

代码统计

代码统计需要运行 GitHub Action，GitHub 的相关教程可以先参考阮一峰老师的 GitHub Actions 入门教程[4]。

首先打开WakaTime[5] 网站，使用 GitHub 登录，在首页会生成一个密钥。然后，将这个密钥储存到当前仓库的 Settings/Secrets 里面，我这里命名为 WAKATIME_API_KEY。

然后新建一个 Action，粘贴下面的代码：

name: WakaTime Readme

on:
  push:
    branches:
      - master
  schedule:
    - cron: '0 19 * * *'

jobs:
  update-readme:
    runs-on: ubuntu-latest
    steps:
      - uses: athul/waka-readme@master
        with:
          WAKATIME_API_KEY: ${{ secrets.WAKATIME_API_KEY }}

创建好后，GitHub 会根据 cron 配置的定时任务，定时运行上面的 Action，更新 README。

更多

更多玩法，你在 awesome-github-profile-readme[6] 仓库中找到 Profile 的更多玩法。

例如有的人在首页设置了一个游戏，其他用户通过提交 issue 参与游戏。也有人在首页定时更新自己的博客以及社交推送等等

以上是 GitHub Profile 的相关分享，希望对你有帮助。

完

参考资料

[1]

Markdown: https://guides.github.com/features/mastering-markdown/

[2]

shield.io: https://shields.io/

[3]

@moshfiqrony: https://github.com/moshfiqrony/moshfiqrony

[4]

GitHub Actions 入门教程: http://www.ruanyifeng.com/blog/2019/09/getting-started-with-github-actions.html

[5]

WakaTime: https://wakatime.com/

[6]

with-github-actions.html)*

[5]

WakaTime: https://wakatime.com/

[6]

awesome-github-profile-readme: https://github.com/abhisheknaii