Seongyu's Blog

Decap CMS의 가벼운 대안인 Sveltia CMS를 통해, Git 기반 블로그에 GUI 에디터를 도입하고 자동 배포 환경을 구축하는 방법을 공유합니다.

개요

Sveltia CMS 소개 및 장단점
프로젝트에 Sveltia CMS 설정하기 (index.html, config.yml)
로컬 및 실서버에서 CMS 활용 방법
GitHub Actions와의 통합 및 자동 배포 원리

Sveltia CMS란?

Sveltia CMS는 Decap CMS와 호환되는 가벼운 오픈소스 Git 기반 CMS입니다. 별도의 서버나 데이터베이스 없이 GitHub 저장소의 파일을 직접 읽고 쓰는 방식으로 동작하며, 정적 사이트 생성기(SSG)를 사용하는 블로그에 매우 적합합니다.

장점

가벼움: 별도의 백엔드 없이 HTML 파일 하나로 구동됩니다.
Git 기반: 모든 글이 Markdown 파일로 저장되어 버전 관리가 용이합니다.
UI 에디터: Markdown 문법을 몰라도 GUI 환경에서 편리하게 글을 작성할 수 있습니다.
무료: GitHub와 Vercel/GitHub Pages를 사용한다면 추가 비용이 발생하지 않습니다.

단점

기능 제한: 대규모 콘텐츠 관리 시스템에 비해 기능이 단순할 수 있습니다.
에디터 버그: 최근 Markdown 가져오기 과정에서 일부 버그가 발견되기도 했습니다(아래 '비하인드' 섹션 참고).

프로젝트에 추가하기

Sveltia CMS를 설정하는 과정은 매우 간단합니다. public/admin 폴더 내에 두 개의 파일을 생성하면 됩니다.

1. admin/index.html

CMS 에디터가 표시될 페이지입니다. Sveltia CMS 스크립트를 불러오는 코드만 있으면 됩니다.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sveltia CMS</title>
  </head>
  <body>
    <!-- Sveltia CMS 스크립트 로드 -->
    <script src="https://unpkg.com/@sveltia/cms/dist/sveltia-cms.js"></script>
    <!-- Decap 스크립트 로드 -->
    <!-- <script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script> -->
  </body>
</html>

2. admin/config.yml

CMS의 동작 방식과 콘텐츠 구조를 정의하는 설정 파일입니다.

backend:
  name: github
  repo: kimseongyu/kimseongyu.github.io # 본인의 저장소 경로
  branch: main

local_backend: true # 로컬 개발 환경 지원

media_folder: "public/images"
public_folder: "/images"

collections:
  - name: "posts"
    label: "Posts"
    folder: "posts/posts"
    create: true
    slug: "{{year}}-{{month}}-{{day}}"
    fields:
      - { label: "Title", name: "title", widget: "string" }
      - {
          label: "Date",
          name: "date",
          widget: "datetime",
          format: "YYYY-MM-DD",
        }
      - {
          label: "Tag",
          name: "tag",
          widget: "select",
          options: ["tech", "open source"],
        }
      - { label: "Body", name: "body", widget: "markdown" }

CMS 사용 및 배포 프로세스

로컬 환경

로컬에서 개발 중일 때는 localhost:3000/admin/index.html 경로로 접속하여 글을 작성할 수 있습니다. local_backend: true 설정 덕분에 작성한 내용이 로컬 파일 시스템에 바로 반영됩니다.

배포 환경

실제 서비스 중인 블로그에서는 {bloc-url}.com/admin/ 경로로 접속합니다. GitHub 로그인을 통해 인증하면, 웹 UI에서 작성한 글을 저장(Save)할 때 Sveltia CMS가 GitHub API를 호출하여 저장소에 직접 커밋을 생성합니다.

GitHub Actions 통합

저장소에 새로운 커밋이 발생하면, 미리 설정해둔 GitHub Actions 워크플로우(deploy.yml)가 자동으로 실행됩니다.

Trigger: CMS에서의 'Save' 작업이 GitHub에 푸시를 발생시킴
Build: GitHub Actions가 최신 Markdown 파일들을 포함하여 정적 사이트 빌드
Deploy: 빌드된 결과물을 GitHub Pages에 배포

이 과정을 통해 글 작성부터 배포까지 별도의 터미널 작업 없이 웹에서 한 번에 완료할 수 있습니다.

비하인드: Sveltia CMS를 알게 된 과정

Sveltia CMS를 알게 된 것은 오픈소스 이슈를 탐색하던 중이었습니다.

Sveltia CMS라는 도구에서 lexical을 사용하는데 오류가 발생한다는 이슈였습니다. 이슈 분석을 위해 Sveltia CMS를 사용해보기로 했습니다.

라이브러리를 사용해보면서 git blog를 운영하는 제 블로그에 적합한 도구임을 알고 블로그의 기능으로 추가하게 되었습니다.

Sveltia CMS를 추가한 후 이슈 해결을 위해 코멘트를 남기러 갔는데, 10분 전에 다른 개발자가 본인이 해결하겠다고 코멘트를 남겼습니다.

해결하고 싶었던 이슈였는데 놓치게 되어 아쉬웠습니다. 다음부턴, 해결할 수 있다는 직감이 들면 코멘트부터 남겨야겠다는 다짐을 하게 되었습니다.

Sveltia CMS로 블로그 포스팅 편하게 하기

개요