PicGo/PicList + GitHub 圖床完全指南 | 免費高速圖片託管方案

在撰寫技術博客、文檔或筆記時，圖片是不可或缺的要素。傳統的圖床服務往往存在收費、限速、不穩定等問題。利用 GitHub + PicGo/PicList 搭建的免費圖床方案，不僅穩定可靠，還能享受 GitHub Pages 的全球 CDN 加速。本文將詳細介紹從零開始的完整搭建流程。

為什麼選擇 GitHub 圖床？

核心優勢對比

特性	GitHub 圖床	傳統圖床	自建圖床
💰 成本	✅ 完全免費	⚠️ 付費/有限額	💰 服務器費用
🌍 CDN 加速	✅ 全球加速	⚠️ 視服務商而定	🔧 需自行配置
🔒 數據安全	✅ GitHub 備份	⚠️ 依賴服務商	✅ 自主控制
📊 存儲空間	✅ 1GB 免費	⚠️ 有限制	💾 取決於硬盤
🛠️ 管理工具	✅ PicGo/PicList	⚠️ 各平臺不同	🔧 需自行開發
⚡ 穩定性	✅ 極高	⚠️ 參差不齊	🔧 取決於運維
📝 Markdown 支持	✅ 完美支持	⚠️ 部分支持	🔧 需配置

適用場景

• ✅ 技術博客：VitePress、Hexo、Hugo 等靜態博客
• ✅ 文檔編寫：Notion、Obsidian、Typora 等筆記軟件
• ✅ 開源項目：README 中的示意圖
• ✅ 個人網站：頭像、Logo、插圖等資源
• ✅ 社交媒體：快速生成圖片鏈接分享

準備工作

註冊 GitHub 賬號

上傳圖片前需先擁有一個 GitHub 倉庫

PicGo

用於快速上傳圖片並獲取圖片 URL 鏈接的工具

PicList

高效的雲存儲和圖床平臺管理工具，基於 PicGo 深度二次開發

工具選擇建議

PicGo vs PicList 對比

特性	PicGo	PicList
🎯 定位	基礎圖床工具	增強版圖床管理
🖼️ 圖片壓縮	❌ 不支持	✅ 內置壓縮
🔄 批量上傳	⚠️ 基礎支持	✅ 強大支持
📁 重命名	❌ 不支持	✅ 自動重命名
🗂️ 多平臺	✅ 支持多種	✅ 支持更多
🎨 界面	簡潔	現代化
📦 體積	較小	稍大
🆓 價格	免費開源	免費開源

推薦選擇：

• 🟢 新手用戶：PicGo（簡單易用）
• 🔵 進階用戶：PicList（功能強大）
• 🟡 兩者皆可：根據界面喜好選擇

創建新倉庫

詳細步驟

步驟 1：登錄 GitHub

1. 訪問 github.com
2. 點擊右上角【Sign up】註冊賬號（如已有賬號則登錄）
3. 完成郵箱驗證

步驟 2：創建新倉庫

1. 登錄後，點擊右上角【+】→【New repository】

2. 填寫倉庫信息：

   • Repository name: image-hosting（或任意名稱）
   • Description: My personal image hosting service（可選）
   • Public/Private: ⚠️ 必須選擇 Public
   • Initialize this repository with:
     • ✅ 勾選 Add a README file
     • ❌ 不勾選 .gitignore
     • ❌ 不勾選 License

3. 點擊【Create repository】

重要提示：

⚠️ 倉庫必須是 Public（公開）的！
如果設置為 Private，圖片將無法通過 URL 直接訪問。

步驟 3：記錄倉庫信息

創建成功後，記錄以下信息：

• 用戶名: your-username
• 倉庫名: image-hosting
• 完整路徑: your-username/image-hosting

生成 Token

• 生成 Token
• 點擊左側的 Tokens（classic）
• 再點擊 Generate new token（classic）

注意

生成的 token 只會在這裡顯示一次，記得單獨保存下來。

Token 生成詳解

步驟 1：訪問 Token 設置頁面

1. 點擊 GitHub 右上角頭像
2. 選擇【Settings】
3. 滾動到頁面底部，點擊【Developer settings】
4. 點擊【Personal access tokens】→【Tokens (classic)】

步驟 2：創建新 Token

1. 點擊【Generate new token (classic)】

2. 填寫配置：

   • Note: PicGo Image Hosting（便於識別）
   • Expiration:
     • 選項 1: No expiration（永久有效，推薦）
     • 選項 2: 自定義過期時間（更安全）

3. 勾選權限範圍：

   • ✅ repo（全選，包含所有子項）
     • repo:status
     • repo_deployment
     • public_repo
     • repo:invite
     • security_events

4. 滾動到頁面底部，點擊【Generate token】

步驟 3：保存 Token

🔑 生成的 Token 示例：
ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

⚠️ 重要提示：
1. Token 只會顯示這一次！
2. 立即複製到安全的地方保存
3. 建議保存到密碼管理器
4. 不要分享給他人
5. 不要提交到代碼倉庫

安全建議：

• 🔒 使用密碼管理器保存（如 1Password、Bitwarden）
• 📝 記錄在本地加密文件中
• 🚫 不要在公開場合展示
• 🔄 定期更換（如果設置了有效期）

配置 PicGo

配置 PicGo

• 圖床配置名:隨意填寫
• 設定倉庫名:為剛設置的存儲庫
• 設定分支名:存儲庫的分支名
• 設置Token:創建的 Token
• 設定存儲路徑:可以設置為文件夾,如: img/ ;也可忽略

PicGo 詳細配置

步驟 1：下載並安裝 PicGo

下載地址：

• 官方網站：https://molunerfinn.com/PicGo/
• GitHub Release：https://github.com/Molunerfinn/PicGo/releases

支持平臺：

• ✅ Windows
• ✅ macOS
• ✅ Linux

步驟 2：安裝 GitHub 插件

1. 打開 PicGo
2. 點擊左側【插件設置】
3. 搜索 github-plus 或 github
4. 點擊【安裝】
5. 等待安裝完成

步驟 3：配置 GitHub 圖床

1. 點擊左側【圖床設置】
2. 找到【GitHub 圖床】
3. 點擊【設為默認圖床】
4. 點擊【配置】按鈕

填寫配置信息：

# 圖床配置示例
圖床配置名: GitHub-Hosting
設定倉庫名: your-username/image-hosting
設定分支名: main
設置Token: ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
設定存儲路徑: images/
自定義域名: https://cdn.jsdelivr.net/gh/your-username/image-hosting@main

參數詳解：

參數	說明	示例
圖床配置名	自定義名稱，便於區分	GitHub-Main
設定倉庫名	GitHub 倉庫完整路徑	username/repo-name
設定分支名	倉庫分支名稱	main 或 master
設置Token	之前生成的 Personal Access Token	ghp_xxx...
設定存儲路徑	圖片存放的文件夾路徑	images/ 或留空
自定義域名	CDN 加速域名（可選）	見下方說明

步驟 4：測試上傳

1. 準備一張測試圖片
2. 拖拽到 PicGo 窗口
3. 或點擊【上傳區】→【上傳圖片】
4. 等待上傳完成
5. 複製返回的 URL

成功標誌：

✅ 上傳成功！
圖片 URL: https://raw.githubusercontent.com/username/repo/main/images/test.png

PicList 配置（可選）

如果你選擇使用 PicList，配置步驟類似：

步驟 1：下載 PicList

• 官方網站：https://piclist.cn/
• GitHub：https://github.com/Kuingsmile/PicList

步驟 2：配置 GitHub

1. 打開 PicList
2. 進入【圖床設置】
3. 選擇【GitHub】
4. 填寫相同配置信息

PicList 額外功能：

• 🖼️ 圖片壓縮：自動壓縮上傳圖片
• 📝 智能重命名：按日期/哈希重命名
• 🔄 批量處理：一次性上傳多張圖片
• 📊 上傳歷史：查看過往上傳記錄

CDN 加速配置

為什麼需要 CDN 加速？

GitHub Raw 文件的原始鏈接：

https://raw.githubusercontent.com/username/repo/main/images/photo.jpg

存在的問題：

• 🐌 國內訪問速度慢
• ⏱️ 加載時間長
• 🚫 可能被牆

推薦的 CDN 方案

方案 1：jsDelivr（推薦）

配置方法：

在 PicGo 的【自定義域名】中填寫：

https://cdn.jsdelivr.net/gh/username/repo@main

最終 URL 格式：

原鏈接: https://raw.githubusercontent.com/username/repo/main/images/photo.jpg
CDN鏈接: https://cdn.jsdelivr.net/gh/username/repo@main/images/photo.jpg

優勢：

• ✅ 全球 CDN 加速
• ✅ 國內訪問速度快
• ✅ 完全免費
• ✅ 自動緩存

注意事項：

• ⚠️ 更新後有緩存延遲（約 5-10 分鐘）
• ⚠️ 單文件最大 50MB

方案 2：Fastly CDN

配置方法：

https://fastly.jsdelivr.net/gh/username/repo@main

優勢：

• ✅ 更快的刷新速度
• ✅ 更好的穩定性

方案 3：GitHub Pages + 自定義域名

適合高級用戶：

1. 啟用 GitHub Pages
2. 綁定自定義域名
3. 配置 CNAME 記錄

最終 URL：

https://images.yourdomain.com/images/photo.jpg

高級配置技巧

1. 圖片自動壓縮

使用 PicList 內置壓縮：

1. 打開 PicList
2. 進入【上傳設置】
3. 啟用【圖片壓縮】
4. 配置壓縮參數：
   • 質量：80%
   • 最大寬度：1920px
   • 格式轉換：WebP（可選）

效果：

原圖: 2.5 MB → 壓縮後: 350 KB
節省空間: 86%
加載速度: 提升 7 倍

2. 智能重命名

避免文件名衝突：

// 重命名規則示例
{year}/{month}/{timestamp}_{random}.png

// 實際效果
2024/01/1705123456_abc123.png

配置方法：

1. PicList → 【上傳設置】
2. 啟用【自動重命名】
3. 選擇命名規則

3. 批量上傳

操作步驟：

1. 選中多張圖片
2. 拖拽到 PicGo/PicList
3. 等待批量上傳完成
4. 一鍵複製所有鏈接

快捷鍵：

• Ctrl + V：粘貼上傳剪貼板圖片
• Ctrl + Shift + V：粘貼並複製鏈接
• Ctrl + A：全選上傳歷史

4. 快捷鍵配置

PicGo 快捷鍵設置：

1. 進入【快捷鍵設置】
2. 配置常用操作：
   • 截圖上傳：Ctrl + Alt + U
   • 粘貼上傳：Ctrl + Alt + V
   • 複製最後鏈接：Ctrl + Alt + C

配合截圖工具：

• Windows: Snipaste + PicGo
• macOS: Shottr + PicGo
• Linux: Flameshot + PicGo

Markdown 中使用

標準格式

![圖片描述](https://cdn.jsdelivr.net/gh/username/repo@main/images/photo.jpg)

HTML 格式（支持更多屬性）

<img 
  src="https://cdn.jsdelivr.net/gh/username/repo@main/images/photo.jpg" 
  alt="圖片描述"
  width="800"
  loading="lazy"
/>

VitePress 特殊語法

![圖片描述](url){width=600}

常見問題排查

問題 1：上傳失敗 - 404 Not Found

可能原因：

1. 倉庫名填寫錯誤
2. Token 權限不足
3. 倉庫不存在

解決方案：

# 1. 驗證倉庫是否存在
curl -I https://api.github.com/repos/username/repo-name

# 2. 檢查 Token 權限
# 重新生成 Token，確保勾選 repo 權限

# 3. 確認倉庫路徑
# 應該是: username/repo-name
# 不是: https://github.com/username/repo-name

問題 2：圖片無法訪問

可能原因：

1. 倉庫設置為 Private
2. CDN 緩存未刷新
3. 網絡問題

解決方案：

# 1. 確認倉庫為 Public
# GitHub → Settings → Danger Zone → Change visibility

# 2. 清除 CDN 緩存
# jsDelivr: https://purge.jsdelivr.net/gh/username/repo@main/path/file.jpg

# 3. 測試直連
curl -I https://raw.githubusercontent.com/username/repo/main/images/test.jpg

問題 3：上傳速度慢

優化方案：

1. 啟用圖片壓縮
2. 使用 CDN 加速
3. 檢查網絡連接
4. 避開高峰時段

問題 4：Token 洩露怎麼辦？

緊急處理：

# 1. 立即刪除洩露的 Token
# GitHub → Settings → Developer settings → Tokens → Delete

# 2. 生成新 Token
# 按照之前的步驟重新生成

# 3. 更新 PicGo 配置
# 替換為新 Token

# 4. 檢查是否有異常提交
# GitHub → Repository → Insights → Traffic

問題 5：存儲空間不足

GitHub 限制：

• 單個倉庫：1GB（軟限制）
• 單個文件：100MB
• 推薦單文件：<50MB

解決方案：

# 1. 清理舊圖片
# 手動刪除不需要的文件

# 2. 壓縮現有圖片
# 使用 TinyPNG 等工具

# 3. 創建新倉庫
# 分散存儲到多個倉庫

# 4. 使用 Git LFS（不推薦）
# 會增加複雜度

性能優化建議

1. 圖片格式選擇

格式	適用場景	壓縮率	兼容性
WebP	網頁展示	⭐⭐⭐⭐⭐	現代瀏覽器
PNG	透明背景	⭐⭐⭐	全部支持
JPG	照片	⭐⭐⭐⭐	全部支持
SVG	圖標/圖表	⭐⭐⭐⭐⭐	現代瀏覽器
GIF	動圖	⭐⭐	全部支持

推薦：

• 📸 照片：JPG（質量 80%）
• 🎨 截圖：PNG 或 WebP
• 📊 圖表：SVG
• 🎬 動圖：GIF 或 WebP

2. 圖片尺寸優化

# 推薦尺寸
博客配圖: 1200x630 px (OG 圖片標準)
文章插圖: 800x600 px
縮略圖: 400x300 px
頭像/Logo: 256x256 px

3. 懶加載

<!-- 添加 loading="lazy" 屬性 -->
<img src="..." alt="..." loading="lazy" />

備份與遷移

備份倉庫

# 克隆整個倉庫
git clone https://github.com/username/repo.git

# 打包備份
tar -czf image-backup.tar.gz repo/

遷移到新倉庫

# 1. 克隆舊倉庫
git clone https://github.com/old-user/old-repo.git

# 2. 修改遠程地址
cd old-repo
git remote set-url origin https://github.com/new-user/new-repo.git

# 3. 推送到新倉庫
git push -u origin main

總結

使用 PicGo/PicList + GitHub 搭建圖床的優勢：

1. ✅ 完全免費：無需支付任何費用
2. ✅ 穩定可靠：依託 GitHub 基礎設施
3. ✅ 全球加速：CDN 覆蓋 worldwide
4. ✅ 易於管理：圖形化工具操作簡單
5. ✅ 版本控制：Git 管理圖片歷史
6. ✅ 無縫集成：完美支持 Markdown

關鍵步驟回顧：

1. 創建 Public 倉庫
2. 生成 Personal Access Token
3. 安裝 PicGo/PicList
4. 配置 GitHub 圖床
5. 設置 CDN 加速（可選）
6. 測試上傳並使用

下一步學習：

• VitePress 圖片放大功能
• GitHub Actions 自動化
• Markdown 寫作技巧

開始你的免費高速圖床之旅吧！🚀✨