Seihwan Moon

obsidian-webpage-export

8 min read

프로젝트 소개

Repository
공식 문서: docs.obsidianweb.net
<kbd>Stars</kbd> 1275 <kbd>Forks</kbd> 115 <kbd>License</kbd> MIT <kbd>Primary Language</kbd> TypeScript

한 줄 요약

Obsidian의 노트, Canvas, 전체 Vault를 웹용 HTML로 내보내는 플러그인.

읽기 가이드

  • 먼저 빠른 시작, 폴더 구조, 실행 흐름을 확인
  • 추정 또는 확인 필요 표시는 저장소 구조 기준 판단1

한눈에 보는 핵심 포인트

KosmosisDire/obsidian-webpage-export · Stars 1275 · Forks 115 · License MIT · Primary Language TypeScript

항목값
저장소KosmosisDire/obsidian-webpage-export
기본 브랜치master
주요 언어TypeScript
항목메모
목적Obsidian 콘텐츠를 정적 HTML로 변환
입력 범위단일 파일, Canvas 페이지, 전체 Vault
출력 성격직접 접근 가능한 HTML 파일, 정적 호스팅 친화
강점검색, 파일 트리, outline, graph, 테마 토글
호환성Dataview, Tasks 등 다수 플러그인 지원
배포 옵션단일 파일 export, 일반 파일 분리 export 모두 지원
상태기능은 동작, 다만 업데이트 변동 폭 큼 README 기준
활용처디지털 가든, 개인 위키, 웹 공개용 노트

무엇을 하는 저장소인가

질문답
이 저장소의 역할Obsidian 콘텐츠를 브라우저에서 읽는 HTML로 바꾸는 플러그인
해결하려는 문제노트를 Obsidian 안에만 두지 않고, 웹으로 그대로 노출
핵심 가치스타일 보존, 기능 보존, 배포 단순화
대상 콘텐츠개별 문서, Canvas 페이지, 전체 Vault
결과물HTML 본문 + 필요 시 의존성 파일
주의점개발 중 프로젝트라 변경 폭과 버그 가능성 존재

빠른 시작

상황절차메모
일반 사용자Obsidian Community Plugins에서 설치Open in Obsidian 링크 사용 가능
수동 설치최신 릴리스 zip 다운로드 → {VaultFolder}/.obsidian/plugins/에 압축 해제 → Obsidian 재시작Vault 기준 경로
베타 설치BRAT 설치 → 저장소 URL 등록 → Add Plugin베타 채널용
개발 준비npm installpackage-lock.json 기준
개발 실행npm run devnode esbuild.config.mjs
배포 빌드npm run buildtsc -noEmit -skipLibCheck && node esbuild.config.mjs production
버전 갱신npm run versionmanifest.json, versions.json 갱신
컨테이너 경로Dockerfile 기반 이미지 빌드docker-compose.yaml 세부는 확인 필요

폴더 구조

구역대표 파일역할
루트 설정package.json, tsconfig.json, eslint.config.mjs, esbuild.config.mjs빌드, 검사, 번들링
소스src/핵심 TypeScript 구현
스타일/메타styles.css, manifest.json, manifest-beta.json, versions.json플러그인 스타일과 배포 메타
문서README.md, docs/사용자 안내, 개발/배포 문서
테스트tests/유틸, 파이프라인, 렌더러, 배포 검증
자동화scripts/, .github/, action.yml품질 검사, CI, 릴리스 보조
템플릿templates/summary_templates.json요약 템플릿 데이터
컨테이너Dockerfile, docker-compose.yaml, docker/Docker 기반 실행 경로
라이선스LICENSEMIT 라이선스 본문

실행 흐름

단계흐름결과
1Obsidian 입력 선택단일 파일, Canvas, 전체 Vault
2문서와 메타데이터 수집본문, 탐색, outline, graph 재료
3HTML 렌더링웹용 구조 생성
4스타일과 의존성 처리분리 파일 또는 단일 파일 export
5출력 저장정적 호스팅 가능한 HTML 생성
6웹 공개직접 접근 가능한 페이지로 배포
단계빌드/배포 흐름결과
1TypeScript 검사타입 오류 사전 차단
2esbuild 번들링플러그인 산출물 생성
3Obsidian 로드main.js, styles.css, manifest.json 사용
4Docker 경로Obsidian 다운로드 후 electron-injector로 플러그인 주입
5런타임 볼륨/vault, /output, /config.json 사용

기술 스택

계층기술역할메모
언어TypeScript핵심 구현 언어확인됨
번들러esbuild빠른 빌드와 패키징npm run dev, npm run build
타입 검사TypeScript compiler정적 검증tsc -noEmit -skipLibCheck
런타임Obsidian / Electron플러그인 호스트Docker에서 Obsidian 다운로드
스타일CSS, PostCSS플러그인/출력 스타일 처리postcss-safe-parser 포함
검색/색인minisearch문서 검색 기능추정
콘텐츠 처리html-minifier-terser, mime, file-type, upath, rssHTML 축소, 타입 판별, 경로, 피드 보조일부 역할 추정
자동화Docker, GitHub Actions빌드/배포 자동화Dockerfile, .github/, action.yml
테스트BrowserStack브라우저 호환성 확인README 기준

먼저 읽을 파일

순서파일이유
1README.md기능, 설치 방식, 공식 문서 링크
2package.json스크립트, 의존성, 빌드 흐름
3docs/CURRENT_STATUS.md현재 진행 상태
4docs/DEVELOPMENT.md개발 규칙과 작업 방식
5docs/DEPLOYMENT.md배포 방식, Docker, 릴리스 맥락
6Dockerfile컨테이너 실행 구조
7src/ 내부 진입점핵심 로직 확인, 세부는 확인 필요
8tests/실제 동작 범위와 회귀 검증 기준

용어 사전

용어뜻메모
VaultObsidian의 저장소 단위노트 전체 묶음
Canvas pageObsidian Canvas의 한 장페이지 단위 export 대상
Digital garden개인 지식 웹사이트 형태HTML 공개 목적
Style parity원본 Obsidian 스타일과 결과 HTML의 일치도이 저장소의 핵심 목표
Single-file exportHTML과 의존성을 하나로 묶는 방식배포 편의성 우선
BRATObsidian 베타 플러그인 설치 도구베타 설치 경로
BrowserStack브라우저 호환성 테스트 서비스테스트 수단
Outline문서 목차 / 구조 정보탐색 보조 기능
Graph view노트 간 연결 시각화Obsidian 특유의 탐색 방식

Mermaid 다이어그램

내보내기 흐름

flowchart TD
    A[Obsidian 노트] --> B[플러그인]
    C[Canvas 페이지] --> B
    D[전체 Vault] --> B
    B --> E[HTML 생성]
    E --> F[의존성 처리]
    F --> G[출력 폴더]
    G --> H[정적 호스팅 / 웹 공개]

빌드/배포 흐름

flowchart TD
    A["TypeScript 소스"] --> B["tsc 검사"]
    B --> C["esbuild 번들링"]
    C --> D["main.js / styles.css / manifest.json"]
    D --> E["Obsidian 플러그인"]
    F["Dockerfile"] --> G["Obsidian 런타임"]
    G --> H["electron-injector"]
    E --> H
    H --> I["/vault /output"]

컬렉션 연결

Footnotes

  1. README, docs, manifest, key files, CI 파일 기준 자동/수동 혼합 정리. 실제 실행 검증은 별도로 확인해야 한다. ↩

백링크

Latest Notes

그래프 뷰