devto-cli で Dev.to の記事を Git 管理する


## はじめに

Qiita は Qiita CLI が提供されており GitHub repository で Qiita 記事を管理することができます。

https://qiita.com/Qiita/items/32c79014509987541130

Qiita CLI と同様に Dev.to の記事を devto-cli を使って管理できるようなので設定してみました。

https://github.com/sinedied/devto-cli

## 準備

### API Key の発行

devto-cli を利用するには DEV Community API Key が必要にです。
[Settings - DEV Community](https://dev.to/settings/extensions) の最下部から API Key を発行することができます。

発行した API Key は安全な場所に退避させておきましょう。

### npm の設定

`npm init` を実行後 `npm install -g @sinedied/devto-cli` を実行し `devto-cli` を実行できるようにしましょう。

### 公開済み記事のダウンロード

設定完了後 Dev.to に公開済みの記事を GitHub で管理するために Markdown ファイルを生成します。
`_DEV_TO_TOKEN_` には 生成済みの Token を。 _YOUR_REPO_NAME_ には GitHub repository を指定します。
(私の場合は `mziyut/articles` で記事を管理しているので `mziyut/articles` を指定します)

```sh
npx dev init -p -t _DEV_TO_TOKEN_  -r _YOUR_REPO_NAME_
```

### 記事を Git 管理下に置く

ダウンロードが完了した記事を Git 管理下に置いて GitHub 等に push します。

## GitHub Actions で記事の公開、管理を行えるようにする

前ステップで、 `devto-cli` を使って記事の管理を手元の環境で行えるように設定しました。
Qiita CLI のように GitHub Actions 経由で記事の公開、管理ができるように設定します。

### 記事を取得する workflow を作成する

Dev.to に公開済みの記事を取得する workflow を設定します。
この workflow で「記事の取得」「Pull Request の作成」を行います。

Pull Request の作成は `peter-evans/create-pull-request` を利用します。

https://github.com/peter-evans/create-pull-request

`peter-evans/create-pull-request` を利用するにあたって `actions/checkout` の ref に default branch (master/main) の設定を忘れず行ってください。
設定しない場合 Pull Request の作成に失敗します。

```yml:.github/workflows/devto_pull_articles.yml
name: Dev.to - pull articles

on:
  schedule:
    - cron: '*/20 * * * *'
  workflow_dispatch:

permissions:
  contents: write
  pull-requests: write

jobs:
  pull_articles:
    runs-on: ubuntu-latest
    timeout-minutes: 5
    steps:
      - uses: actions/checkout@v3
        with:
          ref: main
      - uses: actions/setup-node@v3
        with:
          cache: 'npm'
      - run: npm install
      - run: npx devto run dev init -p
        env:
          DEVTO_TOKEN: ${{ secrets.DEVTO_TOKEN }}
          DEVTO_REPO: mziyut/articles
      - uses: peter-evans/create-pull-request@v5
        with:
          commit-message: Pull articles
          delete-branch: true
          title: Pull articles
          branch: create-pull-request/patch-pull-articles-devto
```

これで記事を取得する workflow を作成することができました。
この記事と設定は若干異なりますがこのように動作します。

https://github.com/mziyut/articles/pull/148

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55950/18764aaf-2667-eb04-3188-1bcdd783f781.png)

### 記事を公開・編集する workflow を作成する

`devto-cli` を用い記事公開する workflow を作成します。

記事を取得する workflow と同様に Pull Request の作成まで行うように設定しています。
(公開・編集すると Markdown 内の日付が更新され差分が生じてしまうため。)

```yml:.github/workflows/devto_publish_articles.yml
name: Dev.to - publish articles

on:
  push:
    branches:
      - main
  workflow_dispatch:

permissions:
  contents: write
  pull-requests: write

defaults:
  run:
    shell: bash

concurrency:
  group: ${{ github.workflow }}-${{ github.ref }}
  cancel-in-progress: false

jobs:
  publish_articles:
    runs-on: ubuntu-latest
    timeout-minutes: 5
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          cache: 'npm'
      - run: npm install
      - run: npx workspace devto run dev push
        env:
          DEVTO_TOKEN: ${{ secrets.DEVTO_TOKEN }}
          DEVTO_REPO: mziyut/articles
      - uses: peter-evans/create-pull-request@v5
        with:
          commit-message: Publish articles
          delete-branch: true
          title: Publish articles
          branch: create-pull-request/patch-publish-articles-devto
```

これで記事を取得する workflow を作成することができました。
この記事と設定は若干異なりますがこのように動作します。

https://github.com/mziyut/articles/pull/147

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55950/00996c2c-355d-d6ce-ba4a-ed5238d803ed.png)

## 最後に

Qiita CLI と同様に devto-cli で Dev.to の記事を Git 管理することができました。

## Refs

https://github.com/sinedied/devto-cli

https://github.com/mziyut/articles/pull/96