为博客搭建一个图床,使用 PicGO 管理,方便文章的维护,提升写作效率。

PicGo

一个用于快速上传图片并获取图片URL链接的工具,支持macOS,Windows,Linux。

PicGo 支持如下图床:

  • 七牛图床 v1.0
  • 腾讯云 COS v4\v5 版本 v1.1 & v1.5.0
  • 又拍云 v1.2.0
  • GitHub v1.5.0
  • SM.MS V2 v2.3.0-beta.0
  • 阿里云 OSS v1.6.0
  • Imgur v1.6.0

通过安装插件PicGo可以支持更多图床和储存库:PicGo插件

使用帮助:PicGo文档

Github 图床

单仓库大小上限500M,总仓库容量5G,但是GitHub图床仓库超过1G后会有人工审核仓库内容,如果发现用来做图床,轻则删库重则封号。

配置

1
2
3
4
5
6
7
{
"repo": "", // 仓库名,格式是 username/reponame
"token": "", // github token
"path": "", // 自定义存储路径,比如 img/
"customUrl": "", // 自定义域名,注意要加 http://或者 https:// ,末尾没有/,用于CDN加速
"branch": "" // 分支名,默认是 main
}

使用

在VScode编辑器中直接使用以下快捷键,将自动完成上传并将图片链接自动插入到Markdown页面中。

从剪贴板上传图像

  • Windows / Unix:Ctrl + Alt + u
  • OsX:Cmd + Opt + u

小技巧:选择行内文本再使用上述命令会将图片名改为文本内容

从资源管理器上传图像

  • Windows / Unix:Ctrl + Alt + e
  • OsX:Cmd + Opt + e

从输入框上传图像

  • Windows / Unix:Ctrl + Alt + o
  • OsX:Cmd + Opt + o

Github 图床优化

国内网络经常访问不了 <raw.githubusercontent.com> ,导致图片显示不出来,可以用以下几种方法解决

jsDelivr

jsDelivr 提供免费的 CDN服务,可以加速 github 公开仓库中的图片、js、css等小文件

使用方法:

PicGo插件里自定义域名填写https://gcore.jsdelivr.net/gh/<用户名><仓库名>,注意末尾没有/

更多CDN服务请查看:https://blog.skk.moe/post/public-cdn-in-diffrent-views/

Github pages

Github pages 使用的域名是github.io,国内貌似是可以访问的

使用方法:

  1. 开启你Github图床仓库的pages服务

  2. PicGo自定义域名里填入https://pbloods.github.io

得到的链接:https://pbloods.github.io/cdn/img/site/background.webp

Cloudflare CDN

Cloudflare是一家美国跨国IT公司,总部位于旧金山。其主要业务是向客户提供基于反向代理的内容分发网络(CDN)和分布式域名解析服务(分布式域名服务器)。Cloudflare可以帮助受保护的网站抵御数据包拒绝服务攻击等网络攻击,保证网站长时间在线,提高网站的性能和加载速度,改善访客体验。

使用方法:

  1. 准备一个域名,将域名转入Cloudflare

  2. 在github图床仓库根目录创建一个CNMAE文件,填上你的域名。在Cloudflare创建一个CNAME解析,解析地址填写你的github图床仓库page地址,开启CDN

  3. PicGo自定义域名里填入你的域名地址

阿里云OSS图床

使用 阿里云国际版OSS 的海外空间不用实名,5G 免费存储空间,100G 免费流量,支持 PicGo。

七牛云OSS图床

七牛云 提供 10G 免费海内外存储空间,每月 10G 免费流量。需要实名,绑定域名才能使用,支持 PicGo。

DogeClooud图床

DogeClooud 提供免费 10G 海内外储存 + 每日 20G 免费流量。需要实名,暂不支持PicGo,暂采用FTP方式上传,不是很方便

参考:官方文档

npm图床

登录

1
npm login

初始化(注意项目名不能与npm上其它项目重复,其它随意)

1
npm init

上传(不能和已有版本重复)

1
npm publish

废弃/删除 包

1
2
3
4
5
# 废弃(安装时提示用户该包已废弃,但仍可用)
npm deprecate <package-name>[@<version>] <message>
# 删除(删除的版本24小时后方可重发!只有发布72小时之内的包可以删除!)
npm unpublish <package-name> --force
npm unpublish <usename/babel> --force

访问npm包内的图片

语法(以jsDelivr为例):

其它CDN加速:
https://npm.elemecdn.com/pblood@1.0.1/img/favicon.png

Bilibili 图床

参考:https://github.com/xlzy520/picgo-plugin-bilibili

哔哩哔哩可用节点整理:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#金山 CDN 路线
i0.hdslb.com
i2.hdslb.com

#阿里 CDN 路线
i1.hdslb.com
14.hdslb.com
s1.hdslb.com
s3.hdslb.com

#腾讯 CDN 路线
13.hdslb.com

#未知 CDN 路线
s2.hdslb.com
boss.hds1b.com

小龙云盘

小龙云盘 是一个基于区块链理念依托IPFS(InterPlanetary File System)的去中心化分布式存储应用;提供无限存储空间、海量资源共享,可以用来做图床或者视频床

其它

其它图床管理工具

兰空图床 Lsky Pro

兰空图床是一个用于在线上传、管理图片的图床程序,搭建好后打开网站即用!演示站点

支持本地等多种第三方云储存AWS S3阿里云 OSS腾讯云 COS七牛云又拍云SFTPFTPWebDavMinio

可以用来搭建自己的在线图床,并且也支持使用PicGo管理,见:Lsky 文档

PicX

一款 github 在线图床管理工具,打开网站即用!PicX官网

BlazeB2图床

基于 BackBlazeB2 和 Cloudflare 开发的图床工具,BlazeB2图床官网

公共图床

无需注册,直接上传,也可以使用PicGo上传,缺点是图片迁移困难,还容易失效