Github Actions的使用

September 10, 2021

最近重新鼓捣 Gatsby Blog，认真翻看它了文档，发现用 markdown 本地文件只是其中一种数据来源方式，它还支持 CMS、数据库或者其他第三方数据。用 markdown 编写发布文章是通过处理成本地数据再利用 GraphQL 查询，然后利用 Gatsby 提供的 hooks 自定义 UI 组件，而我刚好也可以在这个过程里把处理好的数据完成备份。

A core feature of Gatsby is its ability to load data from anywhere — CMSs, Markdown, other third-party systems, even spreadsheets. This allows teams to manage their content in nearly any backend they prefer.

之前的数据备份是通过 GitHub webhooks 来做的，但是通过 Github Api 获取的数据有限而且麻烦。而且项目本身就要使用 Github Actions 在 push 事件触发后来构建项目并发布到 Github Pages，所以想在构建的过程中读取项目里的数据然后发送到指定的接口。

具体做法通过 gatsby-source-filesystem 来处理文件数据，构建时在 gatsby-node.js 里生成所需的 json 文件，然后读取 json 发送给服务器。

首先第一步是读取 json 数据，输出结果为 package.outputs.content

- name: Read json file
    id: package
    uses: juliangruber/read-file-action@v1
    with:
      path: ./public/gatsby-posts.json

其次是获取此次数据变更的内容,得到的结果为 file_changes.outputs:{files_modified,files_added,files_removed}

- name: Get commit changes
  id: file_changes
  uses: trilom/file-changes-action@v1.2.3
  with:
    githubRepo: liweili50/liweili50.github.io

最终就是把数据发送到指定的服务器接口

- name: Make a HTTP Request
  uses: actionsflow/axios@v1
  with:
    url: ${{ secrets.WEBHOOK_URL }}
    method: POST
    body: |
      {
        "modified":${{ steps.file_changes.outputs.files_modified }},
        "added":${{ steps.file_changes.outputs.files_added}},
        "removed":${{ steps.file_changes.outputs.files_removed}},
        "posts":${{ steps.package.outputs.content }}
      }

这样就完成了在每次提交 markdown 文件后就会把 Gatsby 生成的数据以及变更的文件内容发送到服务器，服务端就可以按需更新数据库。

具体代码请移步：https://github.com/liweili50/liweili50.github.io/blob/master/.github/workflows/main.yml