WEB工房しずおかのロゴ

WEB工房しずおか

脱Gatsby.js！Astro×ローカルAIで爆速構築する次世代Markdownブログ開発記

WEB
AstroMarkdownwebdevLLM
Koshio

Astro×ローカルAIでのブログ構築

みなさん、こんにちは！WEB工房しずおかの開発チームです。

WEB制作会社として技術のキャッチアップと社内知見のアップデートを進める中で、長年運用してきた自社運営ブログサイトのリニューアルを実施しました。

今回は、開発が停滞したGatsby.jsからの脱却をきっかけに、注目の静的サイト生成（SSG）フレームワーク Astro を採用し、ローカルAIツール（Aider / Qwen3.6）と GitHub Actions による自動デプロイパイプラインを「最速」で構築した開発背景と技術的な知見を解説します！

Gatsbyからの移行先に悩んでいる方や、ローカルAIを活用したモダンな開発フローに興味がある方はぜひ参考にしてみてください。

開発の背景と課題

リニューアルにあたり、抱えていた課題と要件は以下の4点でした。

  1. Gatsby.jsの開発停滞（非推奨化への懸念） これまで運用してきたGatsby.jsはエコシステムの更新が落ち着いており、今後の長期的な保守性に不安がありました。
  2. 大量の既存Markdown資産の継承 過去の技術記事（Markdown形式）が多数蓄積されているため、外部CMSへ移行するのではなく、Markdown/MDXをそのまま活用できる構成が必須でした。
  3. 最速構築とローカルAIによる運用自動化 記事執筆やコードメンテナンスにおいて、ローカルで稼働させるAI（Aider + Qwen3.6-35b）とスムーズに連携できるシンプルなディレクトリ構造が求められました。
  4. 社内知見のアップデート すでにNext.jsでのサイト構築知見はありましたが、コンテンツファーストなSSG領域で世界的標準になりつつある Astro への挑戦と技術検証を兼ねて選定しました。

なぜ Astro を選んだのか？

Next.jsでの運用も検討しましたが、今回の「ブログ開発」においてAstroを選んだ理由は以下の点にあります。

  • コンテンツコレクション（Content Collections）の型安全性 src/content/config.ts で TypeScript（Zod）によるスキーマ定義を行うことで、Frontmatterの項目や日付フォーマットなどをビルド時に自動検証してくれます。
  • フォルダごとのアセットコロケーション src/content/blog/{slug}/index.md と同じフォルダ内に記事用画像を配置する構成が標準サポートされており、相対パス指定のまま自動画像最適化（WebP変換・レスポンシブ化）が行われます。
  • Zero JS による圧倒的な表示速度 デフォルトでクライアントJavaScriptを出力しない設計のため、Core Web Vitalsのスコアが高く、SEO面でも極めて有利です。

構築手順と開発プロセス

1. ローカルAI（Aider + Qwen3.6）を活用した爆速セットアップ

開発環境には MacBook Pro（メモリ36GB）を用い、ローカルLLMである qwen3.6-35b-a3b と CLIコーディングエージェント Aider を連携させました。

プロジェクトの基本構成から Content Collections のスキーマ定義まで、Aiderにプロンプトを投げるだけでベースとなる環境が数分で組み上がりました。

# Ollamaのモデルを指定してAiderを起動
aider --model ollama/qwen3.6-35b-a3b

ローカル環境に閉じたAIエージェントを活用することで、API制限やトークンコストを気にせず、コマンド実行からテンプレート出力まで全自動で指示・検証を回すことができます。

2. 日付フォーマットの調整（YYYY-MM-DD）

記事の pubDate を YYYY-MM-DD 形式で統一管理するため、日付表示コンポーネント（FormattedDate.astro）を以下のように調整しました。

---
interface Props {
  date: Date;
}

const { date } = Astro.props;
---

<time datetime={date.toISOString()}>
  {
    date.toLocaleDateString('ja-JP', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
    }).replaceAll('/', '-')
  }
</time>

これに合わせて src/content/config.ts では pubDate: z.coerce.date() を指定。これにより Frontmatter に pubDate: 2026-08-18 と書くだけで自動的に Date オブジェクトへ変換され、型安全に描画できます。

3. ConoHa VPS × GitHub Actions でのCI/CD自動化

ビルド成果物は、自社で運用している ConoHa VPS 上の Nginx ドキュメントルートへ自動転送する構成にしました。

.github/workflows/deploy.yml を作成し、git push をトリガーにビルドと rsync 転送を実行させます。

name: Deploy Astro to ConoHa VPS

on:
  push:
    branches: [ main ]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 22 # ※最新のAstroビルド要件に合わせてNode 22を指定
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Build Astro site
        run: npm run build

      - name: Deploy to ConoHa VPS via SSH
        uses: easingthemes/ssh-deploy@main
        env:
          SSH_PRIVATE_KEY: ${{ secrets.VPS_SSH_KEY }}
          REMOTE_HOST: ${{ secrets.VPS_HOST }}
          REMOTE_USER: ${{ secrets.VPS_USER }}
          REMOTE_PORT: ${{ secrets.VPS_PORT }}
          TARGET: ${{ secrets.VPS_TARGET }}
          SOURCE: "dist/"
          ARGS: "-rltgoDzvO --delete"

【💡 開発中に遭遇したハマりポイント】 初回デプロイ時、GitHub Actions上で Node.js v20 is not supported by Astro! というエラーが発生しました。最新のAstroでは Node.js >= 22.12.0 が要求されるため、setup-node での指定バージョンを 22 に更新することで無事ビルドが成功しました。

まとめ：モダンな開発構成がもたらすメリット

今回のリニューアルを通して、以下の成果を得ることができました。

  • 保守性の向上: 開発が停滞していたGatsby.jsから脱却し、活発で軽量なAstroへ完全移行できた
  • 記事書きやすさの向上: 画像と .md ファイルを同一ディレクトリで直感的に管理可能になった
  • 更新フローの高速化: ローカルAIで生成した記事をコミット＆プッシュするだけで、GitHub Actions経由で数秒後にConoHa VPSへ即時反映される環境が完成した

WEB制作会社として、単にサイトを作るだけでなく「どのようなツールやフレームワークで開発効率と品質を高めるか」を追求することは非常に重要です。

Webサイトの表示速度改善や、静的サイト生成（SSG）を活用した安全で高速なオウンドメディア構築でお悩みの企業様は、ぜひお気軽にWEB工房しずおかまでご相談ください！