建立你的第一個 EmDash 網站 | EmDash CMS Everything

本教學從 Starter 範本建立一個 Node.js 網站。結果使用 SQLite 和本地媒體儲存，因此你可以在沒有雲端帳戶的情況下完成本教學。

前提條件

安裝 Node.js 22.16 或更高版本以及 npm。繼續之前檢查已安裝的 Node.js 版本：

node --version

命令必須報告 v22.16.0 或更高版本。

搭建網站

從 Node.js Starter 範本建立 my-emdash-site：
```
npm create emdash@latest my-emdash-site -- --template node:starter --pm npm --yes
```
明確選擇 node:starter 會建立一個包含 Posts 和 Pages 的通用網站。鷹架工具安裝依賴並將產生的 EMDASH_ENCRYPTION_KEY 寫入被 git 忽略的 .env 檔案。

如果依賴安裝失敗，專案檔案會保留。繼續之前執行鷹架工具列印的重試命令。
進入專案目錄並啟動開發伺服器：
```
cd my-emdash-site
npm run dev
```
保持此終端開啟。Astro 會列印本地網站 URL，通常是 http://localhost:4321/。

完成設定

開啟 http://localhost:4321/_emdash/admin/。新網站會重新導向到設定精靈。

輸入 Site Title 和可選的 Tagline。保持 Include sample content 選中，以便教學從範本的 Welcome 文章和 About 頁面開始，然後選擇 Continue。
輸入 Your Email 和可選的 Your Name，然後選擇 Continue。
當瀏覽器開啟憑證提示時註冊通行金鑰。註冊後，選擇 Open the dashboard。

儀表板開啟，導覽中顯示 Posts 和 Pages。設定精靈已將 Starter 範本的內容模型和範例內容套用到本地 SQLite 資料庫。

發布編輯

開啟 Posts，然後開啟 Welcome。
將標題改為 Hello from EmDash，然後選擇 Save。
選擇 Publish changes，使儲存的草稿成為向訪客顯示的版本。
在另一個分頁中開啟 http://localhost:4321/。首頁列出 Hello from EmDash。

Starter 範本在 Astro 渲染首頁時呼叫 getEmDashCollection("posts")。重新載入頁面會在執行時從 EmDash 讀取已發布的版本。

產生的網站如何運作

鷹架產生一個普通的 Astro 專案，EmDash 在三個地方連接。

astro.config.mjs 啟用伺服器渲染和 Node.js 適配器。它還註冊 React 用於管理面板，並為 EmDash 提供 SQLite 資料庫和上傳媒體的目錄。 src/live.config.ts 檔案將該資料庫支援的內容連接到 Astro 的 Live Content Collections。

首頁然後查詢 posts 集合。其查詢等同於產生頁面的以下部分：

---
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 定義了 Posts 和 Pages 集合、它們的欄位以及設定精靈套用的範例內容。在本地開發期間，EmDash 讀取該模型並重新整理 emdash-env.d.ts，使你的編輯器可以在查詢程式碼中檢查集合名稱和欄位。

產生的 .env 在執行時提供加密金鑰。它與儲存模型和內容的 SQLite 檔案是分開的。

下一步

閱讀架構了解這些部分如何協同運作。要將 EmDash 新增到已有的網站，請遵循將 EmDash 新增到現有 Astro 專案。內容查詢指南涵蓋過濾器、分頁、草稿和錯誤處理。當網站準備好離開你的機器時，將其部署到 Cloudflare Workers 或 Node.js。媒體庫指南解釋了上傳、媒體欄位、取代和刪除。