Zenn
🤖

GitHub Actionsで技術記事のCI/CDパイプラインを構築する実践例

に公開
GitHub Actions
CI/CD
技術記事自動化
tech

はじめに

本記事はChatGPTによって生成されました。

1. 導入：テーマの概要や重要性

技術記事の執筆からレビュー、公開までのプロセスは、品質維持とスピードの両立が求められる重要なフローです。特に個人開発者やスタートアップのエンジニアにとっては、記事の内容を迅速にアウトプットしつつ、誤字脱字や内容の確認を徹底することが難しく感じられます。そこでGitHub Actionsを用いたCI/CDパイプラインによる自動化は、レビューや公開の負荷を軽減し、技術情報の鮮度を保つ上で非常に有効な手段です。

GitHub ActionsはGitHubリポジトリに密接に統合されており、プルリクエストの作成やマージをトリガーにした自動テストやビルド、さらには公開処理までの一連作業をコード化できます。これによりレビュープロセスの省力化や、ミスの早期発見、公開タイミングを正確に管理可能です。

本記事では、技術記事のレビューから最終公開までをGitHub Actionsで自動化する具体的な実装例を解説します。Flutterなどモバイル技術も適宜織り交ぜつつ、実践的なコード例と運用上のポイントを丁寧に紹介します。

2. 背景・基礎知識

CI/CDとは

  • 継続的インテグレーション（CI）：コードの変更を頻繁にマージし、自動テストやビルドを行うプロセス。
  • 継続的デリバリー（CD）：CIの後に、検証済みの成果物をステージングや本番環境に自動デプロイする工程。

GitHub Actionsの特徴

  • GitHubリポジトリに直接組み込める
  • ワークフローはYAMLで定義
  • 各種イベント（push, pull_request, schedule等）をトリガーにできる
  • 豊富な公式・サードパーティアクションが利用可能

技術記事のCI/CDに必要な要素

  • MarkdownやAsciidoc等の記事ファイル管理
  • 静的解析やLintチェック（内容の体裁・誤字チェック）
  • プレビュー環境の自動生成（例：GitHub PagesやNetlify）
  • レビュー状態の管理と公開判断の自動化

3. 本論：技術的な詳細や仕組み、手順

アーキテクチャ概要

[GitHubリポジトリ]
      │
      │ Pull Request作成
      ▼
[GitHub Actions CI]
  ├─ MarkdownのLint & Spell Check
  ├─ プレビューサイトビルド（静的サイトジェネレータ）
  └─ Slack通知（レビュー依頼）
      │
      ▼
[レビュワーによる承認]
      │
      │ Pull Requestマージ
      ▼
[GitHub Actions CD]
  ├─ 本番環境ビルド＆デプロイ
  └─ 公開通知

ワークフローの主なステップ

  1. Lint & Spell Check

    • markdownlint や cspell を実行し、記事のフォーマットやスペルミスを検出。

  2. プレビュー生成

    • Hugo や Jekyll など静的サイトジェネレータを使ってプレビュー環境を生成・公開。

  3. Slack通知連携

    • レビュー依頼をチームに自動通知。

  4. 承認後のマージトリガー

    • マージ時に本番環境向けにビルドし、GitHub PagesやFirebase Hosting等にデプロイ。

4. 具体例・コード例

例：ci-review.yml（レビュー用ワークフロー）

name: CI Review Pipeline

on:
  pull_request:
    branches:
      - main

jobs:
  lint-and-spellcheck:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'

      - name: Install markdownlint-cli and cspell
        run: npm install -g markdownlint-cli cspell

      - name: Run markdownlint
        run: markdownlint '**/*.md'

      - name: Run spellcheck
        run: cspell '**/*.md'

  build-preview:
    needs: lint-and-spellcheck
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: '0.111.3'

      - name: Build site
        run: hugo --minify

      - name: Deploy to Netlify Preview (example)
        uses: netlify/actions/cli@master
        with:
          args: deploy --dir=public --prod=false
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_TOKEN }}

例：cd-deploy.yml（公開用ワークフロー）

name: CD Deploy Pipeline

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: '0.111.3'

      - name: Build site for production
        run: hugo --minify

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public

手順説明

  1. PR作成時にci-review.ymlが起動し、自動でLint・スペルチェックを行い、Netlifyでプレビューを公開。
  2. チームがレビューし、問題なければPRをマージ。
  3. mainブランチへのpushをトリガーにcd-deploy.ymlが走り、本番環境に公開。

5. 応用・発展

位置情報やマップ機能を含む記事の自動検証

Flutterでマップ連携する技術記事の場合、GitHub Actions内でFlutterのビルド・テストを組み込み、地図表示のスナップショットテストを自動化可能です。Firebase Hostingと連携すればリアルタイム更新も実現できます。

Web3技術のコード検証

Web3関連の記事では、スマートコントラクトのコンパイルやテストをCIで自動化し、記事内サンプルコードの正確性を保証できます。

複数プラットフォーム連携

SlackやDiscord、Twitterへの自動通知も統合して、記事公開の告知を効率化しましょう。

6. まとめ・今後の展望

GitHub Actionsを活用した技術記事のCI/CDパイプラインは、レビュー品質向上と公開スピードの両立に寄与します。特にスタートアップや個人開発者にとっては、手作業の負担軽減と品質担保が大きなメリットです。

今後はAIによる自動要約や翻訳、さらには読者フィードバックの自動収集と連動するなど、より高度な自動化が期待されます。Flutterのユニットテスト連携やWeb3コードの安全性検証なども重要なテーマとなるでしょう。

7. Tips & Best Practices

  1. Secrets管理を徹底する
    APIキーやトークンはGitHub Secretsで安全に管理。ワークフロー内での漏洩に注意。

  2. Lint・Spellチェックは必須ステップに
    記事品質の担保には自動チェックを必ず組み込む。markdownlintやcspellを活用。

  3. プレビュー環境は軽量かつ高速に
    NetlifyやVercelなどクラウドサービスを使い、即時プ

Discussion