如何使用 PicList + Github 搭建图床

Cover.png

简介

本文主要介绍如何使用 PicList + Github 来搭建图床，以及我选择这种搭配的原因和我个人的图床使用心得等。

图床相关问题

为什么要搭建图床

在写个人博客时，往往涉及到上传并展示图片，这个时候就需要使用图床来提供一个稳定的图片获取。
在 博客园 或 CSDN 等平台编写时，通常可以使用这些平台自己的图床，但是不在这些平台编写时，可能需要搭建自己的图床。
通常搭建图床需要有服务器，例如一种常用的搭建图床方法便是租用云服务器的对象存储服务，但是这通常意味着一定的开销。

那么如何免费搭建图床呢？大体上可以分为三种：

  • 使用 Github 或 Gitee 创建开源仓库来搭建图床。
  • 使用提供免费图床服务的网站，例如 Imgur、SM.MS。
  • 使用 七牛云 这种提供一定免费额度的云平台。

搭建图床需要考虑的因素

搭建图床主要需要考虑的是图床的 稳定性，即读者可以稳定的获取图片，同时还需要考虑是否要自己搭建服务器，是否有自己的域名等因素。

图床服务端的选择

首先我个人没有服务器和自己的域名，因此需要有自己域名的 七牛云 被 pass 了。
其次 Imgur、 SM.MS 这类图床网站在访问上存在一些问题，国内访问会比较费劲，导致资源不是很稳定。
最后 Gitee 现在禁止将仓库当作图床了，仓库会被封，因此最终选择 Github 作为图床。

图床客户端的选择

图床的客户端常用的有两个，一个是 PicGo，一个是 PicList。
PicList 是基于 PicGo 二次开发的，在兼容 PicGo 生态（包括配置和插件等）的基础上，功能会更加丰富。
我个人建议使用 PicList，PicGo 客户端在展示上传的图片时会有严重拉伸的问题。

PicList 支持的额外功能：

  • 支持给图片加水印等处理。
  • 支持云存储管理，如文件浏览和检索等。
  • 支持云端同步删除。
  • 相册检索功能。

Github 仓库准备

创建图床仓库

我们进入 Github 官网 创建一个空的公共仓库即可。

生成 Token

在 Gitgub 个人页面找到 Settings，注意不是仓库的 Settings。

GithubPersonal.png

之后找到 Develpor settings，并点击进入。

GithubSetting1.png

之后选择 Personal access token 下的 Tokens(classic)。

GithubSetting2.png

之后选择 Generate new token(classic)。

GithubTokenGen1.png

最后设置一下过期时间和权限，权限部分需要选择 repo 选项。

GithubTokenGen2.png

最后生成即可。

!> 记得记下 token 的值，除了第一次会显示，这个值后续无法查询到。

PicList 安装

安装 Node.js (可选)

根据 PicList 官方文档指南，我们需要安装 Node.js >= 20 的版本，但询问开发者得知如果不装插件，Node.js 可装可不装。

如果想安装 Node.js 的话可以在 Node.js 官方下载页面 下载最新的长期支持版本进行安装。

下载安装包并安装

前往 Piclist 官方仓库发布页，根据自己系统的架构选择下载最新的 PicList 安装包。

PicListDownload.png

我这里是 Win11 64 位操作系统，选择 PicList-Setup-3.0.6-x64.exe。
之后跟随安装引导完成安装即可。

PicList 配置

打开应用后可能没有界面显示，请检查任务栏右侧折叠的后台应用。

添加图床

打开界面后点击 图床 项下的 Github，这里我之前配置过了，所以有一个。

PicListImageBed.png

填写图床配置

点击新增后会弹出如下界面，我们需要填写相应配置。

PicListGithubConfig.png

各项参数含义及填写如下：

  • 配置名：起一个名称方便记忆，后续改名称会显示在上传页面的选项中。
  • 仓库名：图片会上传到的仓库，这里填写之前创建的图床仓库的名称，例如：Daniel-zyc/Danz-image-host-01。
  • 分支名：图片会上传到仓库的哪个分支，这里推荐自己定一个，例如：img。
  • Token：在这里填写之前创建的 Token 值。
  • 存储路径：图片会上传到仓库的哪个文件夹里，例如：blog/，后续上传时也可以指定文件路径，这里的路径会作为前缀加到上传是指定的路径上。
  • 网站路径：图片自定义web路径，可以不设定，该功能用于处理一些特殊情况，详情请看这个 Issue。
  • 自定义域名：图片自定义域名，推荐使用 CDN 加速，否则可能会无法加载资源，可以填写 https://cdn.jsdelivr.net/gh/{github用户名}/{仓库名}@{分支名}/，例如：https://cdn.jsdelivr.net/gh/Daniel-zyc/Danz-image-host-01@img/。

可查看 PicList 官方文档 Github 上传配置 的部分了解更多信息。

上传名称设置

打开 设置 => 上传 界面。

PicListUploadConfig.png

点击高级重命名进行重命名设置，这里我的设置为：{Y}/{filename}_{Y}-{m}-{d}_{h}{i}{s}。

PicListRenameSet.png

最后根据是否需要再额外对每张图片单独命名来决定是否开启 手动重命名，如果开启，则会在上传时允许再次修改名称。

测试上传

这时回到上传界面，可以在右上方 切换图床 处切换为刚才配置的图床，然后上传图片即可。

如果开启 手动重命名，在上传时会弹出重命名窗口，此时同样可以修改图片的存储路径，例如：wallpaper/xxxx.png，这样上传后的图片会存储在 wallpaper 文件夹下。

PicListUpload.png

上传后可以在相册看到上传的图片。

PicListGallery.png

相册部分打开过滤器可以进行筛选。

PicListGalleryFilter.png

图床管理配置（可选）

打开管理界面，选择 Github，进行配置。

PicListManage.png

各项参数含义及填写如下：

  • 配置名：起一个名称方便记忆，后续改名称会显示在管理页已保存的配置中。
  • Token：在这里填写之前创建的 Token 值。
  • 用户名：Github 用户名。
  • 代理地址：无需配置。
  • CDN 加速域名：用于指定CDN加速域名，例如：http://cdn.jsdelivr.net/gh/{username}/{repo}@{branch}/{path}。

可查看 PicList 官方文档 Github 管理配置 的部分了解更多信息。

图床管理测试（可选）

在已保存的配置处可以看到刚才的配置。

PicListManageHome.png

之后我们点击进入，可以看到管理界面。

PicListManagerGithub.png

我个人的使用心得

我目前没有自己的博客服务器，主要在博客园分享一些内容。
一开始搭建这个图床是为了在博客园写博客时使用，但是后来发现博客园的 VSCode 插件上传图片之类的很方便，而且在博客园用博客园本身的图床会更稳定，因此我博客园的图片后来并没有使用自己的图床。
目前 Github 图床只是作为我图片的备份，上传的是自己喜欢的壁纸头像之类的。
我个人觉得创作的内容还是要有备份的，因此虽然使用了博客园自己的图床，但我图片还是会在本地在存一份。
各位可以根据自己的实际使用需求进行调整。

参考连接

PicGo 官方文档
PicGo 官方仓库
PicList 官方文档
PicList 官方仓库
Github 官网
Node.js 官方下载页面

posted @ 2025-12-04 17:41  Daniel-zyc  阅读(78)  评论(0)    收藏  举报