震惊！小伙每天都被绿！！！使用Github Actions实现定时任务，每天定时往代码仓库中存入一张图片，在以后需要使用

「本文已参与低调务实优秀中国好青年前端社群的写作活动」

标题党！！！各位不要误会哈哈哈哈哈哈哈哈哈！！！

内容是Github Actions实现定时任务，以下是正文

偶然一天，看antfu的github可以做到每日都保持着提交，我就去探查其中的奥妙，发现他弄了一个定时任务，在每天8点的时候更新Sponsors(不过他确实每天都有commit)，仓库链接

于是我就想，我能不能也自己做个定时任务，令我的contributions也保持常绿

工程构想

我可以实现一个工程，用于保存一些想要的图片，并且可以在每天的某个时刻自动提交到我的代码仓库中，这样的提交动作就可以令当天的contributions变绿

图片内容

我们可以从robohash中获取到我们想要的图片，以下是robohash官网的介绍：

Robohash is a easy web service that makes it easy to provide unique, robot/alien/monster/whatever images for any text. Put in any text, such as IP address, email, filename, userid, or whatever else you like, and get back a pretty image for your site.

从介绍中可以看到，我们可以通过传入text来生成独一无二的robot图片，比如以下几个

也就是说，我们可以根据传入的不同路径来生成不同的图片，这样就能在每天的定时任务中根据不同的路径获取到新的图片，并存到仓库中

github actions

github actions是Github提供的持续集成服务(Continuous integration/CI)，具备自动化完成许多不同任务的能力，比如构建、测试或部署等

如果你有的工程需要部署到服务器，按照以往的步骤应该是：

拉取代码，git clone xxx
安装依赖，npm install
代码开发，coding
打包工程，npm run build
将打包的工程dist拷贝到服务器
配置nginx指向dist路径
重启nginx，nginx reload

使用github actions，我们就监听代码的push过程，当发生push动作的时候，actions就自动启动进行上述步骤将新的打包目录发到服务器中，这样我们仅需要将代码提交，就能完成自动化部署，这篇文不讲述自动化部署的内容，如有需要可以找其他文

工程构建

在github中创建一个仓库robot，并且clone到本地

主任务代码

在工程中，创建文件main.js，用于执行主任务，创建目录pic，用于存放图片

const request = require("request");
const path = require("path");
const fs = require("fs");
const id = (~~(Math.random() * 100000)).toString(); // 获取小于10w的数字
const url = `https://robohash.org/${id}`;
const dirPath = path.resolve(__dirname, "pic");
// 这一步的处理，因为github获取的时间时区是美国时区，所以获取到的时间格式是5/28/2022，我们可以先split后将年份放到数组第一位，这样就是需要的文件名格式了
const dateArr = new Date().toLocaleDateString().split("/"); // 本地调试时用.toLocaleDateString("en")
dateArr.unshift(dateArr.pop());
const date = dateArr.join("-");
request(url).pipe(fs.createWriteStream(`${dirPath}/${date}.png`));

如果request库引用失败，可以先执行pnpm add request安装依赖，别忘了先初始化工程pnpm init

在本地控制台执行node main.js，就能获取到图片并保存到本地目录pic中

actions相关配置

在工程中创建目录.github，在.github目录下创建目录workflows，workflows下的yml文件，就是actions的相关配置文件，也叫workflow文件 github actions有一些自己的术语：

workflow: 工作流程，持续集成一次运行的过程，就是一个workflow
job：任务，一个workflow由一个或多个jobs构成，含义是一次持续集成的运行，可以完成多个任务
step：步骤，每个job由多个step构成，一步步完成
action：动作，每个step可以依次执行一个或多个命令

在workflows目录下创建robot.yml文件，github发现工程中含有.github/workflows目录下有yml文件，就会自动执行该文件

workflow文件有很多配置字段，可以看官方文档，这里我只讲解我用到的字段

name：workflow文件的名称，这个名称会出现在Actions页的Workflows列，如果没有name，就会用当前yml文件名作为name
on：触发workflow的条件，比如我这次用的是schedule用于定时任务，也可以用push用于在提交代码的时候执行，完整的触发事件可以看官方文档
jobs：该字段就能写workflow执行的任务，后面跟任务的名称，比如
```
jobs:
  task1:
    xxx
  task2:
    xxx
```
这样就表示该workflow文件下有两个任务，分别是task1和task2，注意，下面的字段介绍用[task-name]表示任务名称需要你替换成你真正的任务名称
- jobs.[task-name].run-on：指定运行所需要的虚拟机环境，必填字段，我这里指定为ubuntu-latest表示最新的ubuntu环境
- jobs.[task-name].steps：指定每个job的执行步骤，比如我以下的步骤：
  - Checkout code：获取代码
  - Set node：指定运行的node版本
  - Install：安装依赖
  - Run bash：运行主任务
  - Commit：使用EndBug/add-and-commit插件提交代码，with后的是commit的内容
    - env：注入需要的环境变量，这里需要加上GITHUB_TOKEN才能进行commit操作，后面会讲解怎么添加环境变量

完整的配置

name: automatic-save-robot
on:
  schedule:
    - cron: "0 0 * * *"
jobs:
  bots:
    runs-on: ubuntu-latest
    steps:
      - name: "Checkout code"
        uses: actions/checkout@v1

      - name: "Set node"
        uses: actions/setup-node@v1
        with:
          node-version: 16.x

      - name: "Install"
        run: npx pnpm i

      - name: "Run bash"
        run: node main.js

      - name: "Commit"
        uses: EndBug/add-and-commit@v4
        with:
          message: "chroe: save robot"
          add: "pic/*"
        env:
          GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }}

添加环境变量

可以看到在Commit步骤需要添加GITHUB_TOKEN才能完成提交动作，按照以下的步骤进行：

在github主页点击头像，下拉菜单选择Setting
Setting页的左侧菜单，选择Developer settings
Developer settings页中选择Personal access tokens，在这里点击Generate new token来生成token，将生成的token复制
回到你的工程页，选择工程页的Setting，选择左侧菜单的Secrets-Actions，点击New repository secret创建环境变量
注意，这个环境变量的命名是在配置中写的命名，比如我的环境变量名叫ACCESS_TOKEN
在配置中使用环境变量格式是：${{ secrets.ACCESS_TOKEN }}

结果检验

将上述的步骤都提交之后，就能每天蹲点你定的时间来看是否有触发定时任务，比如我定的时间是cron: "0 0 * * *"，GitHub的时间是GMT时间，国内的北京时间是GMT+8，也就是中国会比Github的服务器快8个小时，所以是每天的早上8点执行定时任务每天的定时任务都会在Actions页中展示，点击每个workflow可以看到具体的执行步骤可以看到，我的jobs名叫bots，点击bots能看到每个job的执行步骤可以看到，在bots下的每个step都会展示在界面中，并且右侧能看到具体的执行时间，点击每个step左侧的小箭头还能看到具体的执行步骤过程

如果你是使用vscode开发，也可以安装插件Github Actions，能在左侧菜单就能看到actions的执行记录

震惊！小伙每天都被绿！！！