给自己弄一个酷酷的Github主页吧

最近看微信上有技术公众号在发关于Github主页自定义的功能的推文

就索性看了看，也自己动手搞了搞，毕竟如此酷炫！

下面简单介绍一下，步骤非常简单：

1. 创建一个和自己Github同名的仓库

这个同名仓库是一个非常具有魔力的哦，参看下面的图片。注意需要使得这个仓库是public状态，并且初始化一个README文件

2. 在README文件中使用markdown语法设计创造主页内容

和其他项目的readme类似，这里需要使用markdown语法来写内容，可以设计一些非常好玩的东西，尽情发挥自己的想象力。

 

在介绍完基本步骤之后，来给大家介绍几个比较有趣的东西，丰富自己的主页内容。

1.  制作自己喜爱的徽章(Badge)

网页：https://shields.io/

这个网站提供了很多徽章的类型，可以自己根据情况选择，当然也可以自定义徽章。主要包括了：构建、代码覆盖率、分析
闲谈，聊天、依赖关系、大小、下载等等。

当在网站上设计好徽章之后，只需要将生成的URL放到README中，就可以在主页上看到啦，非常简单。

 

2. 展示自己的Github点星，提交等情况

利用Github官方提供的API接口，我们可以得到用户自己的项目情况。


只需要把上面的红色字体的部分换成自己的信息，就可以啦。例如：

欢迎来我Github帮忙点星，关注！

 

3. 统计代码时常

 这个功能非常有趣，这里我们要利用WakaTime对事情的统计功能，并绑定到Github来实现展示。官网：WakaTime

下面详细讲一下如何部署到Github：

1. 登录WakaTime官网，注册 一个WakaTime 账号

这里我是直接绑定的Github账号登录，非常方便，推荐！

 

2. 在自己常用的 IDE 上下载 WakaTime 插件，配置上自己的 API Key

当注册好账号后，你会得到属于自己专属的API Key。然后在需要监控工作的IDE里安装WakaTime的插件，并配上自己的Key。官方上有非常详细的配置步骤，如下以WebStorm为例：

到此为止，其实本地的开发环境就已经被WakaTime所监控啦，数据会被传输到WakaTime然后在dashboard中展示。

除WebStorm外，WakaTime还支持很多其他的开发环境，如下：

3. 将自己的 API Key 存到自己 Github 仓库的 secrets中

从项目里点击Setting -> Secrets -> New secret 创建一个。其中name需要填写WAKATIME_API_KEY，value就把WakaTime官网生成的API Key粘贴进去就行。

 

4. 配置 GitHub 仓库的 Actions

我们还需要在项目里配置Actions。点击 Actions -> New workflow 

把默认的内容全部删除，把下面的内容粘贴上：

name: Waka Readme

on:
  push:
    branches:
      - master
  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: MartinYan623/waka-readme@master
        with:
          WAKATIME_API_KEY: ${{ secrets.WAKATIME_API_KEY }}

这里需要改的是uses中的地方换成你自己的路径。

如果出现以下这个报错信息，则是因为uses中的路径错误。如下所示：

注意：这里需要一个waka-readme的项目，请将https://github.com/athul/waka-readme中的项目fork到自己仓库里就行！ 之前没发现需要fork利用别人写好的东西，结果写的workflow action跑不起来，这里替你们踩坑了！

 

5. 点击 Waka Readme ，再点击run

 

 当你看到正常跑起来之后，就离胜利不远啦！

 

6. 再README文件中添加以下这段文字：

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

添加修改后，再次提交commit。然后，返回到主页，会看到以下这样，说明WakaTime其实已经关联上你的Github啦！需要等待一段时间（一天），就会同步到Github啦！

再给大家推荐一个好的项目，里面收集了很多关于主页的模版，大家可以参考下别人的设计思路！

模版项目：Awesome-Profile-README-templates

 

最后我的Github HomePage展示！链接：https://github.com/MartinYan623

 

如果这篇文章对你有帮助，不妨给我点个赞或收藏一下，谢谢！之后有新的设计思路还会不断更新，希望大家都能设计出属于自己的cool homepage ！

 

参考资料：

1. https://blog.csdn.net/weixin_46233323/article/details/107485962

2. https://blog.csdn.net/qq_42907802/article/details/107464900

3. https://github.com/kautukkundan/Awesome-Profile-README-templates