視頻教學#
前言和項目特點#
針對新建博客中大量使用圖片,故需搭建一個私人圖床。既要避免使用收費的商業雲 oss 儲存;又要在白嫖的前提下找個長期穩定的存放平台;還要兼顧訪問速度;最好有異地災備。為了實現這些目標,便有了以下綜合解決方案。
方案特點和優勢:
- 圖床集群矩陣:由多個 GitHub 倉庫組成的存儲系統。突破每個庫 4G 大小的限制。每個倉庫作為一個節點,形成一個整體資源存儲網絡。不同倉庫之間既獨立管理,又共同構成了一個分佈式的多倉庫集群。
- 圖片存儲在 GitHub 私庫:圖片放置在 GitHub 私有倉庫中,路徑經過脫敏處理,確保安全性。
- 自動壓縮圖片:通過自動壓縮圖片,提升加載速度,優化用戶體驗。
- Cloudflare CDN 加速:利用 Cloudflare CDN 提供的全球加速服務,確保圖片快速加載。
- 自定義域名:支持使用自定義域名,集群裡 n 個圖庫統一一個域名,提升品牌形象和專業性。
- 多種鏈接形式輸出:生成多種形式的圖片鏈接,方便在博客或其他平台使用。
- 實時備份到 Gitlab 私庫(可選): 將 GitHub 實時備份到 GitLab 私有庫提供了數據冗餘和跨平台備份,增強了數據安全性和保障了業務連續性。
條件#
- GitHub 賬號,https://github.com
- GitLab 賬號,可選項,如不需要備份可忽略,https://gitlab.com
- Cloudflare 賬號,https://www.cloudflare.com
- Tinypng 賬號,https://tinypng.com/developers
- 安裝 Snipaste,https://zh.snipaste.com
- 安裝 PicGo,https://molunerfinn.com/PicGo
流程和工具介紹#
截圖:使用 Snipaste 進行截圖,這一款簡單但強大的貼圖工具,支持截屏、標註等功能,適用於 Windows 和 Mac。
PicGo 上傳圖片到 GitHub:使用 PicGo ,並安裝 picgo-plugin-compress-next 插件,自動壓縮圖片後上傳到 GitHub。
獲取經過 Worker 處理的圖片鏈接:自動生成經過 Worker 隱藏 GitHub 私庫的 PAT,增加 CDN 和雙棧,輸出自定義域名 url。
** 自動從 GitHub 推送最新圖片到 GitLab:使用 GitHub action,一旦數據有更新,自動化備份到 GitLab,避免圖片全部丟失的風險。
詳細關鍵步驟#
前置條件,獲取 GitHub PAT 和 Tinypng API Key#
- 登錄 GitHub,訪問 https://github.com/settings/tokens 獲取 PAT,並建一個私庫用於存放圖片,現在 GitHub 每個項目為 4G 大小,超過就再建新的可以了
- 在 GitHub 裡建一個私庫用於存放圖片,訪問 https://github.com/new ,現在 GitHub 每個項目為 4G 大小,超過就再建新的可以了
- 註冊 Tinypng.com 賬號,訪問 https://tinypng.com/developers 註冊
PicGo 設置#
-
安裝好 PicGo 後,繼續在軟件裡安裝 picgo-plugin-compress-next 插件(此步可能需要開啟科學)
-
繼續設置 PicGO 主程序
Cloudflare 創建 worker#
-
登錄 Cloudflare,訪問 https://dash.cloudflare.com/ ,新建 worker
-
部署後,編輯代碼,複製並按圖修改相應兩處位置
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})
async function handleRequest(request) {
const GITHUB_USERNAME = '' // 設置你的 GitHub 用戶名
const GITHUB_PAT = '' // 設置你的 GitHub PAT 令牌(Personal Access Token)
const GITHUB_REPO_PREFIX = 'pic' // 倉庫前綴,需要結合倉庫數量 REPO_COUNT 使用
const REPO_COUNT = 10 // 倉庫數量。比如填10,結合前綴即為 pic1, pic2, ..., pic10
const DIR = 'images' // 倉庫中的目錄路徑
// 從請求的 URL 中獲取文件名
const REPOS = Array.from({ length: REPO_COUNT }, (_, i) => `${GITHUB_REPO_PREFIX}${i + 1}`)
const url = new URL(request.url)
const FILE = url.pathname.split('/').pop() // 獲取 URL 中的最後一部分作為文件名
// 構建 GitHub raw 文件的 URL 列表
const urls = REPOS.map(repo => `https://raw.githubusercontent.com/${GITHUB_USERNAME}/${repo}/main/${DIR}/${FILE}`)
// 創建並發請求任務,向所有 GitHub raw 文件 URL 請求數據
const requests = urls.map(githubUrl => {
const modifiedRequest = new Request(githubUrl, {
method: request.method,
headers: {
'Authorization': `token ${GITHUB_PAT}`, // 使用 GitHub PAT 進行授權
'Accept': 'application/vnd.github.v3.raw'
}
})
return fetch(modifiedRequest).then(response => {
if (response.ok) return response; // 如果響應成功返回該響應
throw new Error(`Not Found in ${githubUrl}`); // 如果響應不成功拋出錯誤
})
})
try {
// 等待第一個成功的請求返回結果
const response = await Promise.any(requests)
// 創建新的響應,移除 Authorization 頭部,避免信息泄露
const newResponse = new Response(response.body, response)
newResponse.headers.delete('Authorization')
return newResponse
} catch (error) {
// 如果所有請求都失敗,返回 404 錯誤
return new Response(`404: File Not Found (${FILE}) in any repository`, { status: 404 })
}
}
- 添加自定義域名,有時候不能馬上生效,可以用 worker 給的域名
https://<workerName>.<cloudflareUser>.workers.dev
先試試
正式使用流程#
截圖#
- 使用 Snipaste 進行截圖到粘貼板,可以使用快捷鍵 (默認 Ctrl + F1)
上傳圖片#
- 通過 PicGo 上傳圖片到 GitHub,可以使用快捷鍵(默認 Ctrl + Shift + P)或拖拽圖片到 PicGo 界面
- 上傳成功進度條是藍色的,如果是紅色,請檢查設置是否有誤。上傳成功後自定義域名鏈接會自動在粘貼板
- 在相應的場景 Blog 或者論壇等地址粘貼出來
實時備份到 Gitlab (可選)#
Gitlab 設置#
-
登錄 Gitlab,新建 Project,訪問 https://gitlab.com/projects/new#blank_project
-
新增 PAT 和權限
-
設置允許強制推送,以便 Github workflow 能把項目推送過來
Github 設置#
- 設置 3 個 secrets
Name | secret |
---|---|
GITLAB_USERNAME | Gitlab 用戶名 |
GITLAB_REPO | Gitlab 上創建的項目名 |
GITLAB_PAT | 上面生成的 Gitlab 項目的 PAT |
- 創建備份到 Gitlab 的工作流,路徑和文件為
.github/workflows/sync-to-gitlab.yml
代碼如下:
name: Sync to GitLab
on:
push:
branches:
- main
workflow_dispatch:
jobs:
sync:
runs-on: ubuntu-latest
env:
GITLAB_USERNAME: ${{ secrets.GITLAB_USERNAME }}
GITLAB_REPO: ${{ secrets.GITLAB_REPO }}
GITLAB_PAT: ${{ secrets.GITLAB_PAT }}
steps:
- name: Checkout repository
uses: actions/checkout@v4.1.1
with:
fetch-depth: 0
- name: Set up Git
run: |
git config --global user.name 'github-actions'
git config --global user.email 'github-actions@github.com'
- name: Add GitLab remote
run: git remote add gitlab https://${{ env.GITLAB_USERNAME }}:${{ env.GITLAB_PAT }}@gitlab.com/${{ env.GITLAB_USERNAME }}/${{ env.GITLAB_REPO }}.git
- name: Force push to GitLab
run: git push gitlab main --force
圖片案例#
https://img.forvps.gq/pic1/main/example/202410021622722.png