마크다운 에디터 연결하기 — CMS 없이 블로그 글 쓰는 워크플로우 만들기

블로그를 만들고 나면 가장 많이 하는 고민 중 하나는 바로 글 작성입니다.
매번 .mdx 파일을 VSCode에서 만들고 커밋하고 배포하기? 너무 번거롭죠.

이번 글에서는 CMS 없이도 웹 UI에서 직접 마크다운을 작성하고,
파일로 저장하고, 자동 배포되는 워크플로우를 구축하는 방법을 안내할게요.

---

📦 1. 마크다운 에디터 선택: react-markdown-editor-lite

react-markdown-editor-lite는 깔끔한 UI와 실시간 프리뷰가 가능한 에디터입니다.

npm install react-markdown-editor-lite react-markdown

// components/MarkdownEditor.tsx
import dynamic from 'next/dynamic';
import 'react-markdown-editor-lite/lib/index.css';
import ReactMarkdown from 'react-markdown';

const MdEditor = dynamic(() => import('react-markdown-editor-lite'), { ssr: false });

export default function MarkdownEditor() {
  const [content, setContent] = useState("");

  return (
    <MdEditor
      value={content}
      style={{ height: "500px" }}
      renderHTML={(text) => <ReactMarkdown>{text}</ReactMarkdown>}
      onChange={({ text }) => setContent(text)}
    />
  );
}

이제 기본적인 마크다운 에디터 UI가 완성됐어요.

---

📝 2. 작성한 글을 파일로 저장하는 API 만들기

Next.js API Routes를 사용해서 서버에서 posts/ 폴더에 .mdx 파일을 저장해보겠습니다.

// pages/api/write-post.ts
import fs from 'fs';
import path from 'path';

export default function handler(req, res) {
  if (req.method === 'POST') {
    const { title, content } = req.body;
    const filePath = path.join(process.cwd(), 'posts', `${title}.mdx`);

    const frontmatter = `---\ntitle: "${title}"\ndate: "${new Date().toISOString()}"\n---\n\n`;
    fs.writeFileSync(filePath, frontmatter + content);

    res.status(200).json({ message: 'Post saved!' });
  } else {
    res.status(405).end();
  }
}

주의: 이 방법은 파일 시스템을 직접 다루기 때문에 로컬 개발 서버에서만 작동합니다.

---

🔁 3. GitHub Actions + Push로 자동 배포까지

파일 저장까지 했다면, 이제 커밋 + 푸시 + 자동 배포를 자동화할 수 있어요.

1. 글 작성 → 서버에 저장
2. GitHub API로 커밋
3. Vercel이 커밋 감지 후 자동 배포

이를 위한 워크플로우는 GitHub REST API 또는 GitHub CLI로 구현할 수 있습니다.

gh auth login
gh repo clone yourname/my-blog
cd my-blog
echo "# 새 글 제목" >> posts/xxx.mdx
git add .
git commit -m "new post"
git push

혹은 GitHub REST API로도 푸시 가능 (추후 자동화 스크립트로 확장 가능)

---

🌐 4. 미래 확장: Headless CMS로도 전환 가능

이렇게 만든 구조는 이후에 Notion, Sanity, Contentful 같은 Headless CMS로 확장하기도 쉽습니다.
중요한 건 구조를 **파일 기반으로 잘 설계**하는 것이에요.

지금은 내 블로그지만, 나중엔 팀 블로그, 고객용 문서 페이지로도 발전할 수 있으니까요.

---

✅ 마무리하며

Markdown을 웹에서 작성하고 저장하고 배포까지.
더 이상 글 쓰는 게 부담이 아닌, 하루의 루틴이 됩니다.

“코드는 블로그를 만들고, 블로그는 나를 만든다.”