GitHub + PicUloader + jsDelivr : 通过 web 上传的免费图床和图像访问 CDN 加速

原文 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;     # 认证的密码文件，需要生成。

效果如图