author(Github)

第33节 Actions有意思的小项目

回到目录
回到项目首页
上一节

❤️💕💕CS自学指南,大学教育无论是深度还是广度都没有办法支撑我们的职业素养,这个板块算是自己在CS学习中额外补充和记录的。个人博客:http://nsddd.top

[TOC]

前言

🧷 GitHub Marketplace
🧷 Awesome Actions

我们在前面知道了，GitHub 做了一个🧷 GitHub Marketplace ，可以搜索到他人提交的 actions。另外，还有一个🧷 Awesome Actions的仓库，也可以找到不少 action。

最近实现了一个很有意思的 Workflow，就是通过 GitHub Actions 自动将每次最新发布的文章自动同步到我的 GitHub 首页。

🔥 要实现这样的工作流需要了解以下这几点：

需要创建一个与 GitHub 同名的个人仓库，这个仓库的 README.md 信息会显示在首页
通过 GitHub Actions 自动获取博客的最新文章并更新 README.md
只有当有新的文章发布的时候才触发自动获取、更新文章 GitHub Action

同名仓库？

GitHub 同名的个人仓库是一个特殊仓库，即创建一个与你的 GitHub 账号同名的仓库，添加的 README.md 会在 GitHub 个人主页显示。

我会用一个账户为例（因为本人账户readme文件在使用，借某某的账户）。

😍 针对readme主页。可以有很多有意思的功能，比如说⚡ github-readme-stats为您的 github 自述文件动态生成的统计信息。

🚸 更多精彩丰富的readme自叙移步这里

自动获取文章并更新 `README.md`

通过RSS获取订阅仓库

在 GitHub 上有很多开发者为 GitHub Actions 开发新的小功能。我这里用到一个开源项目叫 blog-post-workflow，它可以通过 RSS（订阅源）来获取到博客的最新文章。

vuepress的RSS：

vuepress-plugin-rss-feed：

Generate rss.xml file with content:encoded for rss client pretty preview. Reference rss.xml for example.

Usage

npm i vuepress-plugin-rss-feed -D

Add plugin to your .vuepress/config.js

module.exports = {
  plugins: [
    // other plugins
    [
      'rss-feed',
      {
        username: 'Bougie',
        hostname: 'https://www.bougieblog.cn',
        selector: '.content__post', // extract content to content:encoded
        count: 10,
        filter: (page) => /^blog/.test(page.relativePath),
      },
    ],
  ],
}

它不但支持 RSS 还支持获取 StackOverflow 以及 Youtube 视频等资源。

我只需要在 GitHub 同名的仓库下添加一个这样的 Workflow YML .github/workflows/blog-post-workflow.yml 即可（前面actions讲过，就不介绍步骤了）。

name: Latest blog post workflow
on:
  schedule:
    - cron: '0 2 * * *'
  workflow_dispatch:

jobs:
  update-readme-with-blog:
    name: Update this repo's README with latest blog posts
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: gautamkrishnar/blog-post-workflow@master
        with:
          # 我的博客 / RSS 链接
          feed_list: "https://www.zhihu.com/rss"
          # 获取最新 10 篇文章
          max_post_count: 10

刚开始我需要让这个 Workflow 能工作即可。因此用的定时触发，即就是每天早上两点就自动获取一次最新文章并更新这个特殊仓库 README.md。

💡 cron：表示分时日月星

我们用crontab -e进入当前用户的工作表编辑，是常见的vim界面。每行是一条命令。

crontab的命令构成为 时间+动作，其时间有分、时、日、月、周五种，操作符有

* 取值范围内的所有数字

/ 每过多少个数字

- 从X到Z

， 散列数字

实例1：每1分钟执行一次myCommand
* * * * * myCommand
实例2：每小时的第3和第15分钟执行
3,15 * * * * myCommand
实例3：在上午8点到11点的第3和第15分钟执行
3,15 8-11 * * * myCommand
实例4：每隔两天的上午8点到11点的第3和第15分钟执行
3,15 8-11 */2  *  * myCommand
实例5：每周一上午8点到11点的第3和第15分钟执行
3,15 8-11 * * 1 myCommand
实例6：每晚的21:30重启smb
30 21 * * * /etc/init.d/smb restart
实例7：每月1、10、22日的4 : 45重启smb
45 4 1,10,22 * * /etc/init.d/smb restart
实例8：每周六、周日的1 : 10重启smb
10 1 * * 6,0 /etc/init.d/smb restart
实例9：每天18 : 00至23 : 00之间每隔30分钟重启smb
0,30 18-23 * * * /etc/init.d/smb restart
实例10：每星期六的晚上11 : 00 pm重启smb
0 23 * * 6 /etc/init.d/smb restart
实例11：每一小时重启smb
0 */1 * * * /etc/init.d/smb restart
实例12：晚上11点到早上7点之间，每隔一小时重启smb
0 23-7/1 * * * /etc/init.d/smb restart

这个做法还可以，但不够节省资源也不够完美。最好的做法是：只有当有新文章发布时才触发上面的 Workflow 更新 README.md。这就需要有一个 Webhook 当检测到有文章更新时自动触发这里的 Workflow。

触发另一个 GitHub Action

GitHub Actions 提供了一个 Webhook 事件叫做 repository_dispatch 可以来做这件事。

⚠️ 它的原理：使用 GitHub API 来触发一个 Webhook 事件，这个事件叫做 repository_dispatch，这个事件里的类型是可以自定义的，并且在要被触发的 workflow 里需要使用 repository_dispatch 事件。

即：在存放博客文章的仓库里要有一个 Workflow 通过发送 repository_dispatch 事件触发特殊仓库中的 Workflow 来更新 README.md。

这里我定义事件类型名叫 special_repository，它只接受来自 GitHub API repository_dispatch 事件。

再次调整上面的 .github/workflows/blog-post-workflow.yml 文件如下：

# special_repository.yml
name: Latest blog post workflow

on:
  repository_dispatch:
    # 这里的类型是可以自定义的，我将它起名为：special_repository
    types: [special_repository]
  workflow_dispatch:

jobs:
  update-readme-with-blog:
    name: Update this repo's README with latest blog posts
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: gautamkrishnar/blog-post-workflow@master
        with:
          feed_list: "https://shenxianpeng.github.io/atom.xml"
          max_post_count: 10

接受事件的 Workflow 修改好了。如何发送类型为 special_repository 的 repository_dispatch 事件呢？我这里通过 curl 直接调用 API 来完成。

curl -XPOST -u "${{ secrets.PAT_USERNAME}}:${{secrets.PAT_TOKEN}}" \
    -H "Accept: application/vnd.github.everest-preview+json" \
    -H "Content-Type: application/json" https://api.github.com/repos/shenxianpeng/shenxianpeng/dispatches \
    --data '{"event_type": "special_repository"}'

最后，发送事件 Workflow YML .github/workflows/send-dispatch.yml 如下:

name: Tigger special repository

on:
  push:
    # 当 master 分支有变更的时候触发 workflow
    branches:
      - master
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Send repository dispatch event
        run: |
          curl -XPOST -u "${{ secrets.PAT_USERNAME}}:${{secrets.PAT_TOKEN}}" \
          -H "Accept: application/vnd.github.everest-preview+json" \
          -H "Content-Type: application/json" https://api.github.com/repos/shenxianpeng/shenxianpeng/dispatches \
          --data '{"event_type": "special_repository"}'

注：PAT_USERNAME 和 PAT_TOKEN 需要在当前的仓库【设置 -> Secrets】里进行添加，这里就不具体介绍了，需要可以自行搜索。

以上就是通过 GitHub Actions 实现当博客有新发布的文章后自动更新 GitHub 首页的所有内容了。

订阅知乎的rss源

zhihu知乎

💡简单的一个案例如下：

markdown文件：

### Hi there 👋

### Connect with me:

[<img align="left" alt="shenxianpeng | Gmail" width="22px" src="https://www.svgrepo.com/show/381000/new-logo-gmail.svg" />][gmail]
[<img align="left" alt="shenxianpeng | LinkedIn" width="22px" src="https://www.svgrepo.com/show/157006/linkedin.svg" />][linkedin] 
[<img align="left" alt="shenxianpeng | Blogger" width="22px" src="https://www.svgrepo.com/show/349311/blogger.svg" />][blogger] 
[<img align="left" alt="shenxianpeng | ZhiHu" width="22px" src="https://www.svgrepo.com/show/305628/zhihu.svg" />][zhihu]
<!-- [<img alt="shenxianpeng | PayPal" width="20px" src="https://www.svgrepo.com/show/354170/paypal.svg" />][paypal] -->

<!-- [<img align="left" alt="shenxianpeng | Wechat" width="25px" src="https://cdn.jsdelivr.net/npm/simple-icons@3.13.0/icons/wechat.svg" />][wechat] -->
<!-- [<img align="left" alt="shenxianpeng | DEV" width="30px" src="https://cdn.jsdelivr.net/npm/simple-icons@3.13.0/icons/dev-dot-to.svg" />][dev.to] -->

<br />


# Recent blog posts

<!-- BLOG-POST-LIST:START -->

<!-- BLOG-POST-LIST:END -->


 ![Profile views](https://gpvc.arturio.dev/lwxfairy)

配置文件workflow：

name: Latest blog post workflow
on:
  schedule: # Run workflow automatically
    - cron: '* 2 * * *' # Runs every hour, on the hour
  workflow_dispatch: # Run workflow manually (without waiting for the cron to be called), through the GitHub Actions Workflow page directly

jobs:
  update-readme-with-blog:
    name: Update this repo's README with latest blog posts
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Pull in dev.to posts
        uses: gautamkrishnar/blog-post-workflow@v1
        with:
          feed_list: "https://www.zhihu.com/rss"
          max_post_count: 6

🚀 编译结果如下：

刷新，展示首页：

项目地址

知乎专栏

知乎订阅转换仓库

🚸 你也可以用知乎专栏订阅：

我的专栏地址：https://www.zhihu.com/column/c_1496496113348206594

⬇️ 那么需要转化为下面的：

https://rss.lilydjwg.me/zhihuzhuanlan/c_1496496113348206594

在这个项目中使用

项目地址

设置定时任务：

59 23 * * 7

表示的是每周日晚上23:59执行

name: Latest blog post workflow
on:
  schedule: # Run workflow automatically
    - cron: '0 2 * * *' # Runs every hour, on the hour
  workflow_dispatch: # Run workflow manually (without waiting for the cron to be called), through the GitHub Actions Workflow page directly

jobs:
  update-readme-with-blog:
    name: Update this repo's README with latest blog posts
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Pull in dev.to posts
        uses: gautamkrishnar/blog-post-workflow@v1
        with:
          feed_list: "https://rss.lilydjwg.me/zhihuzhuanlan/c_1496496113348206594"
          max_post_count: 28

⚠️ 注意不要开启分支保护：

定义分支保护规则以禁用强制推送，防止分支被删除，并可选地要求在合并前检查状态。新分支保护规则？

目录生成器

我们都知道在GitHub上是没办法显示toc目录的，那么我们可以使用目录生成器。

我选择的是 🧷TOC Generator

这是一个GitHub Actions生成 TOC（目录）的方法，它执行DocToc并在更改时提交。

指定 toc 的位置

默认情况下，doctoc 将目录放在文件的顶部。您可以使用以下格式指示将其放置在其他位置：

<!-- START doctoc -->
<!-- END doctoc -->

官方使用的模板：

<details>
<summary>📇 目录折叠</summary>
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->


<!-- END doctoc generated TOC please keep comment here to allow auto update -->
<!-- START doctoc -->
</details>

将目录添加到单个文件

如果您只想转换特定文件，请执行以下操作：

doctoc /path/to/file [...]

💡简单的一个案例如下：

doctoc README.md

doctoc CONTRIBUTING.md LICENSE.md

将 toc 添加到目录和子目录中的所有文件

安装：

npm install -g doctoc

进入包含本地 git 项目的目录并键入：

doctoc .

这将使用指向 markdown 解析器生成的锚点的目录更新当前目录及其所有子目录中的所有 markdown 文件。Doctoc 默认使用 GitHub 解析器，但可以指定其他模式。

指定自定义 TOC 标题

使用该--title选项指定（Markdown 格式的）自定义 TOC 标题；例如，doctoc --title 'Contents' .从那时起，您可以简单地运行doctoc <file>，doctoc 将保留您指定的标题。

或者，要空白标题，请使用该--notitle选项。这只会从目录中删除标题。

为 TOC 条目指定最大标题级别

使用--maxlevel选项将 TOC 条目限制为仅达到指定级别的标题；例如，doctoc --maxlevel 3 .

默认，

Markdown 格式的标题没有限制，
而嵌入式 HTML 的标题仅限于 4 个级别。

设置工作流程

我以最近一个项目 🧷Go语言的面试题为例

💡简单的一个案例如下：

.github/workflows/toc.yml

on: push
name: TOC Generator
jobs:
  generateTOC:
    name: TOC Generator
    runs-on: ubuntu-latest
    steps:
      - uses: technote-space/toc-generator@v4

🚀 编译结果如下：

END 链接

参与贡献❤️💕💕

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

33.md

33.md

第33节 Actions有意思的小项目

前言

同名仓库？

自动获取文章并更新 `README.md`

触发另一个 GitHub Action

订阅知乎的rss源

知乎专栏

在这个项目中使用

目录生成器

指定 toc 的位置

将目录添加到单个文件

将 toc 添加到目录和子目录中的所有文件

指定自定义 TOC 标题

为 TOC 条目指定最大标题级别

设置工作流程

END 链接

Files

33.md

Latest commit

History

33.md

File metadata and controls

第33节 Actions有意思的小项目

前言

同名仓库？

自动获取文章并更新 README.md

触发另一个 GitHub Action

订阅知乎的rss源

知乎专栏

在这个项目中使用

目录生成器

指定 toc 的位置

将目录添加到单个文件

将 toc 添加到目录和子目录中的所有文件

指定自定义 TOC 标题

为 TOC 条目指定最大标题级别

设置工作流程

END 链接

自动获取文章并更新 `README.md`