fscarmen

fscarmen

GitHub 私庫作圖床集群,PicGO 上傳,Cloudflare Workers加速,Gitlab 實時備份

視頻教學#

前言和項目特點#

針對新建博客中大量使用圖片,故需搭建一個私人圖床。既要避免使用收費的商業雲 oss 儲存;又要在白嫖的前提下找個長期穩定的存放平台;還要兼顧訪問速度;最好有異地災備。為了實現這些目標,便有了以下綜合解決方案。

方案特點和優勢:

  • 圖床集群矩陣:由多個 GitHub 倉庫組成的存儲系統。突破每個庫 4G 大小的限制。每個倉庫作為一個節點,形成一個整體資源存儲網絡。不同倉庫之間既獨立管理,又共同構成了一個分佈式的多倉庫集群。
  • 圖片存儲在 GitHub 私庫:圖片放置在 GitHub 私有倉庫中,路徑經過脫敏處理,確保安全性。
  • 自動壓縮圖片:通過自動壓縮圖片,提升加載速度,優化用戶體驗。
  • Cloudflare CDN 加速:利用 Cloudflare CDN 提供的全球加速服務,確保圖片快速加載。
  • 自定義域名:支持使用自定義域名,集群裡 n 個圖庫統一一個域名,提升品牌形象和專業性。
  • 多種鏈接形式輸出:生成多種形式的圖片鏈接,方便在博客或其他平台使用。
  • 實時備份到 Gitlab 私庫(可選): 將 GitHub 實時備份到 GitLab 私有庫提供了數據冗餘和跨平台備份,增強了數據安全性和保障了業務連續性。

條件#

流程和工具介紹#

截圖:使用 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 大小,超過就再建新的可以了

image
image
image

  • 在 GitHub 裡建一個私庫用於存放圖片,訪問 https://github.com/new ,現在 GitHub 每個項目為 4G 大小,超過就再建新的可以了

image

image
image
image

PicGo 設置#

  • 安裝好 PicGo 後,繼續在軟件裡安裝 picgo-plugin-compress-next 插件(此步可能需要開啟科學)
    image
    image

  • 繼續設置 PicGO 主程序

image
image
image
image

Cloudflare 創建 worker#

  • 登錄 Cloudflare,訪問 https://dash.cloudflare.com/ ,新建 worker
    image

  • 部署後,編輯代碼,複製並按圖修改相應兩處位置

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 })
  }
}

image

  • 添加自定義域名,有時候不能馬上生效,可以用 worker 給的域名 https://<workerName>.<cloudflareUser>.workers.dev 先試試
    image

正式使用流程#

截圖#

  • 使用 Snipaste 進行截圖到粘貼板,可以使用快捷鍵 (默認 Ctrl + F1)

上傳圖片#

  • 通過 PicGo 上傳圖片到 GitHub,可以使用快捷鍵(默認 Ctrl + Shift + P)或拖拽圖片到 PicGo 界面
  • 上傳成功進度條是藍色的,如果是紅色,請檢查設置是否有誤。上傳成功後自定義域名鏈接會自動在粘貼板
  • 在相應的場景 Blog 或者論壇等地址粘貼出來
    image
    image

實時備份到 Gitlab (可選)#

Gitlab 設置#

Github 設置#

  • 設置 3 個 secrets
Namesecret
GITLAB_USERNAMEGitlab 用戶名
GITLAB_REPOGitlab 上創建的項目名
GITLAB_PAT上面生成的 Gitlab 項目的 PAT

image

  • 創建備份到 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

image
image
image
image

圖片案例#

https://img.forvps.gq/pic1/main/example/202410021622722.png

image

載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。