첫 번째 EmDash 사이트 만들기

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

사전 요구사항

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

node --version

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

사이트 스캐폴딩

Node.js Starter 템플릿에서 my-emdash-site를 생성합니다:
```
npm create emdash@latest my-emdash-site -- --template node:starter --pm npm --yes
```
명시적 node:starter 선택은 Posts와 Pages가 포함된 범용 사이트를 만듭니다. 스캐폴더는 의존성을 설치하고 생성된 EMDASH_ENCRYPTION_KEY를 gitignore된 .env 파일에 작성합니다.

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

설정 완료

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에 배포하세요. 미디어 라이브러리 가이드에서 업로드, 미디어 필드, 교체, 삭제를 설명합니다.