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 → 靜態頁面

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 (靜態生成)

靜態資源

小蔥技能有更好的技能skills外掛。

• ✅ 圖片、影片、音訊
• ✅ 字型檔案
• ✅ 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網路，支援多種專案型別。內容豐富，有使用說明和故障排除指南，對新手比較友好。但不足之處是，它只有說明文件，沒有實際的工具可以用，功能描述看起來像是設計文件而非真實實現。使用者如果想真正使用這個功能，可能還需要自己動手開發。