Nginx&PicList搭建图床

需求

现在使用md来编写一些文档是非常流行的，尤其是搭配像Typora等这样的编辑器更是事半功倍。

但是md有一个缺陷，就是对于图片等资源的管理，它只能依赖于本地存储（对于在线博客无法共享）或者在线存储（使用阿里云的oss对象存储等）

那么这时候图床就来了，它可以解决上述md的问题

图床

NOTE

图床是一种专门用于存储和管理图片，并提供图片外链供他人访问的服务。

以下是关于图床的详细介绍：

基本功能

• 图片存储：图床为用户提供存储空间，用户可以将本地的图片上传到图床服务器。无论是个人照片、设计素材、博客配图，还是网站图标等各种类型的图片，都能在图床中找到存放之处。
• 外链生成：这是图床最核心的功能之一。上传图片后，图床会生成一个唯一的 URL 链接（外链），用户可以将这个链接插入到博客文章、论坛帖子、网页代码、Markdown 文档等地方。当其他人访问包含该链接的内容时，就能直接加载并查看对应的图片。

应用场景

• 个人博客与写作：博主在撰写文章时，通过图床上传图片并获取外链，能够在文章中展示丰富的图片内容，提升文章的可读性和吸引力。比如在技术博客中展示代码运行效果截图、设计博客中展示作品图片等。
• 论坛与社区：用户在论坛中发布帖子时，使用图床可以更方便地分享图片。例如在摄影论坛分享摄影作品、在游戏论坛展示游戏截图等。
• 网站开发：前端开发人员可以将网站所需的图片存储在图床，通过外链引用，这样可以减轻网站服务器的存储压力，并且如果使用了 CDN 加速的图床，还能提升图片的加载速度，优化用户体验。
• 设计与创意工作：设计师可以将设计作品上传到图床，方便与团队成员、客户分享，进行交流和评审。同时，也可以用于存储设计素材，便于随时调用。

优势

• 节省本地空间：将图片存储在图床，无需占用本地设备的大量存储空间，尤其对于有大量图片需求的用户来说，能有效释放本地磁盘空间。
• 便于分享和协作：通过简单的外链，就能快速将图片分享给他人，在团队协作中，成员之间可以方便地共享和查看图片资源，提高工作效率。
• 提升图片加载速度：很多专业图床配备了 CDN（内容分发网络），可以将图片缓存到离用户最近的节点，从而加快图片的加载速度，减少用户等待时间。

局限性

• 服务稳定性：部分公共图床可能会因为各种原因（如服务器故障、运营问题等）导致服务中断，进而影响图片的正常显示。
• 数据安全：使用公共图床时，存在图片数据被泄露或篡改的风险。虽然大部分正规图床会采取一定的安全措施，但相比私有图床，数据安全性相对较低。
• 外链失效：图床可能会因为用户违反使用规定、服务终止等原因删除用户上传的图片，导致外链失效，影响到引用该图片的内容的完整性。

搭建

图床对md文档/博客来说是非常重要的，那么让我们来给自己部署一个非常实用的图床吧

我这里使用的方式是Nginx（反向代理对外提供服务） + PicList（搭配Typora设置实现图片自动上传）

首先下载最新版Typora（自行寻找破解方法，我这里使用的是自己购买的正版）

PicList简介

PicList官网网站：https://piclist.cn/

PicList是一款高效的云存储和图床平台管理工具，基于PicGo深度二次开发，提供完整的图床功能和全面的云存储管理能力，主要特点包括：

• 完整保留PicGo所有功能，兼容大部分PicGo插件
• 扩展了内置图床平台，如WebDav、本地图床和SFTP等
• 相册支持同步云端删除文件
• 全面的云存储管理功能，包括文件操作、搜索和预览
• 内置图像处理工具，如水印、压缩、缩放、旋转和格式转换

如何在Typora中使用

Windows系统：

1. 进入Typora设置页面，选择"图像"
2. 将上传服务设置为PicGo(app)
3. 在PicGo路径中填写PicList的安装路径

PicList配置

主界面

配置图床

既然我们选择自建图床，我们这里就选择内置SFTP的方式，这样我们就可以图片上传到自己的服务器

SFTP配置项

{
  "host": "", // 主机名
  "port": number, // 端口号, 默认22
  "username": "", // 用户名
  "password": "", // 密码
  "privateKey": "", // 私钥路径
  "passphrase": "", // 私钥密码
  "uploadPath": "", // 上传路径
  "customUrl": "", // 自定义域名
  "webPath": "", // 网址路径
  "fileUser": "", // 文件用户
  "fileMode": "", // 文件权限
  "dirMode": "", // 文件夹权限
}

说明

host/主机名

必填参数，用于指定SFTP的主机名，一般是服务器IP地址。

port/端口号

可选参数，默认为22。如果你修改了SSH登录的端口号，请对应修改此处。

username/用户名 & password/密码

username为必填参数，用于指定SFTP的用户名。

password为可选参数，如果你使用的是密码登录，请填写密码。但一般不推荐使用密码登录，而是使用私钥登录。

privateKey/私钥路径 & passphrase/私钥密码

privateKey为可选参数，如果你使用的是私钥登录，请填写私钥路径。

passphrase为可选参数，如果你的私钥有密码，请填写私钥密码。

uploadPath/上传路径

必填参数，用于指定SFTP的上传路径，这是文件在服务器上的真实存储路径。

customUrl/自定义域名

自定义域名为可选项，如果不填写，则在复制链接、预览图片等操作时，将使用上面的主机名。

webpath/网址路径

网址路径为可选项，如果不填写，则默认与上传路径相同。该路径用于拼接图片的访问地址，例如填写 images/test/，则图片的访问地址为 https://host/images/test/。

fileUser/文件用户

可选参数，用于指定文件的用户组和用户设置，格式为 user:group，例如 www-data:www-data。如果只有用户名，例如 www-data，则默认用户组为 www-data。

fileMode/文件权限

可选参数，用于指定文件的权限，默认为 0644。

dirMode/文件夹权限

可选参数，用于指定文件夹的权限，默认为 0755。

验证

配置完成后在偏好设置-图像中点击验证图片上传选项，会调用PicList自动上传一个示例图片到服务器，完成后去服务器指定的路径查看图片是否已经上传成功。

至此你已经完成了一半，已经将图片上传到服务器，还需要提供对外服务让其他人可以看到你上传的图片

Nginx部分

Nginx是什么以及可以用来干什么，这里我就不赘述了，可以查看我的其他博客或者网上资料

这里给出一个简化示例，通过Nginx代理一个子域名static.dl-web.top专门用来提供对外服务，同时配置了ssl证书用来完成https的访问

server {
    listen 80 ; 
    listen 443 ssl http2 ; 
    server_name static.dl-web.top; 
    # 共用 SSL 配置
    ssl_certificate /www/sites/dl-web.top/ssl/fullchain.pem; 
    ssl_certificate_key /www/sites/dl-web.top/ssl/privkey.pem; 
    # 所有请求直接转发到 Uptime Kuma
    location  ~ .*\.(jpeg|jpg|png|json|gif|woff|ttf|svg) {
        root   /xxxx/static/;
        index  index.html index.htm;
    }
}

使用

当Nginx和PicList都配置完成后就可以开始使用了，当你在md中粘贴图片时会自动触发PicList的图片上传，上传完成后会自动替换路径为服务器的路径，通过Nginx就可以看到你上传的图片

此时一个简易版的图床就搭建完成了