专注前端预览场景,将繁琐的部署流程压缩成一条自然语言指令。
只需对 Claude 说「部署一下」或输入 /presentation,自动完成全部流程,无需记忆复杂命令。
集成 acme.sh 自动签发和续期 SSL 证书,每次部署自动获取 HTTPS,零配置安全访问。
自动识别 npm、pnpm、yarn 包管理器,读取 package.json 构建脚本,适配各种前端项目。
自动生成虚拟主机配置、重载 Nginx,支持 SPA 路由回退,无需手动编辑服务器配置。
自动维护 DEPLOYMENTS.md 记录每次部署的项目、URL、时间和状态,历史一目了然。
一次配置通配符 DNS 解析,每个项目自动生成独立子域名预览地址,互不冲突。
从说出「部署一下」到拿到 HTTPS URL,全自动串联。
加载服务器 IP、域名、路径等配置信息
自动检测包管理器并执行 build 命令
SCP 将构建产物上传到服务器站点目录
生成 vhost 配置,签发 HTTPS 证书并重载
输出可公开访问的 HTTPS 预览地址
只需一次配置,之后每次部署都是一键完成。以下是使用前需要准备的环境和资源。
需要一台安装了 Nginx 的 Linux 服务器(如 Ubuntu/CentOS),并确保 nginx 命令可用。服务器需要开放 80 和 443 端口用于 HTTP/HTTPS 访问。
拥有一个域名,并在 DNS 服务商处添加 *.your-domain.com 的 A 记录,指向你的服务器 IP。例如 *.preview.example.com → 1.2.3.4。这样每个项目都能自动获得独立子域名。
本机需要能通过 ssh 和 scp 命令连接到服务器。支持密钥认证或密码认证,确保有 root 或具备 sudo 权限的用户。
服务器上需要安装 acme.sh 用于自动签发和续期 SSL 证书。如果未安装,/presentation init 会提示你安装。运行 curl https://get.acme.sh | sh 即可安装。
已安装并配置好 Claude Code CLI 工具。Presentation Skill 以 Claude Code Skill 的形式运行,支持命令触发和自然语言触发。
需要部署的项目应为静态 SPA 应用(如 Vite、React、Vue 构建后的产物),项目根目录包含 package.json 且有 build 脚本。不支持 SSR 应用(Next.js/Nuxt.js 服务端渲染模式)。
提示:域名解析生效通常需要几分钟到数小时。配置完成后可使用 dig *.your-domain.com 验证 DNS 是否生效。如果你只需要部署单个项目到固定域名,也可以不使用通配符,直接将具体域名 A 记录指向服务器即可。
安装 skill、初始化服务器、部署项目,就这么简单。
将 presentation skill 复制到 ~/.claude/skills/ 目录,Claude Code 自动识别。支持 /presentation 命令和自然语言触发。
执行 /presentation init,自动检测服务器上的 Nginx 路径、acme.sh 安装情况,创建目录结构并生成配置文件。
在前端项目目录中执行 /presentation 或告诉 Claude「部署一下」,自动构建、上传、配置并返回 HTTPS URL。
不说命令也可以。直接对 Claude 说「部署一下这个项目」「发布预览」「deploy」—— 同样生效。
Skill 在本地协调构建流程,通过 SCP/SSH 与服务器交互完成部署。