📚 개발자 서고

1) 개요

7 min read

Obsidian을 웹으로 배포하는 방법

1. Quartz 사용

정적 사이트 생성기 중 Obsidian과의 호환성이 뛰어난 Quartz 4.0 버전을 사용하여 웹 배포를 진행할 수 있습니다.

1-1. Quartz와 Obsidian Vault 통합

① Obsidian Vault 내에 Quartz를 서브디렉토리로 포함하는 방법

  • 장점
    1. 단일 저장소로 관리 가능
    2. 일관된 버전 관리 가능
  • 단점
    • 저장소의 크기가 증가함
    • 업스트림 동기화 복잡성 증가
      • Quartz의 업스트림 변경 사항을 통합할 때 충돌이 발생할 가능성이 있음

② Quartz 내에 Obsidian Vault를 서브디렉토리로 포함하는 방법

  • 장단점은 위와 동일

1-2. Quartz와 Obsidian Vault를 별개 저장소로 사용

별도의 저장소로 유지하면서, Quartz CLI 옵션을 통해 빌드 시 Vault의 문서를 참조하는 방식입니다.

  • 장점
    • 명확한 역할 분리
      • Quartz는 블로그 레이아웃 및 편의 기능 담당
      • Vault는 콘텐츠 관리 담당
    • 독립적인 버전 관리 가능
      • 각 저장소가 분리되어 있어 충돌 가능성이 없음
  • 단점
    • 동기화 작업 필요
      • Quartz 빌드 시 Vault 경로를 content 폴더로 설정해야 함
    • 배포 프로세스가 복잡함
      • 저장소가 분리되면서 배포 시 두 저장소 간의 변경 사항을 조정하는 과정이 추가됨

2. Obsidian Publish 사용

Obsidian의 코어 플러그인인 Publish를 활용하여 웹 배포를 진행할 수도 있습니다.

  • 장점
    • 간편한 설정
    • 자동화된 링크 관리
  • 단점
    • 유료 서비스
    • Quartz에 비해 커스터마이징이 제한됨

그래서 어떤 방법을 선택했는가?

✅ Quartz와 Vault를 별개의 저장소로 관리

  • Vault가 순수하게 문서 작업을 위한 공간으로 남아 있도록 하기 위해 별도 저장소로 유지
  • GitHub Actions를 활용하여 동기화 및 배포 자동화

✅ GitHub Actions를 활용한 동기화 및 배포

  • Quartz 저장소에서 GitHub Actions 수행 시 Vault 저장소를 GitHub Token을 활용하여 가져오기
    • 가져온 Vault 저장소의 main 브랜치를 빌드 시 content 폴더로 사용
  • Vault 콘텐츠 업데이트 시 Quartz 저장소의 Action을 자동 수행하도록 설정
    • Vault main 브랜치에 Push할 경우, Quartz 저장소의 Action이 실행되도록 구성

✅ Cloudflare Pages를 사용하여 배포

  • Cloudflare에 도메인을 보유하고 있음
  • Cloudflare가 성능이 우수하며, 추가 비용 발생 시에도 감당할 의향이 있음
  • GitHub Pages를 사용하지 않기로 결정
    • Cloudflare와 GitHub Pages 모두 정적 사이트 호스팅 및 Git 연동 지원
    • 하지만 Cloudflare는 더 빠른 성능, 무제한 대역폭, 비공개 저장소 지원 등의 장점이 있음
    • GitHub Pages는 Cloudflare에 비해 성능이 부족하고, 비공개 저장소 사용 시 유료 플랜 필요
    • Cloudflare는 빌드가 월 500회로 제한되지만, 빌드는 GitHub Actions에서 진행되므로 큰 문제가 되지 않음

✅ Backblaze B2를 사용한 이미지 호스팅

  • 현재 게시글에서는 다루지 않지만, 추후 별도 포스트에서 설명 예정
  • Backblaze B2는 무료로 10GB 스토리지 제공
  • Cloudflare와 Backblaze B2는 Bandwidth Alliance 파트너
    • 서로 간 데이터 전송 시 추가 비용 없음
    • Cloudflare Worker와 연동하여 이미지 요청을 Cloudflare 엣지 서버에서 처리
    • 이를 통해 지연 시간 최소화 및 서버 부하 감소
    • 동시에 Backblaze B2의 요청 횟수를 줄여 비용 절감

3. 아키텍처 구성

아래는 전체적인 아키텍처를 도식화한 그림입니다.

영어 버전

블로그 아키텍처-영어

graph TD;
 
    subgraph User Device
        PC[Obsidian Vault - local PC]
        Mobile[Obsidian Vault - Mobile]
        Tablet[Obsidian Vault - Tablet]
    end
    
    subgraph GitHub Repo
        VaultRepo[Obsidian Vault Repo]
        QuartzRepo[Quartz 4.0 Repo]
    end
 
    subgraph CI/CD - GitHub Actions
        VaultAction[Trigger Quartz Deploy]
        QuartzAction[Deploy to Cloudflare Pages]
    end
 
    subgraph Cloudflare
        CloudflarePages[Cloudflare Pages - limc.dev]
        CloudflareWorker[Cloudflare Worker - imgs.limc.dev]
    end
 
    subgraph Storage
        B2[BackBlaze B2 - Image Storage]
    end
    
     GitHub Actions Workflow
    VaultRepo -->|Push - publish| VaultAction
    VaultAction -->|Trigger| QuartzRepo
    QuartzRepo -->|Build| QuartzAction
    QuartzAction -->|Deploy| CloudflarePages
 
     User Access
    User[User] -->|Access Blog| CloudflarePages
    User -->|Request Images| CloudflareWorker

한글 버전

블로그 아키텍처-한글

graph TD;
 
    subgraph 사용자 기기
        PC[Obsidian Vault - 로컬 PC]
        Mobile[Obsidian Vault - 모바일]
        Tablet[Obsidian Vault - 태블릿]
    end
 
    subgraph GitHub 저장소
        VaultRepo[Obsidian Vault 저장소]
        QuartzRepo[Quartz 4.0 저장소]
    end
 
    subgraph CI/CD - GitHub Actions
        VaultAction[Quartz 배포 트리거]
        QuartzAction[Cloudflare Pages 배포]
    end
 
    subgraph Cloudflare
        CloudflarePages[Cloudflare Pages - limc.dev]
        CloudflareWorker[Cloudflare Worker - imgs.limc.dev]
    end
 
    subgraph 스토리지
        B2[BackBlaze B2 - 이미지 저장소]
    end
 
     GitHub Actions 작업 흐름
    VaultRepo -->|Push - publish| VaultAction
    VaultAction -->|Quartz 저장소 빌드 트리거| QuartzRepo
    QuartzRepo -->|빌드 수행| QuartzAction
    QuartzAction -->|Cloudflare Pages에 배포| CloudflarePages
 
     사용자 접근
    User[사용자] -->|블로그 접속| CloudflarePages
    User -->|이미지 요청| CloudflareWorker

마무리

이 글에서는 Obsidian Vault를 웹으로 배포하기 위한 계획과 선택 과정을 정리했습니다.

  • Quartz와 Obsidian Publish 중 Quartz를 선택
  • Vault와 Quartz를 별도 저장소로 관리하는 방식 채택
  • GitHub Actions를 활용한 자동 배포 구성
  • Cloudflare Pages와 Backblaze B2를 활용한 배포 및 이미지 호스팅 방식 고려

앞으로 구체적인 구현 과정과 설정 방법을 다루면서, 각 단계를 상세히 설명할 예정입니다.

그래프 뷰