Primeros pasos

Esta guía te lleva desde la instalación hasta publicar tu primera entrada en un sitio EmDash.

Requisitos previos

• Node.js v22.12.0 o superior (no se admiten versiones impares)
• npm, pnpm o yarn
• Un editor de código (se recomienda VS Code)

Crear un proyecto nuevo

npm create emdash@latest

pnpm create emdash@latest

yarn create emdash

Sigue las indicaciones para nombrar el proyecto y configurar tus preferencias.

Iniciar el servidor de desarrollo

Completar el asistente de configuración

La primera vez que visites el panel de administración, el asistente de configuración de EmDash te guía en la configuración inicial:

Cuando el passkey esté registrado, iniciarás sesión y serás redirigido al panel de administración.

Tu primera entrada

Estructura del proyecto

Tu proyecto EmDash sigue la estructura habitual de Astro con algunos añadidos:

my-emdash-site/
├── astro.config.mjs      # Configuración de Astro + EmDash
├── src/
│   ├── live.config.ts    # Configuración de Live Collections
│   ├── pages/
│   │   ├── index.astro   # Página de inicio
│   │   └── posts/
│   │       └── [...slug].astro  # Páginas dinámicas de entradas
│   ├── layouts/
│   │   └── Base.astro    # Diseño base
│   └── components/       # Tus componentes Astro
├── .emdash/
│   ├── seed.json         # Archivo semilla de la plantilla
│   └── types.ts          # Tipos TypeScript generados
└── package.json

Archivos de configuración

astro.config.mjs

Configura EmDash como integración de Astro:

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

Conecta EmDash al sistema de contenidos de Astro:

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

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

Variables de entorno

En despliegues de producción necesitarás definir:

# Required for authentication
EMDASH_AUTH_SECRET=your-secret-here

# Optional: for content preview
EMDASH_PREVIEW_SECRET=your-preview-secret

Genera un secreto de autenticación seguro con:

npx emdash auth secret

Consultar contenido en las páginas

Usa las funciones de consulta de EmDash en tus páginas Astro. Siguen el patrón de live collections de Astro y devuelven { entries, error } para colecciones y { entry, error } para entradas individuales:

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

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

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

Para una sola entrada:

---
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>

Generar tipos de TypeScript

Para seguridad de tipos completa, genera tipos a partir del esquema de la base de datos:

npx emdash types

Esto crea .emdash/types.ts con interfaces para todas tus colecciones. El editor autocompletará nombres de campo y detectará errores de tipo.

Próximos pasos

¡Ya tienes un sitio EmDash en marcha! Sigue por aquí:

• Conceptos básicos — Cómo funciona EmDash por dentro
• Trabajar con contenido — Consultar y renderizar contenido
• Biblioteca multimedia — Subir y gestionar imágenes y archivos
• Crear un blog — Montar un blog con categorías y etiquetas
• Desplegar en Cloudflare — Llevar el sitio a producción