美化永无止境！

一、前言

  之前写过一篇教程，是关于美化 GitHub 首页的，似乎挺受欢迎的！传送门

  不过当时还没接触过 Github Actions，大多数小部件都是利用大佬们提供的 API 实现的。虽然也可以很酷，但其实…我们还有更高级的玩法！

二、Github Actions

  GitHub Actions 是 GitHub 官方推出的持续集成/部署模块服务（CI/CD）。GitHub Actions 自带云环境运行，包括私有仓库也可以享用，你只需一个配置文件即可自动开启此服务。

  说白了就相当于你白嫖了一个简易的服务器，他提供了一个配置文件，你在配置文件里书写脚本就可以定时的执行某项任务了。

  关于 GitHub Actions 的更多知识，这里不做细致讲解，我们只需要知道他是怎么用的就好了。

  详情请阅读 GitHub Actions 官网或者GitHub Actions 入门教程 - 阮一峰

三、为 GitHub 首页添加贪吃蛇动画

1、新建一个 actions

  点击Actions按钮

  新建一个 workflows工作流

  新建一个 yaml 配置脚本

  创建成功！

2、修改配置文件

  GitHub 默认为 Actions 配置文件blank.yml添加了demo，我们只需要修改这个文件的名字并书写我们自己的脚本即可。

配置代码

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
29
30
# GitHub Action for generating a contribution graph with a snake eating your contributions.

name: Generate Snake

on:
  schedule:
    - cron: "0 0 * * *"
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v2.3.4

      - name: Generate Snake
        uses: Platane/snk@master
        id: snake-gif
        with:
          github_user_name: ${{ github.repository_owner }}
          gif_out_path: ./assets/github-contribution-grid-snake.gif
          svg_out_path: ./assets/github-contribution-grid-snake.svg

      - name: Push to GitHub
        uses: EndBug/add-and-commit@v7.2.1
        with:
          branch: main
          message: 'Generate Contribution Snake'

  复制上面的脚本代码并替换yml文件默认内容后，点击start commit后再点击commit new file后即可。

3、引入 svg 动画

  上面的 Github Actions 执行完毕后，会在当前的仓库中添加一个assets文件夹，文件夹中有

github-contribution-grid-snake.gif和github-contribution-grid-snake.svg两个文件。我们把svg文件引入到我们的readme.md文件中即可。（用 MarkDown 和 HTML 语法都行）

1
![](https://raw.githubusercontent.com/这里更换为你的 GitHub ID/这里更换为你的 GitHub ID/main/assets/github-contribution-grid-snake.svg)

  由于众所周知的原因，在国内有时会打不开 GitHub 里的图片资源。我之前一直是使用的jsdelivrCDN 加速服务来引入GitHub里面的图片的。所以我的写法是下面这样的，你只需要把我的ID改成你自己的即可。

1
<div align="center"><img src="https://cdn.jsdelivr.net/gh/sun0225SUN/sun0225SUN/assets/github-contribution-grid-snake.svg" /></div>

  不过，2021年12月20日，jsd在国内的 ICP 证书被吊销了，目前只能利用周边国家的服务器来加速国内请求的静态资源文件。这一定程度上会导致我们的 GitHub 主页速度加载较慢。（国内网络，如果您科学上网的话，当我没说）

4、自定义脚本

  到此整个流程大致算是结束了，GitHub 会在每天的零点（UTC 时区，和北京时间 (UTC+8)差了八个小时）执行我们的 Actions，并生成新的贪吃蛇动画图片，如果你熟悉 Github Actions 的执行流程的话，你可以手动修改yml配置文件文件来自定义图片的更新频率、文件位置、文件名称、commit 信息等等。

  计划任务的时间语法有 5 个字段，中间用空格分隔，每个字段代表一个时间单位。

1
2
3
4
5
6
7
8
9
┌───────────── 分钟 (0 - 59)
│ ┌───────────── 小时 (0 - 23)
│ │ ┌───────────── 日 (1 - 31)
│ │ │ ┌───────────── 月 (1 - 12 或 JAN-DEC)
│ │ │ │ ┌───────────── 星期 (0 - 6 或 SUN-SAT)
│ │ │ │ │
│ │ │ │ │
│ │ │ │ │
* * * * *
符号 描述 举例
* 任意值 * * * * * 每天每小时每分钟
, 值分隔符 1,3,4,7 * * * * 每小时的 1 3 4 7 分钟
- 范围 1-6 * * * * 每小时的 1-6 分钟
/ 每 */15 * * * * 每隔 15 分钟

注：由于 GitHub Actions 的限制，如果设置为 * * * * * 实际的执行频率为每 5 分执行一次。

四、超能力：GitHub 热力图保持 365 天全绿！

1
2
3
4
5
- name: Push to GitHub
  uses: EndBug/add-and-commit@v7.2.1
  with:
    branch: main
    message: 'Generate Contribution Snake'

  分析下脚本里的这段代码，我们可以得到什么信息？

  我们使用EndBug用户的add-and-commit@v7.2.1actions 将渲染好的图片文件推送到 GitHub 仓库，提交的分支是main分支，commit 信息是Generate Contribution Snake

  emmm，这不就是我们日常git add git commit git push的操作么？

  是的，这样的话GitHub Actions 每天都会为我们Contributions一个绿点，这样的话，我们的 GitHub 热力图不就可以保持 365 天全绿啦么，哈哈哈！

五、后记

  本篇文章初探了 GitHub Actions 并为我们的 GitHub 首页添加了一个贪吃蛇的小动画，我们本次使用的 actions 其实都是大佬写好的，后期有能力的话，我们也可以自己去编写 actions，然后交给 GitHub 去定时触发，比方说写一个爬虫程序，然后将爬取的数据展现到 GitHub 首页等等。