はじめに

自分で触った技術の業務外でのアウトプットを行う場所が必要だと感じ、技術ブログを作成しました。
今やっている業務がプログラムと程遠い場所になるので、個人的な学習の場として活用していきたいと考えています。（それはそれで楽しいのですが）

この記事では、ブログ作成にあたって使った技術、技術選定の理由、実装のポイントについて解説します。

使用した技術スタック

• Astro - 静的サイト生成フレームワーク
• microCMS - 国産Headless CMS
• Cloudflare Pages - ホスティング
• bun - JavaScriptランタイム/パッケージマネージャー
• TypeScript - 型安全な開発
• Tailwind CSS - スタイリング
• remark - Markdownパーサー

システム構成

graph TD
        A[microCMS
API
記事管理] -->|Webhook| B[GitHub Actions
ビルドトリガー]
        B --> C[Astro
SSG
ビルド時にAPIから
データを取得]
        C --> D[Cloudflare Pages
静的ファイルを
ホスティング]
        
        style A fill:#e1f5ff
        style B fill:#fff4e1
        style C fill:#f0e1ff
        style D fill:#e1ffe1

コンセプト

ブログ作成にあたって、以下の3点を重視しました:

1. 非エンジニアでも簡単に記事の投稿・管理ができること
2. セキュリティ管理・保守が容易であること
3. 維持費用が安いこと

業務において簡単なドキュメントを投稿できる仕組みが必要になると感じ、それにも応用できるような技術選定を行っています。趣味のプロジェクトではありますが、実務でも応用できる設計を意識しました。

技術選定の理由

なぜHeadless CMS (microCMS) なのか

WordPress等の従来型CMSとの比較

記事の管理において、当初はGitHub上でMarkdownファイルを直接管理することも考えましたが、技術的な背景のない方も利用することを考えるとハードルが高いと判断しました。

一方、WordPressなどの従来型CMSは以下の課題があります:

• データベースやPHP実行環境が必要
• セキュリティアップデートの継続的な対応が必須
• プラグインの脆弱性リスク
• サーバー維持費用が発生

そこで、microCMSを採用しました。

microCMSの利点:

• 管理画面が直感的で、非エンジニアでも使いやすい
• 国産で日本語ドキュメントが充実
• APIベースで疎結合な設計が可能
• 無料プランでも十分な機能（月10,000リクエスト）
• セキュリティ管理はmicroCMS側が担当

なぜSSG (Astro) なのか

静的サイト生成を選んだ理由

Headless CMSと組み合わせる手法として、SSG（Static Site Generation）を採用しました。

SSGの利点:

• ビルド時に静的HTMLを生成するため、表示速度が非常に速い
• サーバーサイドの脆弱性リスクがほぼゼロ
• ホスティングコストが極めて安い（Cloudflare Pagesは無料）
• 更新が中断されても、既存ページは安全に動作し続ける

Astroを選んだ理由

SSGフレームワークとして、Next.jsやGatsbyなども候補でしたが、Astroを選びました。

Astroの特徴:

• 静的サイト生成に特化している
• ゼロJavaScriptがデフォルト（必要な部分だけJS）
• コミュニティの評価が高い
• 日本語ドキュメントが充実している

なぜbunなのか

パッケージマネージャー兼ランタイムとしてbunを採用しました。

選定理由:

• 設定ファイルが少なくシンプル
• モダンな開発体験

実装のポイント

1. microCMS SDKでのデータ取得

APIだけでは記事の全件取得に上限があるため、
Astroのビルド時にmicroCMS SDKを活用して全件取得しています。

2. remarkでMarkdownをレンダリング

microCMSのリッチエディタから取得したHTMLを、remarkを使ってパースしています。

// src/pages/blog/[slig].astro
import { marked } from 'marked';
import hljs from 'highlight.js';

marked.setOptions({
  gfm: true,           // GitHub Flavored Markdown対応
  breaks: true,        // 改行を<br>に変換
  highlight: function (code, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(code, { language: lang }).value;
      } catch (err) {
        console.error(err);
      }
    }
    return hljs.highlightAuto(code).value;
  },
});

ポイント:

• コードブロックのシンタックスハイライト
• 改行をそのまま反映できるように
• GitHub拡張も対応

3. Webhookによる自動デプロイ

記事を公開すると、microCMSからCloudflare PagesにWebhookを送信し、自動的に再ビルドが走る仕組みを実装しています。

設定の流れ:

1. Cloudflare PagesでBuild Hookを生成
2. microCMSの設定画面でWebhook URLを登録
3. 「コンテンツ公開時」にトリガーを設定

これにより、記事を公開するだけで自動的にサイトが更新されます。

コスト

完全無料で運用可能

• microCMS: 無料プラン（月10,000リクエストまで）
• Cloudflare Pages: 無料
• GitHub: 無料
• ドメイン: 任意（独自ドメインを使わなければ無料）

個人ブログや小規模プロジェクトであれば、月額0円で運用できます。

技術選定の比較表

今後のやりたい機能

• 記事の全文検索機能の実装
• OGP画像の自動生成
• 目次の自動生成
• mermaid記法への対応
• ステージング環境の実装

まとめ

Astro + microCMSの組み合わせにより、以下を実現できました:

• 非エンジニアでも使いやすい管理画面
• 高速で安全な静的サイト
• 完全無料での運用
• 保守コストの最小化

静的サイト生成とHeadless CMSの組み合わせは、個人ブログだけでなく、ドキュメントサイトなどにも応用できる設計パターンです。

同じような構成でブログやドキュメントサイトを作りたい方の参考になれば幸いです。