Primeiros Passos

Este guia orienta você na criação do seu primeiro site EmDash, desde a instalação até a publicação da sua primeira postagem.

Pré-requisitos

• Node.js v22.12.0 ou superior (versões com números ímpares não são suportadas)
• npm, pnpm ou yarn
• Um editor de código (VS Code recomendado)

Criar um Novo Projeto

npm create emdash@latest

pnpm create emdash@latest

yarn create emdash

Siga as instruções para nomear seu projeto e configurar suas preferências.

Iniciar o Servidor de Desenvolvimento

Completar o Assistente de Configuração

Quando você visita o painel de administração pela primeira vez, o Assistente de Configuração do EmDash orienta você através da configuração inicial:

Uma vez que sua passkey esteja registrada, você está logado e redirecionado para o painel de administração.

Sua Primeira Postagem

Estrutura do Projeto

Seu projeto EmDash segue uma estrutura Astro padrão com algumas adições:

my-emdash-site/
├── astro.config.mjs      # Configuração Astro + EmDash
├── src/
│   ├── live.config.ts    # Configuração Live Collections
│   ├── pages/
│   │   ├── index.astro   # Página inicial
│   │   └── posts/
│   │       └── [...slug].astro  # Páginas de postagem dinâmicas
│   ├── layouts/
│   │   └── Base.astro    # Layout base
│   └── components/       # Seus componentes Astro
├── .emdash/
│   ├── seed.json         # Arquivo seed de template
│   └── types.ts          # Tipos TypeScript gerados
└── package.json

Arquivos de Configuração

astro.config.mjs

A seguinte configuração registra o EmDash como uma integração Astro com um banco de dados SQLite local e armazenamento de arquivo local:

import { defineConfig } from "astro/config";
import emdash, { local } from "emdash/astro";
import { sqlite } from "emdash/db";

export default defineConfig({
	integrations: [
		emdash({
			database: sqlite({ url: "file:./data.db" }),
			storage: local({
				directory: "./uploads",
				baseUrl: "/_emdash/api/media/file",
			}),
		}),
	],
});

src/live.config.ts

O seguinte arquivo conecta o EmDash ao sistema de conteúdo do Astro através de uma única coleção ao vivo:

import { defineLiveCollection } from "astro:content";
import { emdashLoader } from "emdash/runtime";

export const collections = {
	_emdash: defineLiveCollection({ loader: emdashLoader() }),
};

Variáveis de Ambiente

Para produção, gere uma chave de criptografia para segredos de plugins com o seguinte comando:

npx emdash secrets generate

Adicione o valor gerado ao seu ambiente como EMDASH_ENCRYPTION_KEY, conforme mostrado abaixo. Esta chave criptografa segredos de plugins em repouso. Configure-a agora para que sua implantação esteja pronta quando a criptografia de segredos de plugins a usar.

EMDASH_ENCRYPTION_KEY=emdash_enc_v1_...

A chave nunca é armazenada no banco de dados — apenas texto cifrado criptografado é armazenado. Faça backup em algum lugar durável, porque perdê-la significa perder todos os segredos criptografados com ela.

O segredo HMAC de visualização e o salt de hash de IP do comentarista são gerados e armazenados no banco de dados no primeiro uso, então você não precisa configurá-los. Substitua o segredo de visualização apenas se um processo separado precisar verificar os mesmos tokens que seu site principal, conforme mostrado abaixo.

EMDASH_PREVIEW_SECRET=your-preview-secret

Consultar Conteúdo em Páginas

Use as funções de consulta do EmDash em suas páginas Astro. Estas seguem o padrão de coleções ao vivo do Astro, retornando { entries, error } para coleções e { entry, error } para entradas individuais:

---
import { getEmDashCollection } from "emdash";
import Base from "../layouts/Base.astro";

const { entries: posts } = await getEmDashCollection("posts");
---

<Base title="Home">
  <h1>Últimas Postagens</h1>
  <ul>
    {posts.map((post) => (
      <li>
        <a href={`/posts/${post.slug}`}>{post.data.title}</a>
      </li>
    ))}
  </ul>
</Base>

A página seguinte busca uma entrada individual por slug:

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

const { slug } = Astro.params;
const { entry: post } = await getEmDashEntry("posts", slug);

if (!post) {
  return Astro.redirect("/404");
}
---

<h1>{post.data.title}</h1>

Gerar Tipos TypeScript

Para segurança de tipo completa, gere tipos a partir do seu esquema de banco de dados:

npx emdash types

Isso cria .emdash/types.ts com interfaces para todas as suas coleções. Seu editor agora autocompletará nomes de campos e detectará erros de tipo.

Próximos Passos

Com o site em execução, as seguintes páginas cobrem o que fazer a seguir:

• Conceitos Básicos — Entenda como o EmDash funciona internamente
• Trabalhar com Conteúdo — Aprenda a consultar e renderizar conteúdo
• Biblioteca de Mídia — Faça upload e gerencie imagens e arquivos
• Criar um Blog — Construa um blog completo com categorias e tags
• Implantar no Cloudflare — Leve seu site para produção