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

GitHub 介紹

GitHub 是一個(gè)用于版本控制和協(xié)作的代碼托管平臺(tái)。它讓你和其他人在任何地方在同一項(xiàng)目上一起工作。任何人都可以免費(fèi)使用并建立一個(gè)上傳圖像的存儲(chǔ)庫(kù)作為專用的免費(fèi)圖床。

jsDelivr 介紹

jsDelivr 是免費(fèi)、快速、開(kāi)源、可靠的開(kāi)源 CDN，支持 NPM、GitHub、WordPress，以及為 GitHub 的圖像存儲(chǔ)庫(kù)提供 CDN 訪問(wèn)提速

PicUploader 介紹

PicUploader 是一個(gè)用 php 編寫(xiě)的圖床工具，它能幫助你快速上傳你的圖片到 GitHub 圖像存儲(chǔ)庫(kù)，并自動(dòng)返回 Markdown 格式鏈接到剪貼板。相比于 PicGo 的優(yōu)勢(shì)是支持部署在云服務(wù)器，便于隨處訪問(wèn)。缺點(diǎn)是目前還沒(méi)有登錄功能，但是可以通過(guò)配置 HTTP 基本身份驗(yàn)證防止別人隨意訪問(wèn)頁(yè)面。

創(chuàng)建 GitHub 圖像存儲(chǔ)庫(kù)，即圖床

• 首先你得有一個(gè) GitHub 賬號(hào)

• 新建一個(gè)倉(cāng)庫(kù)

記下你取的倉(cāng)庫(kù)名。

• 生成一個(gè) token 用于 PicUploader 操作你的倉(cāng)庫(kù)：

訪問(wèn)：https://github.com/settings/tokens

然后點(diǎn)擊 Generate new token。

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

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

?

部署 PicUploader 在寶塔 LNMP 環(huán)境

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

PicUploader 默認(rèn)使用 Sqlite 數(shù)據(jù)庫(kù)

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

• 在站點(diǎn)修改的配置文件或者偽靜態(tài)設(shè)置中加入以下設(shè)置

特別注意由于網(wǎng)頁(yè)的首頁(yè)文件并非 index.php 而是 dashboard.php 因此在 location 設(shè)置為 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 參數(shù)

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

• 配置 PicUploader 通用設(shè)置

由于我這里僅使用 GitHub 所有，未勾選其他云存儲(chǔ)，其他功能如圖片壓縮、文件名配置、數(shù)據(jù)庫(kù)配置、水印等根據(jù)使用場(chǎng)景調(diào)整。

• 使用效果（工作流）

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

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

配置 Nginx HTTP 身份驗(yàn)證

如上一章節(jié)所示，PicUploader 暫時(shí)沒(méi)有登錄功能，任何都都可以訪問(wèn)你的頁(yè)面，因此在前面的寶塔站點(diǎn)配置中加入以下兩行即可開(kāi)啟 nginx 密碼驗(yàn)證

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

效果如圖

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。