Github Actions 实战提高生产力

GitHub Action 持续集成服务推出有一段时间了,目前已经免费开放使用,由于个人项目都是放在Github上有点多,使用它来发布、测试、部署,是极大的提高了生产力。

下面通过一些实例来说明,我们可以在那些地方可以提高生产力。

入门

我们只需要在项目的 .github/workflows/ 目录下配置 yml 文件,配置触发事件既可以,例如 .github/workflows/ci.yml 中,我们在 master 分支进行 push,就可以出发这个工作流。

name: CI
on:
  push:
    branches:
      - master

为这个工作流添加一些任务,通过使用 actions/checkout 拉代码,使用 actions/setup-node 安装制定的 nodejs 版本

name: CI
on:
  push:
    branches:
      - master

jobs:
  build-deploy:
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: 14

你可以添加更多的步骤完成简单的测试,例如安装依赖,编译代码,运行测试用例等:

jobs:
  build-deploy:
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: 14
      - run: npm install
      - run: npm run build
      - run: npm run coverage
      - run: npm run bundle
      - run: npm run bundle:min
      - run: npm run doc

自动打 tag

配置一个步骤,通过判断 package.json 中的变化自动创建一个 tag。

- name: Create Tag
  id: create_tag
  uses: jaywcjlove/create-tag-action@v1.3.6
  with:
    package-path: ./package.json

自动生成 released

通过判断 tag 创建成功是否成功(if: steps.create_tag.outputs.successful),来自动创建一个 released

- name: Create Release
  uses: ncipollo/release-action@v1
  if: steps.create_tag.outputs.successful
  with:
    token: ${{ secrets.GITHUB_TOKEN }}
    name: ${{ steps.create_tag.outputs.version }}
    tag: ${{ steps.create_tag.outputs.version }}

自动生成 released 的详情描述

使用 jaywcjlove/changelog-generator 获取commit的日志,在创建 released 的时候使用

- name: Generate Changelog
  id: changelog
  uses: jaywcjlove/changelog-generator@v1.5.0
  with:
    head-ref: ${{steps.create_tag.outputs.version}}
    filter-author: (renovate-bot|Renovate Bot)
    filter: '[R|r]elease[d]\s+[v|V]\d(\.\d+){0,2}'
- name: Create Release
  uses: ncipollo/release-action@v1
  if: steps.create_tag.outputs.successful
  with:
    token: ${{ secrets.GITHUB_TOKEN }}
    name: ${{ steps.create_tag.outputs.version }}
    tag: ${{ steps.create_tag.outputs.version }}
    body: |
      Comparing Changes: ${{ steps.changelog.outputs.compareurl }}  

      ${{ steps.changelog.outputs.changelog }}

image.png

自动生成一个简单的文档网站

你可以通过脚本生成它(index.html):

- name: Compress uiw Example.
  run: |
    cat > index.html << EOF
    <!DOCTYPE html><html lang="en">
    <head>
    </head>
    <body>
    <div class="footer">
      Licensed under MIT. (Yes it's free and open-sourced)
    </div>
    </body></html>
    EOF

如果你只想通过 README.md 生成一个简单的文档网站,你可以使用 jaywcjlove/markdown-to-html-cli 进行配置自动生成简单的 index.html 静态文件进行发布即可

- name: Converts Markdown to HTML
  uses: jaywcjlove/markdown-to-html-cli@main
  with:
    source: README-zh.md
    output: website/index.html
    github-corners: https://github.com/jaywcjlove/markdown-to-html-cli
    favicon: data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌐</text></svg>

自动发布静态资源

GitHub 提供一个免费的静态资源托管功能,我们只需要将静态资源提交到某个分支,进行配置即可。这里我们使用 peaceiris/actions-gh-pagesbuild 目录中编译好的静态资源,提交到 gh-pages 分支中,通过配置即可以直接预览它。

- name: Deploy
  uses: peaceiris/actions-gh-pages@v3
  with:
    github_token: ${{ secrets.GITHUB_TOKEN }}
    publish_dir: ./build

根据下图进行配置静态资源所在的位置

配置GitHub静态资源所在的位置

文档历史记录预览

在每次生成的 releases 中展现当前的文档预览,这很好的获取到不通版本的文档,这个非常有用。我们不需要干什么就可以根据 git 历史记录,预览历史的文档源码,但是希望他拥有预览工具,这个时候需要用到 https://raw.githack.com/ 这个 CDN 工具了,只需通过 jaywcjlove/changelog-generator 输出的 hash 拼接一下,就可以了。

https://raw.githack.com/uiwjs/react-codemirror/${{ steps.changelog.outputs.gh-pages-short-hash }}/index.html
# 如果你需要获取最新的 gh-pages 分支 hash
# 这需要你在提交静态资源之后
- name: Generate Changelog
  id: changelog
  uses: jaywcjlove/changelog-generator@v1.5.0
  with:
    head-ref: ${{steps.create_tag.outputs.version}}
    filter-author: (renovate-bot|Renovate Bot)
    filter: '[R|r]elease[d]\s+[v|V]\d(\.\d+){0,2}'

- name: Create Release
  uses: ncipollo/release-action@v1
  if: steps.create_tag.outputs.successful
  with:
    token: ${{ secrets.GITHUB_TOKEN }}
    name: ${{ steps.create_tag.outputs.version }}
    tag: ${{ steps.create_tag.outputs.version }}
    body: |
      Documentation ${{ steps.changelog.outputs.tag }}: https://raw.githack.com/uiwjs/react-codemirror/${{ steps.changelog.outputs.gh-pages-short-hash }}/index.html  

自动上传 npm 包

使用 JS-DevTools/npm-publish 判断 package.json 中的版本是否发生变化,自动在 npm 上发布版本。

- uses: JS-DevTools/npm-publish@v1
  with:
    token: ${{ secrets.NPM_TOKEN }}
    package: ./package.json

配置 NPM_TOKEN ,如果你的仓库在 GitHub 组织中,只需要组织里面设置一次就好了,个人的配置如下:

image.png

自动生成贡献者图标

有个更简单的工具 contrib.rocks 配置URL,直接在你的自述文件中引用就可以,但是这个不够酷,因为有机器人贡献者需要过滤,不想依赖一个第三方服务,我们只需要这个贡献者头像集合图片就可以了,这个时候我们使用 jaywcjlove/github-action-contributors 去生成它,将它提交到 gh-pages 静态资源分支中,在页面使用预览即可

- name: Generate Contributors Images
  uses: jaywcjlove/github-action-contributors@main
  with:
    filter-author: (renovate\[bot\]|renovate-bot|dependabot\[bot\])
    output: build/CONTRIBUTORS.svg
    avatarSize: 42
## Contributors

As always, thanks to our amazing contributors!

<a href="https://github.com/jaywcjlove/github-action-contributors/graphs/contributors">
  <img src="https://jaywcjlove.github.io/github-action-contributors/CONTRIBUTORS.svg" />
</a>

Made with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors).

image.png

完整示例参考


小弟调调
[链接]

小弟调调要埋名啦

8.3k 声望
2k 粉丝
0 条评论
推荐阅读
macOS包管理器 Homebrew 备忘清单
Homebrew 是 macOS(或Linux)缺少的包管理器,备忘清单包含 brew 命令的使用与安装在线预览: [链接]开源仓库:[链接]安装 {代码...} 加速安装和更新,将仓库源码通过 gitee 同步到国内,这样速度杠杠的 {代码...}...

小弟调调1阅读 1.4k

封面图
ESlint + Stylelint + VSCode自动格式化代码(2023)
安装插件 ESLint,然后 File -&gt; Preference-&gt; Settings(如果装了中文插件包应该是 文件 -&gt; 选项 -&gt; 设置),搜索 eslint,点击 Edit in setting.json

谭光志34阅读 20.7k评论 9

涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco22阅读 2.2k评论 3

你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan23阅读 1.6k评论 1

封面图
在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 2k

封面图
【代码鉴赏】简单优雅的JavaScript代码片段(一):异步控制
Promise.race不满足需求,因为如果有一个Promise率先reject,结果Promise也会立即reject;Promise.all也不满足需求,因为它会等待所有Promise,并且要求所有Promise都成功resolve。

csRyan26阅读 3.3k评论 1

「彻底弄懂」this全面解析
当一个函数被调用时,会创建一个活动记录(有时候也称为执行上下文)。这个记录会包含函数在 哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this就是记录的其中一个属性,会在 函数执行的过程中用到...

wuwhs17阅读 2.4k

封面图

小弟调调要埋名啦

8.3k 声望
2k 粉丝
宣传栏