EmDash 테마는 페이지, 레이아웃, 컴포넌트, 스타일을 갖춘 완전한 Astro 사이트이며 create-astro로 배포됩니다. 첫 실행 시 컬렉션, 필드, 메뉴, 리다이렉트, 샘플 콘텐츠로 데이터베이스를 초기화하는 시드 파일도 포함합니다.
테마가 제공하는 것
테마는 다음을 갖춘 동작하는 Astro 프로젝트입니다.
- Pages — 콘텐츠를 렌더링하는 Astro 라우트(홈, 블로그 글, 아카이브 등)
- Layouts — 공유 HTML 구조
- Components — 재사용 UI(내비게이션, 카드, 푸터 등)
- Styles — CSS 또는 Tailwind 설정
- 시드 파일 — CMS에 만들 콘텐츠 유형과 필드를 알려 주는 JSON
테마 구조
my-theme/
├── package.json # 테마 메타데이터 + EmDash 설정
├── astro.config.mjs # Astro 통합 설정
├── src/
│ ├── live.config.ts # Live Collections 설정
│ ├── pages/ # Astro 라우트
│ ├── layouts/ # 레이아웃 컴포넌트
│ └── components/ # UI 컴포넌트
└── .emdash/
├── seed.json # 스키마 + 샘플 콘텐츠
└── uploads/ # 선택적 로컬 미디어테마가 사이트를 부트스트랩하는 방식
테마로 사이트를 만들면 다음이 진행됩니다.
create-astro가 템플릿에서 프로젝트를 스캐폴딩합니다npm install과npm run dev를 실행합니다- 관리자 첫 방문 시 설정 마법사가 자동으로 실행됩니다
- 마법사가 시드 파일을 적용해 컬렉션, 메뉴, 리다이렉트, 콘텐츠를 만듭니다
- 사이트를 바로 사용할 수 있습니다
사용자용
테마를 고르고 마법사를 실행한 뒤 편집을 시작합니다. 데이터베이스 지식은 필요 없습니다.
개발자용
테마는 표준 Astro 프로젝트입니다. 스캐폴딩 후 자유롭게 커스터마이즈할 수 있습니다.
테마 설치
create-astro에 템플릿을 지정합니다.
npm create astro@latest -- --template @emdash-cms/template-blog커뮤니티 테마는 GitHub를 통해 사용합니다.
npm create astro@latest -- --template github:user/emdash-portfolio설치 후:
cd my-site
npm install
npm run dev설정 마법사를 마치려면 http://localhost:4321/_emdash/admin으로 이동합니다.
설정 마법사
설정 마법사는 관리자 첫 방문 시 자동으로 실행됩니다. 다음을 수행합니다.
- 사이트 제목, 태그라인, 관리자 자격 증명을 입력합니다
- 샘플 콘텐츠 포함 여부를 선택할 수 있습니다
- 시드 파일을 데이터베이스에 적용합니다
- 관리 대시보드로 리다이렉트합니다
┌────────────────────────────────────────────────────────┐
│ │
│ ◆ EmDash │
│ │
│ 새 사이트에 오신 것을 환영합니다 │
│ │
│ 사이트 제목: [멋진 블로그 ] │
│ 태그라인: [생각과 아이디어 ] │
│ │
│ 관리자 이메일: [[email protected] ] │
│ 관리자 비밀번호: [•••••••••••• ] │
│ │
│ ☑ 샘플 콘텐츠 포함 │
│ │
│ [사이트 만들기 →] │
│ │
│ 템플릿: Blog Starter │
│ 생성: 컬렉션 2개, 페이지 3개, 글 1개 │
└────────────────────────────────────────────────────────┘공식 테마
EmDash는 공식 스타터 테마를 제공하며, 각각 로컬(SQLite + 파일 시스템) 변형과 Cloudflare(D1 + R2) 변형이 있습니다.
| 테마 | 설명 | 용도 |
|---|---|---|
@emdash-cms/template-blog | 글, 페이지, 카테고리, 다크 모드가 있는 미니멀 블로그 | 개인 블로그, 단순 사이트 |
@emdash-cms/template-portfolio | 프로젝트, 세리프 타이포그래피(Playfair Display), 이미지 중심 레이아웃의 에디토리얼형 포트폴리오 | 프리랜서, 에이전시, 크리에이티브 |
@emdash-cms/template-marketing | 커스텀 Portable Text 블록(히어로, 기능, 고객 후기, 가격, FAQ)이 있는 강한 마케팅 사이트 | 랜딩, SaaS, 제품 마케팅 |
Cloudflare 변형
Cloudflare Pages(D1 + R2)에 배포할 때는 템플릿 이름 끝에 -cloudflare를 붙입니다.
npm create astro@latest -- --template @emdash-cms/template-blog-cloudflare
npm create astro@latest -- --template @emdash-cms/template-portfolio-cloudflare
npm create astro@latest -- --template @emdash-cms/template-marketing-cloudflare이 변형에는 배포 설정용 wrangler.jsonc가 포함됩니다.
설치 후 커스터마이징
설정 마법사가 끝나면 사이트는 일반 Astro 프로젝트입니다. 다른 Astro 사이트처럼 수정할 수 있습니다.
src/pages/의 페이지 편집src/layouts/의 레이아웃 수정- 관리 UI로 컬렉션 추가
- Astro 통합 설치
- Astro가 동작하는 환경 어디로든 배포
시드 파일은 최초 설정 시에만 사용됩니다. 적용 후 스키마는 데이터베이스에 저장됩니다.