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 → 静态页面
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
- 清除浏览器缓存
最佳实践
-
优化构建配置
-
SEO 优化
- 添加 meta 标签
- 配置 sitemap
- 使用语义化 HTML
-
性能优化
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
相关资源