Crea il tuo primo sito EmDash

In questa pagina

Questo tutorial crea un sito Node.js dal template Starter. Il risultato usa SQLite e lo storage locale dei media, quindi puoi completare il tutorial senza un account cloud.

Prerequisiti

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

node --version

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

Creare il sito

  1. Crea my-emdash-site dal template Node.js Starter:

    npm create emdash@latest my-emdash-site -- --template node:starter --pm npm --yes

    La scelta esplicita node:starter crea un sito generico con Posts e Pages. Lo scaffolder installa le dipendenze e scrive un EMDASH_ENCRYPTION_KEY generato nel file .env ignorato da git.

    Se l’installazione delle dipendenze fallisce, i file del progetto rimangono al loro posto. Esegui il comando di ripetizione stampato dallo scaffolder prima di continuare.

  2. Entra nella directory del progetto e avvia il server di sviluppo:

    cd my-emdash-site
    npm run dev

    Mantieni questo terminale aperto. Astro stampa l’URL del sito locale, normalmente http://localhost:4321/.

Completare il setup

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

  1. Inserisci un Site Title e una Tagline opzionale. Lascia Include sample content selezionato così il tutorial inizia con il post Welcome e la pagina About del template, poi seleziona Continue.

  2. Inserisci Your Email e un Your Name opzionale, poi seleziona Continue.

  3. Registra un passkey quando il browser apre la richiesta di credenziali. Dopo la registrazione, seleziona Open the dashboard.

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

Pubblicare una modifica

  1. Apri Posts, poi apri Welcome.

  2. Cambia il titolo in Hello from EmDash, poi seleziona Save.

  3. Seleziona Publish changes così la bozza salvata diventa la versione mostrata ai visitatori.

  4. Apri http://localhost:4321/ in un’altra scheda. La home page elenca Hello from EmDash.

Il template 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 connesso in tre punti.

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

La home page poi interroga 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 di setup ha applicato. Durante lo sviluppo locale, EmDash legge quel modello e aggiorna emdash-env.d.ts, così il tuo editor può verificare i nomi delle collection e i campi nel codice delle query.

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

Prossimi passi

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