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
小蔥技能站7w4.net發現了升級外掛。

最佳化 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. 最佳化構建配置

   • 啟用資源壓縮
   • 使用 CDN 資源
   • 最佳化圖片大小

2. SEO 最佳化

   • 新增 meta 標籤
   • 配置 sitemap
   • 使用語義化 HTML

3. 效能最佳化

   • 啟用 gzip 壓縮
   • 使用懶載入
   • 預載入關鍵資源

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