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

灰太狼 2023-03-02 10:21 3阅读 0赞

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

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

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

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

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

![20200728194643985.jpg][]

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

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

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

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

网页：[https://shields.io/][https_shields.io]

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

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

![20200728195636185.png][]![20200728195412619.png][]

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

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

> !\[xxx's Github stats\](https://github-readme-stats.vercel.app/api?username=xxx&show\_icons=true)

只需要把上面的红色字体的部分换成自己的信息，就可以啦。例如：!\[martinyan's Github stats\](https://github-readme-stats.vercel.app/api?username=MartinYan623&show\_icons=true)

![20200728200257879.png][]

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

**3. 统计代码时常**

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

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

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

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

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

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

![2020072820135918.png][]

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

![20200728201540732.png][]

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

![20200728201641905.png][]

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

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

![20200728201817954.png][]

![20200728201843992.png][]

![20200728201906107.png][]

> 4. 配置 GitHub 仓库的 Actions

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

![20200728202244664.png][]

![20200728202316988.png][]

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

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中的路径错误。如下所示：

![20200729161648564.jpg][]

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

> 5. 点击 Waka Readme ，再点击run

![20200728202811456.png][]

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

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

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

![20200728203024584.png][]

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzIzMTMzNzgz_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzIzMTMzNzgz_size_16_color_FFFFFF_t_70 1][]

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

参考资料：

1. [https://blog.csdn.net/weixin\_46233323/article/details/107485962][https_blog.csdn.net_weixin_46233323_article_details_107485962]

2. [https://blog.csdn.net/qq\_42907802/article/details/107464900][https_blog.csdn.net_qq_42907802_article_details_107464900]

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

[20200728194643985.jpg]: /images/20230208/e0beea1377e24d84b7d9d8dc7c848c7d.png
[https_shields.io]: https://shields.io/
[20200728195636185.png]: https://img-blog.csdnimg.cn/20200728195636185.png
[20200728195412619.png]: /images/20230208/cb9c74e52f694cd4a0a4cceadb2df3ee.png
[20200728200257879.png]: /images/20230208/baf77fc3e21a43788b9ffd32b12e4dab.png
[WakaTime]: https://wakatime.com/
[2020072820135918.png]: /images/20230208/558a0a7637fb4638b756d614ceefcb80.png
[20200728201540732.png]: /images/20230208/e6d42f10c7674a4caecc2562d8989d5d.png
[20200728201641905.png]: /images/20230208/2194993cb78149b7bb64285d034953a3.png
[20200728201817954.png]: /images/20230208/b17ade1f11e54e21b73987ee02bf8585.png
[20200728201843992.png]: /images/20230208/d3628de3dd7f4f068e80506c06bde309.png
[20200728201906107.png]: /images/20230208/9bcdba8d7c9a44fe89355b23726b718c.png
[20200728202244664.png]: /images/20230208/60f4d66ba0c74f8d9a4750b154bbaba5.png
[20200728202316988.png]: /images/20230208/1a550407c9ed4436b28ed98398c68692.png
[20200729161648564.jpg]: /images/20230208/a645e5e898824c3cbb732b6f81bf86ad.png
[https_github.com_athul_waka-readme]: https://github.com/athul/waka-readme
[20200728202811456.png]: /images/20230208/ea433401b20d4a6f9e6c950f141c4a85.png
[20200728203024584.png]: /images/20230208/2a5251f593cd4f5abcd9f193cf836fa7.png
[Awesome-Profile-README-templates]: https://github.com/kautukkundan/Awesome-Profile-README-templates
[https_github.com_MartinYan623]: https://github.com/MartinYan623
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzIzMTMzNzgz_size_16_color_FFFFFF_t_70]: /images/20230208/a0f8a3a4cf3a4c8f9fcae51ec57eb90c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzIzMTMzNzgz_size_16_color_FFFFFF_t_70 1]: /images/20230208/008aea8abc744e2c8cf6975efa455007.png
[https_blog.csdn.net_weixin_46233323_article_details_107485962]: https://blog.csdn.net/weixin_46233323/article/details/107485962
[https_blog.csdn.net_qq_42907802_article_details_107464900]: https://blog.csdn.net/qq_42907802/article/details/107464900