Start here
開始使用
從簡報、原始碼資料夾或創意 skill 開始。讓您的 Agent 建立 OpenPress Workspace,或是直接執行 CLI。
先決條件。 請確認您的環境已安裝 Node.js 20+ 以及 npm 和 npx。若要進行框架開發或 Cloudflare Pages 部署,建議使用 Node.js 24。若需匯出 PDF/圖片或部署,請安裝 Chromium 與 wrangler。
接下來,您將學習如何建立 OpenPress Workspace、編輯文件內容,並即時預覽與部署您的第一份文件。
步驟 1:建立您的 Workspace
您可以選擇透過 AI Agent 或直接使用 CLI 來開始。我們將引導您使用最簡單的方法。
使用 CLI 建立
開啟您的終端機,並執行以下指令來建立一份新的簡報:
npm create @open-press@latest my-deck -- \
--type slides \
--title "Transport models"
接著進入專案資料夾並安裝相依套件:
cd my-deck
npm install
步驟 2:啟動即時預覽
在開始撰寫內容之前,讓我們先啟動 Workbench 來即時查看結果。請執行:
npm run dev
接著在瀏覽器中開啟 http://127.0.0.1:5173/workspace。您將會看到專案畫廊。當您修改檔案並存檔時,畫面會自動更新。
步驟 3:編輯文件內容
您的所有內容都存放在 press/ 資料夾下。讓我們來編輯您的第一張投影片。
在您的編輯器中,開啟 press/<您的專案名稱>/slides/intro/slide.tsx。
將預設內容修改為您的歡迎文字:
import type { SlideMeta } from "@open-press/core";
export const meta = {
layout: "default",
description: "Opening slide",
} satisfies SlideMeta;
export default function Slide() {
return <div>歡迎來到我的第一份 OpenPress 簡報!</div>;
}
存檔後,切換回瀏覽器,您會看到內容已經更新。
步驟 4:建置與檢查
當您完成編輯後,我們可以驗證文件的結構與輸出:
npm run build # 驗證 + 渲染 dist-react/
npm run preview # 將 dist-react/ 作為靜態網站提供服務
npm run openpress:pdf # 選擇性:在本機產生 PDF
如果驗證失敗,建置會在 Vite 執行前中止,因此綠色建置表示文件形狀是一致的。請參閱 CLI · 生命週期 了解每個步驟的作用。
步驟 5:部署
OpenPress 要求任何部署都必須明確確認 — 沒有無聲的發佈。在 workspace 的 package.json 中的 "openpress.deploy" 欄位下設定轉接器,然後執行:
npm run openpress:deploy:dry-run # 預覽步驟
npm run openpress:deploy -- --confirm # 發佈
deploy 指令會進行建置、產生 PDF 階段產物、寫入 deploy.json metadata,並交接給設定好的轉接器。如果尚未實作特定主機的轉接器,請直接使用產生出來的建置輸出結果,並在 OpenPress 之外進行發佈步驟。
下一步閱讀
- Slides 架構 — 每個資料夾對應一張投影片的版面配置、
SlideMeta、投影片排序,以及objectId注入。 - 元件架構 — 了解 Workspace, Press, Frame 如何組合。
- 與 Agent 合作 — agents 應如何初始化、編輯、驗證並在邊界處停止。
- 佈景主題 —
press/<slug>/themes/契約。 - 元件 → Press — Press Tree 基礎元件。
- 註解標記 — 行內審閱工作流程。
- CLI — 完整的指令參考(三個層級)。