Crie seu primeiro site EmDash | EmDash CMS Everything

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

Pré-requisitos

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

node --version

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

Criar o site

Crie my-emdash-site a partir do template Node.js Starter:
```
npm create emdash@latest my-emdash-site -- --template node:starter --pm npm --yes
```
A escolha explícita node:starter cria um site de propósito geral com Posts e Pages. O scaffolder instala dependências e 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 repetição impresso pelo scaffolder antes de continuar.
Entre no diretório do projeto e inicie o servidor de desenvolvimento:
```
cd my-emdash-site
npm run dev
```
Mantenha este terminal aberto. Astro imprime a URL do site local, normalmente http://localhost:4321/.

Completar a configuração

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

Insira um Site Title e uma Tagline opcional. Deixe Include sample content selecionado para que o tutorial comece com o post Welcome e a página About do template, depois selecione Continue.
Insira Your Email e um Your Name opcional, depois selecione Continue.
Registre um passkey quando o navegador abrir seu 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 conteúdo de exemplo do template Starter ao banco de dados SQLite local.

Publicar uma edição

Abra Posts, depois abra Welcome.
Mude o título para Hello from EmDash, depois 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 template Starter chama getEmDashCollection("posts") quando 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 renderização no servidor e o adaptador Node.js. Também registra React para o painel de admin e dá ao EmDash um banco de dados SQLite e um diretório para mídia carregada. O arquivo src/live.config.ts conecta esse conteúdo respaldado pelo banco de dados à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, EmDash lê esse modelo e atualiza emdash-env.d.ts, para que seu editor possa verificar nomes de coleções 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 como essas partes trabalham juntas. Para adicionar EmDash a um site que já existe, siga Adicionar EmDash a um projeto Astro existente. O guia de consulta de conteúdo cobre filtros, paginação, rascunhos e tratamento de erros. Quando o site estiver pronto para sair da sua máquina, implante-o no Cloudflare Workers ou Node.js. O guia da biblioteca de mídia explica uploads, campos de mídia, substituição e exclusão.