Criar seu primeiro site EmDash | EmDash CMS Everything

Este tutorial cria um site Node.js a partir do modelo Starter. O resultado usa SQLite e armazenamento de mídia local, de modo que você pode concluir o tutorial sem uma conta na nuvem.

Se você já tem um site Astro, siga Adicionar EmDash a um projeto Astro existente em vez disso.

Pré-requisitos

Instale Node.js 22.16 ou posterior e npm. Verifique a versão instalada do Node.js antes de continuar:

node --version

O comando deve informar v22.16.0 ou uma versão posterior.

Gerar o site

Inicie o gerador interativo:
npm
```
npm create emdash@latest
```
pnpm
```
pnpm create emdash@latest
```
yarn
```
yarn create emdash
```
bun
```
bun create emdash@latest
```
Escolha as seguintes opções quando solicitado:
- Project name: my-emdash-site
- Where will you deploy? Node.js
- Which template? Starter
- Which package manager? Mantenha o gerenciador de pacotes detectado a partir do comando da etapa 1.
- Install dependencies? Yes
Essas escolhas criam um site Node.js de propósito geral com Posts e Pages. O gerador também escreve um EMDASH_ENCRYPTION_KEY gerado no arquivo .env ignorado pelo git.

Se a instalação de dependências falhar, os arquivos do projeto permanecem no lugar. Execute o comando de nova tentativa impresso pelo gerador antes de continuar.
Entre no diretório do projeto e inicie o servidor de desenvolvimento:
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
```
Mantenha este terminal aberto. O Astro imprime a URL local do site, normalmente http://localhost:4321/.

Concluir a configuração

Abra http://localhost:4321/_emdash/admin/. Um site novo redireciona para o assistente de configuração.

Digite um Site Title e um Tagline opcional. Deixe Include sample content selecionado para que o tutorial comece com o post Welcome e a página About do modelo, e então selecione Continue.
Digite Your Email e um Your Name opcional, e então selecione Continue.
Registre uma passkey quando o navegador abrir o prompt de credenciais. Após o registro, selecione Open the dashboard.

O painel abre com Posts e Pages na navegação. O assistente de configuração aplicou o modelo de conteúdo e o conteúdo de exemplo do modelo Starter ao banco de dados SQLite local.

Publicar uma edição

Abra Posts e depois Welcome.
Altere o título para Hello from EmDash e então selecione Save.
Selecione Publish changes para que o rascunho salvo se torne a versão mostrada aos visitantes.
Abra http://localhost:4321/ em outra aba. A página inicial lista Hello from EmDash.

O modelo Starter chama getEmDashCollection("posts") quando o Astro renderiza a página inicial. Recarregar a página lê a versão publicada do EmDash em tempo de execução.

Como o site gerado funciona

O scaffold produz um projeto Astro normal com EmDash conectado em três lugares.

astro.config.mjs habilita a renderização no servidor e o adaptador Node.js. Também registra React para o painel de administração e dá ao EmDash um banco de dados SQLite e um diretório para mídia enviada. O arquivo src/live.config.ts conecta esse conteúdo baseado no banco às Live Content Collections do Astro.

A página inicial então consulta a coleção posts. Sua consulta é equivalente à seguinte parte da página gerada:

---
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 define as coleções Posts e Pages, seus campos e o conteúdo de exemplo que o assistente de configuração aplicou. Durante o desenvolvimento local, o EmDash lê esse modelo e atualiza emdash-env.d.ts, para que seu editor possa verificar nomes de coleção e campos no código de consulta.

O .env gerado fornece a chave de criptografia em tempo de execução. É separado do arquivo SQLite que armazena o modelo e o conteúdo.

Próximos passos

Leia Arquitetura para ver como essas partes funcionam juntas. Para adicionar EmDash a um site que já existe, siga Adicionar EmDash a um projeto Astro existente. O guia Consultar conteúdo cobre filtros, paginação, rascunhos e tratamento de erros. Quando o site estiver pronto para sair da sua máquina, implante-o em Cloudflare Workers ou Node.js. O guia Biblioteca de mídia explica uploads, campos de mídia, substituição e exclusão.