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

詳細ブログ↓
https://zenn.dev/yuta28/articles/dev-github-vscode

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View 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 Slide

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

   View Slide

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

   View Slide

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

   View 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 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 Slide

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

    View 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 Slide

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

    View Slide

14. 記事のデプロイ
    14
    

    View Slide

15. 記事のデプロイ
    15
    

    View Slide

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

    View Slide

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

    View Slide