name: pinme-deploy version: 1.0.0 description: 一键部署前端静态网站到 IPFS 网络。使用场景：(1) 用户需要部署静态网站、HTML页面、前端项目 (2) 用户提到pinme、IPFS部署、静态网站托管 (3) 用户需要快速预览或分享前端作品 (4) 用户要求发布、上传、部署静态页面。支持自动识别项目类型、构建并上传到 IPFS 网络，返回可访问的 URL。 metadata: openclaw: emoji: "🚀" tags: ["deployment", "ipfs", "static", "frontend", "hosting"] requires: env: - PINATA_API_KEY - PINATA_SECRET_KEY bins: - curl primaryEnv: PINATA_API_KEY

PinMe Deploy

一键部署前端静态网站到 IPFS 网络，获得永久可访问的去中心化 URL。

功能特性

• 🚀 自动识别项目类型（HTML、React、Vue、静态资源）
• 📦 智能构建（自动运行 npm build 如果需要）
• 🌐 IPFS 网络 + Pinata 服务确保内容持久性
• 📱 移动端自适应支持
• 📊 提供部署统计和访问监控
• 🔄 支持增量更新

使用方法

快速部署

# 部署当前目录
skill pinme-deploy

# 部署指定路径
skill pinme-deploy /path/to/project

# 部署并自动打开
skill pinme-deploy --open

完整命令

skill pinme-deploy [path] [options]

Options:
  --open, -o    部署后自动在浏览器打开
  --watch, -w   监听文件变化自动重新部署
  --port, -p    本地预览端口 (默认: 3000)
  --help, -h    显示帮助信息

工作流程

1. 项目检测与分析

执行以下步骤识别项目类型：

# 检测项目类型（任选其一）
ls -la
# PowerShell:
Get-ChildItem

根据文件/目录结构判断： - 单个 HTML 文件 → HTML 项目 - package.json + src/ → 框架项目 - dist/build/ → 预构建项目 - assets/ + index.html → 静态页面

来源于7w4.net。

2. 构建准备

检测需要构建的项目：

# 如果是框架项目（存在 package.json）且没有构建目录（dist/build），先执行构建
npm install
npm run build

优化 HTML：

• 添加移动端 meta 标签
• 添加 IPFS 资源协议支持
• 优化资源引用

3. 执行上传

使用 Bash 工具执行部署脚本：

curl -X POST https://api.pinata.cloud/pinning/pinFileToIPFS \
  -H "pinata_api_key: YOUR_API_KEY" \
  -H "pinata_secret_api_key: YOUR_SECRET_KEY" \
  -F "file=@<build_dir>/index.html"

4. 生成访问 URL

IPFS Gateway URL 格式：

https://ipfs.io/ipfs/{CID}#app.html

本地预览 URL：

http://localhost:3000

项目类型支持

HTML 项目

• ✅ 单个 HTML 文件
• ✅ HTML + CSS/JS 资源
• ✅ 相对路径引用

React 项目

# 自动构建命令
npm run build
# 输出目录: build/

• ✅ Create React App
• ✅ Vite + React
• ✅ Next.js (静态导出)

Vue 项目

# 自动构建命令
npm run build
# 输出目录: dist/

• ✅ Vue CLI
• ✅ Vite + Vue
• ✅ Nuxt.js (静态生成)

静态资源

• ✅ 图片、视频、音频
• ✅ 字体文件
• ✅ JSON 数据

输出示例

🚀 Starting deployment...
📁 Project: /Users/user/my-project
📦 Type: React (Create React App)
🔨 Building: npm run build
✅ Build complete: build/ directory

📤 Uploading to IPFS...
✨ CID: QmXxxXxxXxxXxxXxxXxxXxxXxxXxxXxxXxx
🌐 IPFS URL: https://ipfs.io/ipfs/QmXxxXxx/index.html
📱 Mobile URL: https://ipfs.io/ipfs/QmXxxXxx/index.html#app
📊 Statistics: 12 files, 2.4MB

🎉 Deploy complete! Opening in browser...

高级功能

增量更新

# 只上传变更的文件
pinme-deploy --incremental

自定义域名

# 绑定 ENS 域名
pinme-deploy --ens myname.eth

团队协作

# 生成团队分享链接
pinme-deploy --team-share

故障排除

构建失败

• 检查 package.json 的 build 脚本
• 确保所有依赖已安装
• 查看构建日志定位问题

上传失败

• 检查 Pinata API 密钥
• 确保网络连接正常
• 验证文件大小（单文件 < 100MB）

访问问题

• 等待 IPFS 网络同步（1-3分钟）
• 尝试不同的 gateway
• 清除浏览器缓存

最佳实践

1. 优化构建配置
2. 启用资源压缩
3. 使用 CDN 资源

4. 优化图片大小

5. SEO 优化

6. 添加 meta 标签
7. 配置 sitemap

8. 使用语义化 HTML

9. 性能优化

10. 启用 gzip 压缩
11. 使用懒加载
12. 预加载关键资源

API 集成

Pinata API 密钥配置

# 设置环境变量
export PINATA_API_KEY="your_api_key"
export PINATA_SECRET_KEY="your_secret_key"

PowerShell:

$env:PINATA_API_KEY="your_api_key"
$env:PINATA_SECRET_KEY="your_secret_key"

自定义 API 端点

# 使用自定义 IPFS 节点
pinme-deploy --gateway https://my-ipfs-node.com

相关资源

• IPFS 官网
• Pinata 文档
• Web3.storage
• Fleek

这个Skill的文档写得比较清楚，介绍了如何把前端网站部署到IPFS网络，支持多种项目类型。内容丰富，有使用说明和故障排除指南，对新手比较友好。但不足之处是，它只有说明文档，没有实际的工具可以用，功能描述看起来像是设计文档而非真实实现。用户如果想真正使用这个功能，可能还需要自己动手开发。