Junggi Kim

Junggi Kim

Sveltia CMS 구현 계획서

개요

Jekyll 블로그에 서버 없이 웹 UI 글쓰기 기능을 추가합니다.

  • 솔루션: Sveltia CMS
  • 인증 방식: GitHub OAuth (Cloudflare Worker 사용)
  • 서버 비용: $0 (완전 무료)
  • 호스팅: GitHub Pages (기존 유지)

아키텍처

┌─────────────────────────────────────────────────────────────────┐
│                        사용자 브라우저                           │
│  ┌─────────────┐     ┌─────────────────────────────────────┐   │
│  │ 블로그 메인  │     │      /admin/ (Sveltia CMS)          │   │
│  │ (Jekyll)    │     │  - 글 목록 보기                      │   │
│  │             │ ──→ │  - 새 글 작성 (WYSIWYG)              │   │
│  │             │     │  - 이미지 업로드                     │   │
│  └─────────────┘     │  - 저장 → GitHub 자동 커밋           │   │
│                      └─────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────────┘
                                    │
                                    ▼
┌─────────────────────────────────────────────────────────────────┐
│                    Cloudflare Worker (무료)                      │
│  ┌─────────────────────────────────────────────────────────┐   │
│  │  sveltia-cms-auth                                        │   │
│  │  - GitHub OAuth 핸드셰이크 처리                          │   │
│  │  - Client Secret 안전하게 보관                           │   │
│  │  - Access Token 발급                                     │   │
│  └─────────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────────┘
                                    │
                                    ▼
┌─────────────────────────────────────────────────────────────────┐
│                         GitHub                                   │
│  ┌─────────────┐     ┌─────────────────────────────────────┐   │
│  │ OAuth App   │     │  JunggiKim.github.io Repository     │   │
│  │             │     │  - _posts/ (블로그 글)               │   │
│  │             │     │  - assets/images/ (이미지)           │   │
│  └─────────────┘     └─────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────────┘

구현 단계

Phase 1: GitHub OAuth App 생성

위치: GitHub Settings → Developer settings → OAuth Apps

설정값:

Application name: JunggiKim Blog CMS
Homepage URL: https://junggikim.github.io
Authorization callback URL: https://[WORKER_NAME].workers.dev/callback

결과물:

  • Client ID
  • Client Secret

Phase 2: Cloudflare Worker 배포

방법: sveltia-cms-auth 원클릭 배포

URL: https://github.com/sveltia/sveltia-cms-auth

환경 변수 설정:

GITHUB_CLIENT_ID=<GitHub OAuth Client ID>
GITHUB_CLIENT_SECRET=<GitHub OAuth Client Secret>

결과물:

  • Worker URL: https://[WORKER_NAME].workers.dev

Phase 3: Jekyll 블로그에 Admin 페이지 추가

3.1 폴더 구조

JunggiKim.github.io/
├── admin/
│   ├── index.html      # Sveltia CMS 로드
│   └── config.yml      # CMS 설정
├── _posts/
├── assets/
│   └── images/
│       └── uploads/    # 업로드 이미지 저장
└── ...

3.2 admin/index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="robots" content="noindex" />
  <title>Content Manager</title>
  <link href="https://unpkg.com/@sveltia/cms/dist/sveltia-cms.css" rel="stylesheet" />
</head>
<body>
  <script src="https://unpkg.com/@sveltia/cms/dist/sveltia-cms.js" type="module"></script>
</body>
</html>

3.3 admin/config.yml

backend:
  name: github
  repo: JunggiKim/JunggiKim.github.io
  branch: main
  base_url: https://[WORKER_NAME].workers.dev

# 로컬 개발 시
local_backend: true

# 미디어 파일 설정
media_folder: "assets/images/uploads"
public_folder: "/assets/images/uploads"

# 사이트 URL
site_url: https://junggikim.github.io
display_url: https://junggikim.github.io

# 로고 (선택)
logo_url: https://junggikim.github.io/assets/images/bio-photo.jpg

# 한국어 설정
locale: ko

# 컬렉션 정의
collections:
  - name: "posts"
    label: "블로그 글"
    label_singular: "글"
    folder: "_posts"
    create: true
    slug: "---"
    preview_path: "///"
    sortable_fields:
      fields: ["date", "title"]
      default:
        field: date
        direction: descending
    fields:
      - label: "제목"
        name: "title"
        widget: "string"
        required: true
      - label: "작성일"
        name: "date"
        widget: "datetime"
        format: "YYYY-MM-DD HH:mm:ss Z"
        date_format: "YYYY-MM-DD"
        time_format: "HH:mm:ss"
      - label: "카테고리"
        name: "categories"
        widget: "list"
        allow_add: true
        default: ["개발"]
      - label: "태그"
        name: "tags"
        widget: "list"
        allow_add: true
      - label: "설명"
        name: "excerpt"
        widget: "text"
        required: false
      - label: "본문"
        name: "body"
        widget: "markdown"

Phase 4: 네비게이션에 글쓰기 버튼 추가

4.1 _data/navigation.yml 수정

main:
  - title: "Home"
    url: /
  - title: "About"
    url: /about/
  - title: "Search"
    url: /search/
  - title: "글쓰기"
    url: /admin/

4.2 (선택) 글쓰기 버튼 스타일링

// assets/css/main.scss에 추가
.greedy-nav a[href="/admin/"] {
  background: var(--accent-primary);
  color: white !important;
  padding: 0.5em 1em;
  border-radius: 20px;

  &:hover {
    background: var(--accent-secondary);
  }
}

Phase 5: 보안 설정

5.1 GitHub OAuth 권한 범위

필요한 권한:
- repo (저장소 읽기/쓰기)
- user:email (사용자 이메일 확인)

불필요한 권한:
- admin:org (조직 관리)
- delete_repo (저장소 삭제)

5.2 접근 제한 (선택)

# admin/config.yml에 추가
backend:
  # ...기존 설정...

  # 특정 사용자만 허용
  # (GitHub 계정명)
  allowed_hosts:
    - junggikim.github.io

사용 흐름

1. 사용자가 /admin/ 접속
   ↓
2. "GitHub로 로그인" 버튼 클릭
   ↓
3. Cloudflare Worker → GitHub OAuth 인증
   ↓
4. 인증 성공 → CMS 대시보드 표시
   ↓
5. 새 글 작성 또는 기존 글 편집
   ↓
6. 저장 버튼 클릭
   ↓
7. GitHub에 자동 커밋 & 푸시
   ↓
8. GitHub Actions → Jekyll 빌드
   ↓
9. 블로그에 새 글 반영 (1-2분 후)

예상 결과

Admin 페이지 UI

┌─────────────────────────────────────────────────────────────┐
│  📝 JunggiKim Blog CMS                    [GitHub로 로그인] │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  ┌──────────────┐  ┌─────────────────────────────────────┐ │
│  │ 📂 컬렉션     │  │  블로그 글                          │ │
│  │              │  │                                     │ │
│  │ ▸ 블로그 글  │  │  [+ 새 글 작성]                     │ │
│  │              │  │                                     │ │
│  │              │  │  ┌─────────────────────────────┐   │ │
│  │              │  │  │ 📄 임시 테스트 글            │   │ │
│  │              │  │  │    2025-11-30               │   │ │
│  │              │  │  └─────────────────────────────┘   │ │
│  │              │  │                                     │ │
│  └──────────────┘  └─────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘

글 작성 화면

┌─────────────────────────────────────────────────────────────┐
│  ← 뒤로    새 글 작성                         [저장] [발행] │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  제목: [                                                  ] │
│                                                             │
│  작성일: [2025-12-03] [14:30:00]                           │
│                                                             │
│  카테고리: [개발] [+]                                       │
│                                                             │
│  태그: [Jekyll] [CMS] [+]                                   │
│                                                             │
│  ─────────────────────────────────────────────────────────  │
│                                                             │
│  본문 (Markdown):                                           │
│  ┌─────────────────────────────────────────────────────┐   │
│  │ B I U ~ ≡ 📷 🔗 <> " • 1.                          │   │
│  ├─────────────────────────────────────────────────────┤   │
│  │                                                     │   │
│  │ # 제목을 입력하세요                                 │   │
│  │                                                     │   │
│  │ 본문 내용을 작성하세요...                           │   │
│  │                                                     │   │
│  └─────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────┘

체크리스트

  • GitHub OAuth App 생성
  • Cloudflare Worker 배포
  • admin/index.html 생성
  • admin/config.yml 생성
  • 네비게이션에 글쓰기 버튼 추가
  • 로컬 테스트
  • GitHub Pages 배포 테스트
  • 실제 글 작성 테스트

예상 소요 시간

단계 예상 시간
GitHub OAuth App 생성 5분
Cloudflare Worker 배포 10분
Admin 페이지 생성 5분
네비게이션 수정 2분
테스트 10분
총 소요 시간 약 30분

참고 자료