Crea il tuo primo sito EmDash | EmDash CMS Everything

Questo tutorial crea un sito Node.js dal modello Starter. Il risultato usa SQLite e storage media locale, così puoi completare il tutorial senza un account cloud.

Se hai già un sito Astro, segui invece Aggiungere EmDash a un progetto Astro esistente.

Prerequisiti

Installa Node.js 22.16 o successivo e npm. Controlla la versione Node.js installata prima di continuare:

node --version

Il comando deve riportare v22.16.0 o una versione successiva.

Generare il sito

Avvia il generatore interattivo:
npm
```
npm create emdash@latest
```
pnpm
```
pnpm create emdash@latest
```
yarn
```
yarn create emdash
```
bun
```
bun create emdash@latest
```
Scegli le seguenti opzioni quando richiesto:
- Project name: my-emdash-site
- Where will you deploy? Node.js
- Which template? Starter
- Which package manager? Mantieni il gestore di pacchetti rilevato dal comando del passo 1.
- Install dependencies? Yes
Queste scelte creano un sito Node.js di uso generale con Posts e Pages. Il generatore scrive anche un EMDASH_ENCRYPTION_KEY generato nel file .env ignorato da git.

Se l’installazione delle dipendenze fallisce, i file del progetto restano al loro posto. Esegui il comando di nuovo tentativo stampato dal generatore prima di continuare.
Entra nella directory del progetto e avvia il server di sviluppo:
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
```
Tieni questo terminale aperto. Astro stampa l’URL locale del sito, di solito http://localhost:4321/.

Completare la configurazione

Apri http://localhost:4321/_emdash/admin/. Un nuovo sito reindirizza alla procedura guidata di configurazione.

Inserisci un Site Title e un Tagline opzionale. Lascia selezionato Include sample content così il tutorial inizia con il post Welcome e la pagina About del modello, poi seleziona Continue.
Inserisci Your Email e un Your Name opzionale, poi seleziona Continue.
Registra una passkey quando il browser apre la richiesta delle credenziali. Dopo la registrazione, seleziona Open the dashboard.

La dashboard si apre con Posts e Pages nella navigazione. La procedura guidata ha applicato il modello di contenuto e il contenuto di esempio del modello Starter al database SQLite locale.

Pubblicare una modifica

Apri Posts, poi Welcome.
Cambia il titolo in Hello from EmDash, poi seleziona Save.
Seleziona Publish changes così la bozza salvata diventa la versione mostrata ai visitatori.
Apri http://localhost:4321/ in un’altra scheda. La home page elenca Hello from EmDash.

Il modello Starter chiama getEmDashCollection("posts") quando Astro renderizza la home page. Ricaricare la pagina legge la versione pubblicata da EmDash a runtime.

Come funziona il sito generato

Lo scaffold produce un normale progetto Astro con EmDash collegato in tre punti.

astro.config.mjs abilita il rendering lato server e l’adapter Node.js. Registra anche React per il pannello di amministrazione e dà a EmDash un database SQLite e una directory per i media caricati. Il file src/live.config.ts collega quel contenuto basato sul database alle Live Content Collections di Astro.

La home page interroga quindi la collection posts. La sua query è equivalente alla seguente parte della pagina generata:

---
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 definisce le collection Posts e Pages, i loro campi e il contenuto di esempio che la procedura guidata ha applicato. Durante lo sviluppo locale, EmDash legge quel modello e aggiorna emdash-env.d.ts, così il tuo editor può controllare nomi di collection e campi nel codice di query.

Il .env generato fornisce la chiave di cifratura a runtime. È separato dal file SQLite che memorizza il modello e il contenuto.

Passi successivi

Leggi Architettura per come queste parti lavorano insieme. Per aggiungere EmDash a un sito che esiste già, segui Aggiungere EmDash a un progetto Astro esistente. La guida Interrogare il contenuto copre filtri, paginazione, bozze e gestione degli errori. Quando il sito è pronto a lasciare la tua macchina, distribuiscilo su Cloudflare Workers o Node.js. La guida Libreria media spiega upload, campi media, sostituzione e eliminazione.