从 GitHub 发布 DEV 文章

使用 GitHub Actions 的工作流程

devto：CLI 工具

devto——从你的终端发布到dev.to

devto-act：GitHub 操作

devto 的 GitHub Action

我的工作流程

结束

你是如何为DEV撰写文章的？你是在浏览器上使用 DEV 提供的 Markdown 编辑器吗？还是在本地机器上使用你最喜欢的编辑器？如果你在电脑上使用常规编辑器，你如何向 DEV 提交文章？

我喜欢用我最喜欢的编辑器写文章。当我准备发布文章时，我必须将文本复制粘贴到在线编辑器中，然后点击“发布”按钮。有时，我在写作过程中想看看DEV是如何显示文章的。因此，我的写作经历通常涉及多次复制粘贴。你可以想象，这很麻烦、很乏味，而且体验非常糟糕。

我还喜欢使用Git来管理文章版本。这样我就可以把文章推送到GitHub上。由于 GitHub 可以渲染 Markdown 文件，读者也可以选择在 GitHub 上阅读文章。当然，如果我们使用相对链接并提交图片文件，图片在 GitHub 上应该也能正常工作。现在，我的文章也有一个备份系统了。

使用 GitHub Actions 的工作流程

我希望上述所有操作都能完全自动化。上图展示了我希望通过 GitHub Actions 实现的工作流程。当我想开始撰写新文章时，我会从主分支分支开始写作。当我想查看这篇文章在 DEV 版本上的效果时，我可以将新分支推送到 GitHub 并发起（草稿）拉取请求。此时，我的 GitHub Action 应该会将文章作为草稿提交到 DEV 版本。当我准备好发布文章时，可以将分支合并回主分支。

devto：CLI 工具

要实现所有这些，我首先需要一个 CLI 工具，它可以帮助我从终端向 DEV 提交文章。为此，我创建了一个名为devtowith Go 的 CLI 工具。

该工具利用了DEV 在 OpenAPI 规范中提供的 API。devto主要做两件事：

• 它使用子命令将 Markdown 文件中的所有图像链接收集到一个devto.yml文件中generate。例如，如果我们在 Markdown 文件中有 和 ，我们将得到以下内容./image-1.png：./image-2.png

  images:
    ./image-1.png: ""
    ./image-2.png: ""

• 它使用子命令将文章提交给 DEV submit。该子命令在 DEV 中创建一篇新文章，并使用结果submit更新。将在后续执行中使用此结果执行更新操作，而不是为同一篇文章创建新条目。devto.ymlarticle_iddevtoarticle_id

DEV API 目前不支持上传图片。如果我们提交的 Markdown 内容中包含图片链接的相对路径，DEV 将无法显示这些图片。为了解决这个问题，我们需要手动通过devto.yml文件或使用--prefixflag 提供图片的完整路径。我们将在 GitHub Actions 部分对此进行更详细的说明。

devto-act：GitHub 操作

- name :发布到 DEV 
  uses : shihanng/devto-act@v0.0.6 
  with :
     auto_prefix : " yes "
     markdown_files : " filename.md "
   env :
     DEVTO_API_KEY : ${{ secrets.DEVTO_API_KEY }}

此 GitHub Action 主要使用devtoCLI 工具，并添加了一项“特殊”功能：自动添加前缀。如果您有以下 GitHub 仓库，并且正在为新文章user/repo推送新分支，则将使用子命令的标志值。因此，Markdown 内容中的图片链接，例如：new-articledevto-acthttps://raw.githubusercontent.com/user/repo/new-article/--prefixsubmit

![Image One](./images/one.jpg)
![Image Two](./images/two.jpg)

将成为

![Image One](https://raw.githubusercontent.com/user/repo/new-article/./images/one.jpg)
![Image Two](https://raw.githubusercontent.com/user/repo/new-article/./images/two.jpg)

在 DEV 上。这意味着我们将图像托管在 GitHub 上，而不是 DEV 上。

我的工作流程

使用上面的 CLI 工具和 GitHub Action，我在shihanng/articles中整理了一个适合我需求的工作流程：

name: DEV
on:
  push:
    branches:
      - "trunk"

  pull_request:
    branches:
      - "*"

jobs:
  submit:
    runs-on: ubuntu-latest
    steps:
      - name: Check out code
        uses: actions/checkout@v2

      - name: Find Markdown files
        uses: technote-space/get-diff-action@v3
        id: diff
        with:
          SUFFIX_FILTER: .md

      - name: Trim output from diff
        id: trim
        run: |
          files="$(echo -n "${{ steps.diff.outputs.diff }}" | tr -d "'")"
          echo "::set-output name=trimmed::$files"

      - name: Submit to DEV as draft
        uses: shihanng/devto-act@v0.0.6
        if: ${{ github.event_name == 'pull_request' }}
        with:
          auto_prefix: "yes"
          markdown_files: ${{ steps.trim.outputs.trimmed }}
        env:
          DEVTO_API_KEY: ${{ secrets.DEVTO_API_KEY }}

      - name: Publish to DEV
        uses: shihanng/devto-act@v0.0.6
        if: ${{ github.event_name == 'push' }}
        with:
          auto_prefix: "yes"
          markdown_files: ${{ steps.trim.outputs.trimmed }}
          published: "yes"
        env:
          DEVTO_API_KEY: ${{ secrets.DEVTO_API_KEY }}

      - name: Update devto.yml
        uses: EndBug/add-and-commit@v4
        if: ${{ github.event_name == 'pull_request' }}
        with:
          author_name: ${{ secrets.AUTHOR_NAME }}
          author_email: ${{ secrets.AUTHOR_EMAIL }}
          message: "Update devto.yml"
          add: "**/devto.yml"
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

该工作流程包含以下步骤：

1. 首先，我们需要知道需要发布哪些 Markdown 文件，因为我们不想每次拉取请求都重新发布所有内容。我们借助technote-space/get-diff-action来完成这项工作。
2. 接下来，我们有两个独立的步骤帮助我们将文章提交到 DEV devto-act。如果 GitHub 事件是 ，则将文章作为草稿提交pull request。如果事件是push（我们将其限制在主分支中），则另一个步骤会发布文章。
3. 最后，我们将文件中的更改提交devto.yml到同一个分支，因为我们希望保留这些article_id更改以供将来更新。此步骤可以通过EndBug/add-and-commit实现。

投稿类别：

Wacky Wildcards

结束

我一直在用devto它devto-act发布我最近的几篇关于 DEV 的文章。虽然它还不够完善，但我觉得是时候分享给大家了。如果你和我一样，想在收藏夹里写 DEV 文章，并在 GitHub 上管理，不妨试试这两个工具：

1. devto：如果您想从终端提交文章
2. devto-act：如果您想自动化发布工作流程

欢迎以任何形式（问题、PR、下方评论）提供反馈。如果您觉得这些代码库有用，请给它们打个⭐。它们一直是我最大的动力！

感谢您的阅读❤️。