Upgrade to Pro — share decks privately, control downloads, hide ads and more …

dev.toの記事もGitHubで管理してみた

YouYou
May 14, 2022

 dev.toの記事もGitHubで管理してみた

YouYou

May 14, 2022
Tweet

More Decks by YouYou

Other Decks in Technology

Transcript

  1. dev.toの記事もGitHubで管理し
    てみた
    1

    View full-size slide

  2. Name:ユータ
    Occupation:SRE
    Twitter:@Y0u281 (オーでなくゼロです)
    ブログ:https://zenn.dev/yuta28
    自己紹介
    Twitter
    2

    View full-size slide

  3. 目次 ● 背景
    ● dev.toについて
    ● dev.to管理用テンプレートリポジトリ
    ● dev.toとGitHubとの連携
    ● まとめ
    3

    View full-size slide

  4. 背景
    ● Zennでブログ執筆中
    ○ GitHub Actionsを使って記事の自動投稿を実現
    ● dev.toでも同じように自動投稿を実現したい
    ● すでに実践している人がいたので参考にしてみた
    詳しくはこちら↓
    GitHub ActionsでZennブログの
    校正を自動化してみた
    4

    View full-size slide

  5. dev.toについて
    ● 英語版Qiitaみたいなもの
    ● 爆速であることで有名
    ○ 阿部寛さんのHPとどちらが速いか比較されたこともある
    ● スマホアプリ版もある
    DEV is a community of software developers getting together to help one
    another out. The software industry relies on collaboration and networked
    learning. We provide a place for that to happen.
    Aboutページより引用
    5

    View full-size slide

  6. dev.to管理用テンプレートリポジトリ
    以下のリポジトリをコピーしてもらえたら皆さんもdev.toの記事をGitHubで管理できま
    す。
    https://github.com/Yuhta28/dev-to-blog-template
    6

    View full-size slide

  7. DEV Community APIキー生成
    GitHubにセットするAPIキー
    DEV API (beta) | Forem Docs
    APIはベータ版なのか若干動作不安
    7

    View full-size slide

  8. GitHub Actions用の変数セット
    先ほど生成したAPIキーをセット
    8

    View full-size slide

  9. GitHub Actionsワークフロー設定
    deploy: # 長いので記事投稿部分のみ抜粋
    name: Deploy
    if: github.ref == 'refs/heads/main' && github.event_name == 'push'
    runs-on: ubuntu-latest
    steps:
    - name: Checkout Repo
    uses: actions/checkout@master
    - name: Install Dependencies
    uses: bahmutov/npm-install@v1
    - name: Deploy to dev.to
    run: DEV_TO_GIT_TOKEN=${{ secrets.DEV_TO_GIT_TOKEN }} yarn run dev-to-git
    Yarnパッケージ ↑参照
    dev-to-gitにAPIキーを渡す
    9

    View full-size slide

  10. 記事の初期作成
    dev.toのAPIリクエストで作成する
    curl -X POST -H "Content-Type: application/json" \
    -H "api-key: API_KEY" \
    -d \ '{"article":{"title":"Template","body_markdown":"Body","published":false,"tags":["tag1",
    "tag2"]}}' https://dev.to/api/articles
    環境変数でセット
    10
    Goで作った

    View full-size slide

  11. 記事の初期作成
    ドラフト記事作成
    この記事のIDを取得する
    11

    View full-size slide

  12. 記事IDの取得
    curl -H "api-key: API_KEY" https://dev.to/api/articles/me/(un)published | \
    jq '.[].id'
    プログラミング言語でも取得できますが、一部の言語では取得できませんでした。
    例:Python
    dev-to-git.json
    12

    View full-size slide

  13. 記事の校正
    簡単な誤字脱字はtextlintと
    reviewdogでCI時に自動検知
    13

    View full-size slide

  14. 記事のデプロイ
    14

    View full-size slide

  15. 記事のデプロイ
    15

    View full-size slide

  16. まとめ
    ● ブログもGitHubで管理
    ● 好きなエディターで記事を書こう
    ● GitHub Actionsはいいぞ!
    16

    View full-size slide

  17. ありがとうございました
    より詳しい内容は以下のブログで↓
    dev.toの記事もGitHubで管理してみた
    (zenn.dev)
    17

    View full-size slide