첫 EmDash 사이트 만들기 | EmDash CMS Everything

이 튜토리얼은 Starter 템플릿에서 Node.js 사이트를 만듭니다. 결과는 SQLite와 로컬 미디어 스토리지를 사용하므로 클라우드 계정 없이 튜토리얼을 완료할 수 있습니다.

이미 Astro 사이트가 있다면 대신 기존 Astro 프로젝트에 EmDash 추가를 따르세요.

사전 요구 사항

Node.js 22.16 이상과 npm을 설치하세요. 계속하기 전에 설치된 Node.js 버전을 확인하세요.

node --version

명령은 v22.16.0 또는 이후 버전을 보고해야 합니다.

사이트 스캐폴드

대화형 스캐폴더를 시작합니다.
npm
```
npm create emdash@latest
```
pnpm
```
pnpm create emdash@latest
```
yarn
```
yarn create emdash
```
bun
```
bun create emdash@latest
```
프롬프트가 나오면 다음 옵션을 선택하세요.
- Project name: my-emdash-site
- Where will you deploy? Node.js
- Which template? Starter
- Which package manager? 1단계 명령에서 감지된 패키지 관리자를 유지하세요.
- Install dependencies? Yes
이 선택은 Posts와 Pages가 있는 범용 Node.js 사이트를 만듭니다. 스캐폴더는 생성된 EMDASH_ENCRYPTION_KEY도 gitignore된 .env 파일에 씁니다.

의존성 설치가 실패해도 프로젝트 파일은 그대로 남습니다. 계속하기 전에 스캐폴더가 출력한 재시도 명령을 실행하세요.
프로젝트 디렉터리로 들어가 개발 서버를 시작합니다.
npm
```
cd my-emdash-site
npm run dev
```
pnpm
```
cd my-emdash-site
pnpm dev
```
yarn
```
cd my-emdash-site
yarn dev
```
bun
```
cd my-emdash-site
bun dev
```
이 터미널을 열어 두세요. Astro는 보통 http://localhost:4321/인 로컬 사이트 URL을 출력합니다.

설정 완료

http://localhost:4321/_emdash/admin/을 엽니다. 새 사이트는 설정 마법사로 리다이렉트됩니다.

Site Title과 선택적 Tagline을 입력하세요. 튜토리얼이 템플릿의 Welcome 게시물과 About 페이지로 시작하도록 Include sample content를 선택한 채로 두고 Continue를 선택하세요.
Your Email과 선택적 Your Name을 입력한 뒤 Continue를 선택하세요.
브라우저가 자격 증명 프롬프트를 열면 패스키를 등록하세요. 등록 후 Open the dashboard를 선택하세요.

대시보드가 열리고 탐색에 Posts와 Pages가 있습니다. 설정 마법사가 Starter 템플릿의 콘텐츠 모델과 샘플 콘텐츠를 로컬 SQLite 데이터베이스에 적용했습니다.

편집 게시

Posts를 연 다음 Welcome을 엽니다.
제목을 Hello from EmDash로 바꾼 뒤 Save를 선택합니다.
Publish changes를 선택해 저장된 초안이 방문자에게 보이는 버전이 되게 합니다.
다른 탭에서 http://localhost:4321/을 엽니다. 홈페이지에 Hello from EmDash가 나열됩니다.

Starter 템플릿은 Astro가 홈페이지를 렌더할 때 getEmDashCollection("posts")를 호출합니다. 페이지를 다시 로드하면 런타임에 EmDash에서 게시된 버전을 읽습니다.

생성된 사이트의 작동 방식

스캐폴드는 EmDash가 세 곳에서 연결된 일반 Astro 프로젝트를 만듭니다.

astro.config.mjs는 서버 렌더링과 Node.js 어댑터를 활성화합니다. 관리 패널용 React도 등록하고 EmDash에 SQLite 데이터베이스와 업로드된 미디어용 디렉터리를 줍니다. src/live.config.ts 파일은 그 데이터베이스 기반 콘텐츠를 Astro의 Live Content Collections에 연결합니다.

홈페이지는 그다음 posts 컬렉션을 조회합니다. 그 쿼리는 생성된 페이지의 다음 부분과 같습니다.

---
import { getEmDashCollection } from "emdash";

const { entries: posts, cacheHint } = await getEmDashCollection("posts", {
	orderBy: { published_at: "desc" },
});

if (Astro.cache?.enabled) Astro.cache.set(cacheHint);
---

<ul>
	{posts.map((post) => <li>{post.data.title}</li>)}
</ul>

seed/seed.json은 Posts와 Pages 컬렉션, 그 필드, 설정 마법사가 적용한 샘플 콘텐츠를 정의합니다. 로컬 개발 중 EmDash는 그 모델을 읽고 emdash-env.d.ts를 갱신하므로, 에디터가 쿼리 코드에서 컬렉션 이름과 필드를 검사할 수 있습니다.

생성된 .env는 런타임에 암호화 키를 제공합니다. 모델과 콘텐츠를 저장하는 SQLite 파일과는 별개입니다.

다음 단계

이 부분들이 어떻게 함께 작동하는지는 아키텍처를 읽으세요. 이미 있는 사이트에 EmDash를 추가하려면 기존 Astro 프로젝트에 EmDash 추가를 따르세요. 콘텐츠 조회 가이드는 필터, 페이지네이션, 초안, 오류 처리를 다룹니다. 사이트가 머신을 떠날 준비가 되면 Cloudflare Workers 또는 Node.js에 배포하세요. 미디어 라이브러리 가이드는 업로드, 미디어 필드, 교체, 삭제를 설명합니다.