原文?https://refrain.cn/blog/1/post/github-piculoader-jsdelivr-web-cdn-49

GitHub 介紹

GitHub 是一個用于版本控制和協作的代碼托管平臺。它讓你和其他人在任何地方在同一項目上一起工作。任何人都可以免費使用并建立一個上傳圖像的存儲庫作為專用的免費圖床。

jsDelivr 介紹

jsDelivr 是免費、快速、開源、可靠的開源 CDN，支持 NPM、GitHub、WordPress，以及為 GitHub 的圖像存儲庫提供 CDN 訪問提速

PicUploader 介紹

PicUploader 是一個用 php 編寫的圖床工具，它能幫助你快速上傳你的圖片到 GitHub 圖像存儲庫，并自動返回 Markdown 格式鏈接到剪貼板。相比于 PicGo 的優勢是支持部署在云服務器，便于隨處訪問。缺點是目前還沒有登錄功能，但是可以通過配置 HTTP 基本身份驗證防止別人隨意訪問頁面。

創建 GitHub 圖像存儲庫，即圖床

• 首先你得有一個 GitHub 賬號

• 新建一個倉庫

記下你取的倉庫名。

• 生成一個 token 用于 PicUploader 操作你的倉庫：

訪問：https://github.com/settings/tokens

然后點擊 Generate new token。

把 repo 的勾打上即可。然后翻到頁面最底部，點擊 Generate token 的綠色按鈕生成 token。

**注意：**這個 token 生成后只會顯示一次！你要把這個 token 復制一下存到其他地方以備以后要用。

?

部署 PicUploader 在寶塔 LNMP 環境

• 使用寶塔一鍵腳本并安裝 Nginx 和 PHP7.3 即可

PicUploader 默認使用 Sqlite 數據庫

• 在寶塔面板中新建網站并綁定域名 img.yourdomain.com

• 在站點修改的配置文件或者偽靜態設置中加入以下設置

特別注意由于網頁的首頁文件并非 index.php 而是 dashboard.php 因此在 location 設置為 index dashboard.php

client_header_timeout 60s; client_body_timeout 60s; send_timeout 60s; keepalive_timeout 65s; location / {index dashboard.php;try_files $uri $uri/ index.php$is_args$args; }

?

配置 PicUploader 和 jsDelivr CDN 加速

• 配置 GitHub 參數

在 domain 中設置 https://cdn.jsdelivr.net/gh/USERNAME/REPOSITORY 即可使用 jsDeliver 加速上傳的圖像。

• 配置 PicUploader 通用設置

由于我這里僅使用 GitHub 所有，未勾選其他云存儲，其他功能如圖片壓縮、文件名配置、數據庫配置、水印等根據使用場景調整。

• 使用效果（工作流）

如圖所示，可以使用 Snipaste 等截圖軟件，截圖后手動打碼，完成將自動保存到剪貼板，回到 PicUploader 的頁面中 ctrl + v 粘貼即可完成上傳并返回 jsDelivr 的圖像鏈接。

如果不小心離開了 PicUploader 頁面，可以在上傳歷史中重新查看圖像、原始 url、markdown 等。

配置 Nginx HTTP 身份驗證

如上一章節所示，PicUploader 暫時沒有登錄功能，任何都都可以訪問你的頁面，因此在前面的寶塔站點配置中加入以下兩行即可開啟 nginx 密碼驗證

auth_basic 'Restricted';? ? ? ? ? ? # 認證名稱，隨意填寫 auth_basic_user_file /usr/local/nginx/htpasswd;? ? ?# 認證的密碼文件，需要生成。

效果如圖

總結

以上是生活随笔為你收集整理的GitHub + PicUloader + jsDelivr : 通过 web 上传的免费图床和图像访问 CDN 加速的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。