お疲れ様です。TNDメンバーのRyoma です 👋
今回、TNDの公式サイトのブログに microCMS を導入しました。
これまでの Markdown 管理を見直し、誰でもブラウザだけで記事を書けるようになりました。
やってみたら学びが多かったです。

これまでの運用

これまではブログを Astro + Markdown で管理していました。
記事はこんな感じの .md ファイルを書いて、GitHub に push する方式です。

---
title: "Tex入門講座を開きました！"
author: "N.T"
date: "2025-09-19"
tags: ["イベント", "TeX"]
---
本文をここに Markdown で書く…

エンジニアにとってはこれで十分。
…なんですが、サークルには1年生も非エンジニアもいるわけで。

• そもそも Git も Markdown も分からないと記事が書けない
• 画像をリポジトリに入れてパスを書くのが地味に面倒
• レビューが GitHub の diff 画面…（文章レビューには向いてない）

つまり、書ける人が限られてしまうのが課題でした。

やりたかったこと

ブラウザだけで、記事の執筆・画像アップ・公開が完結する

これに尽きます。コードを触らずに、誰でも記事を出せる状態にしたい。
→ というわけでヘッドレス CMS を導入することにしました。

今回採用したのは microCMS。管理画面が分かりやすく、日本語の情報も多いので、サークルみたいに色んな人が触る環境にぴったりでした。

ざっくり構成

考え方はシンプルで、コンテンツは microCMS、サイトは今まで通り。
記事を公開したら自動でサイトがビルドされて反映されます。

ポイントは、本番サイトは静的のままということ！
CMS はあくまで記事の置き場で、見た目や速さはそのままです。

記事の移行（今回の山場）

一番がんばったのが、今まで書いた Markdown 記事たちを microCMS に引っ越す作業です。

手順はこんな感じ：

1. microCMS の管理画面でスキーマをぽちぽち作る（タイトル・著者・タグ・本文…）
2. 既存の .md ファイルを読み込んで、自動でアップロードするスクリプトを書いて一気に流し込む

スクリプトは大体こんな感じです。Markdown を読んで、本文を HTML に変換して、microCMS に投げるだけ。

for (const file of markdownFiles) {
  const { data, content } = matter(file);        // フロントマターと本文を分離
  await client.create({
    endpoint: "blog",
    contentId: slug,                              // ファイル名をそのまま URL に
    content: {
      title: data.title,
      tags: data.tags.map(toCategoryId),          // タグは参照で紐付け
      body: await marked.parse(content),          // Markdown → HTML
    },
  });
}

※ 上記は要点のみの抜粋です。slug はファイル名から生成、 author / date も同様に content に渡しています。
エラーハンドリングは省略しています。

これで文章は一括で移行完了 🎉
画像の自動アップロードだけはできなかったので、そこは諦めて、移行後に管理画面から手動でポチポチ加筆しました。まあ枚数も多くないので許容範囲。

公開したら自動でデプロイ

記事を公開したら、microCMS の Webhook が GitHub Actions を叩いて、自動でサイトをビルド＆デプロイしてくれます。執筆者は「公開」ボタンを押すだけ。

ここでひとつ罠があって、

Webhook（`repository_dispatch`）は main ブランチにあるワークフローしか発火しない

ので、先にワークフローだけ main にマージしておく必要がありました。
ブランチで動作確認しようとしても、うんともすんとも言わなくて少しハマりました💦

プレビューは Vercel で

「公開前に下書きを本番と同じ見た目で確認したい」という願望もあったので、プレビュー専用に Vercel を使いました。
本番（GitHub Pages）はそのまま、プレビューのページだけ Vercel に置く構成です。
下書きの URL をレビュアーに送れば、ログインなしで「こんな感じになるよ」を共有できます。Vercel は無料枠で十分でした。

おわりに

無事、誰でもブラウザだけでブログを書けるようになりました。
これでもっといっぱい記事を書いてアウトプットしていきたいですね。

ところで今回、
本番は GitHub Pages、プレビューは Vercel という二段構えにしたんですが、
これって運用として正しいんだろうか…？ もっと良いやり方があれば教えてほしいです 🙏

なんだかんだ、こういうメンテ作業はやっぱり楽しい。
それではまた！