搭建自己的图床


什么是图床?

简单理解为将图片上传存储到服务器,同时可以在公网中通过 url 访问图片。

为什么要搭建图床?

我们在写 Markdown 文档时对于文档里面的图片,如果不使用图床,图片都是存放在本地,其他地方要用的话还得复制来复制去很不方便,也不好管理。
为了解决这种问题,达到一劳永逸的目的解决方法就是搭建自己的图床,把需要用的图片地址变成网络地址,这样想在哪里用直接通过链接方式使用。

PicGo

图床工具就是自动把本地图片转换成链接的一款工具!
网络上有很多图床工具 PicGo 是一款用 Electron-vue 开发的开源软件,可以支持微博,七牛云,腾讯云 COS,又拍云,GitHub,阿里云 OSS,SM.MS,imgur 等 8 种常用图床,功能强大,支持 Windowns,macOS 和 Linux 平台
github 下载地址:[https://github.com/Molunerfinn/PicGo/releases]

这么多图床有收费的有免费的,且对应我们个人用户来说免费的也完全够用,我们当然选择白嫖啦!哈哈哈~

搭建自己的图床

按需下载安装完 PicGo 工具后,这里使用免费的 gitee、github 图床,先创建一个专门存储图片的仓库且设置为公开的。
生成一个新的个人令牌 token(需要注意的是生成后记得保存,该 token 只出现一次,后续是不可查看的)

  • 使用 gitee 图床(不推荐)


先在软件中安装 gitee 的插件来支持,安装完后在图床设置的最后就可以看到 gitee 点击进行配置 gitee

repo: 仓库名称

path: 存放图片的目录,可以不写,默认根路径

token: 在 gitee 生成的 token

其他选项可以不填

然后就可以开心的使用了,在软件的上传区上传,这里很方便的是可以使用剪贴板的图片,这样我们拿微信或者其他截图工具随手截图后直接点击剪贴板图片就可以上传(注意剪贴板中必须要有图片否则会失败,如果有报错可以在设置中根据日志文件来定位问题)

上传成功后远程仓库就会看到上传成功的图片,在工具左侧相册中也可以看到图片,还可以预览、修改、删除等操作,但是这里的删除操作只是删除本地图片,无法同步删除远程仓库的图床。

gitee 作为图床:
优点:
免费
毕竟服务器在国内,访问速度比 github 更快
缺点:
gitee 本身还有 1 M 图片大小的限制,而且据了解现在不允许作为图床了,做了防盗链,使用图床的图片会变成 gitee 的 icon。

  • 使用 github 图床+jsDelivr
    github 图床步骤和上面几乎一样; jsDelivr 下面详讲。

  • 免费的代价
    图片大小有限制;众多免费图床服务注册条款里均有禁止商用说明,万一哪天你使用的服务挂掉了或者关闭了图片外链,那你所有的链接都无法访问了,对你造成的损失或许不小。例如:前几年的微博图床。

github + jsDelivr CDN加速访问

地址: ![https://www.jsdelivr.com]
jsDelivr 不支持加载超过 20M 的资源
CDN 加速:可以通过 CDN 的就近访问原则加快图片的访问速度。

  • 为什么使用它?
    因为 github 服务器在国外访问速度很慢所以我们使用 jsDelivr CDN 免费加速。
    原本 github 的自定义域名应该是:https://raw.githubusercontent.com/[username]/[仓库名]

    但是使用这种方式访问图片很慢,所以使用 jsdelivr 作为 cdn 加速。
    使用简单改变域名即可,不需要任何其他配置。

  • jsDelivr 的 CDN 加速链接格式
    https://cdn.jsdelivr.net/gh/GitHub用户名/仓库名@发布的版本号/图片路径
    因为我们这里上传的只是图片,就不设置版本了,所以链接修改如下:
    https://cdn.jsdelivr.net/gh/GitHub用户名/仓库名/图片路径

  • cdn 加速图片

例如我的 cdn 加速后的图片链接:

  • 静态文件接入 cdn(重点!)
    可以像cdn图片的方式一样把所有的css、js等文件的加载路径都修改下,从而让全站使用CDN加速!
    因为js、css 等静态文件管理和图片有些不同,因为我们会编辑他,会加入新的内容。所以要对 GitHub 中静态文件进行版本发布,在 cdn 中引用对应的版本。CDN 中引用的是 GitHub 的“发布版本(release)”,不是“标签版本(Tags)”
    在任意 JS/CSS 文件后添加 .min 能得到一个缩小版,如果它本身不存在,将会为你生成:
    https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/src/core.min.js
    测试:
    浏览器打开->F12->Network->Ctrl + F5(强制刷新,即不使用缓存刷新),然后看加载时间多少。

  • 修改 PicGo 中的自定义链接
    如下:
    https://cdn.jsdelivr.net/gh/用户名/仓库名
    现在我们直接上传图片,取得的链接就是 CDN 的链接了, 可以测试一下速度,还是很 nice 的。

    github博客使用cdn全站加速前:

    cdn全站加速后资源确实快了:

  • jsDelivr 缓存问题
    部分文件github已经修改更新,但是jsDelivr访问到的确没有更新,网上找了常见刷新缓存方法也无效,无奈下只好把没有更新的cdn资源替换为本地资源

遇到的问题

  • picGo 上传动图 gif
    如果直接复制网页上的动图,去上传的话是截取的某帧,是静图。应该下载到本地,然后在拖进去上传就可以了

  • github 图床设置

确保你的 GitHub 图床设置路径准确无误
检查仓库名不能出现空格,要有空格请用 - 来代替(因为 GitHub 中的空格默认换成-)
图片上传成功到github了 但是访问加速后到链接404,检查发现
在picgo中设置自定义域名时:
https://cdn.jsdelivr.net/gh/silin001/silin001.io/@main
此处的仓库名称应该是图床的仓库名称!:
https://cdn.jsdelivr.net/gh/silin001/仓库地址/@main

  • picgo 上传图片报错 401
    报错日志: “message”:”Bad credentials” 根据百度有的说重启软件也不好使,最后在 github 提了 issues 作者解释为无权限,建议删除 token,生成新的 token 解决。不过我第一天就这样试过不行,第二天发现突然可以了,给我整 emo 了! 遇到这种情况如果反复检查配置没问题,就重新生成 token 试试。有时候都没问题可能是网络问题,多尝试几次.

  • mac电脑按照配置完无法上传成功!
    我从我的win10配置完后,来到mac 使用picGo配置相同参数后上传失败,最后发现中win上github生成的token,来到mac上不存在了(这个暂时无解,我生成过30天、3个月、永久的token要么刷新就消失,要么过一段时间在刷新就消失很奇怪;虽然消失了但是之前使用的token好像还可以用) 只好需要生成一个新的token。

  • picgo 上传 github 后图片无法显示?

原因是 github 屏蔽掉了图片,解决办法就是修改 host
win 路径:C:\Windows\System32\drivers\etc\hosts
添加如下:

  # GitHub Start
140.82.113.3      github.com
140.82.114.20     gist.github.com
151.101.184.133    assets-cdn.github.com
151.101.184.133    raw.githubusercontent.com
151.101.184.133    gist.githubusercontent.com
151.101.184.133    cloud.githubusercontent.com
151.101.184.133    camo.githubusercontent.com
151.101.184.133    avatars0.githubusercontent.com
199.232.68.133     avatars0.githubusercontent.com
199.232.28.133     avatars1.githubusercontent.com
151.101.184.133    avatars1.githubusercontent.com
151.101.184.133    avatars2.githubusercontent.com
199.232.28.133     avatars2.githubusercontent.com
151.101.184.133    avatars3.githubusercontent.com
199.232.68.133     avatars3.githubusercontent.com
151.101.184.133    avatars4.githubusercontent.com
199.232.68.133     avatars4.githubusercontent.com
151.101.184.133    avatars5.githubusercontent.com
199.232.68.133     avatars5.githubusercontent.com
151.101.184.133    avatars6.githubusercontent.com
199.232.68.133     avatars6.githubusercontent.com
151.101.184.133    avatars7.githubusercontent.com
199.232.68.133     avatars7.githubusercontent.com
151.101.184.133    avatars8.githubusercontent.com
199.232.68.133     avatars8.githubusercontent.com
# GitHub End

cmd 执行:
ipconfig /flushdns 刷新一下本机的 DNS 解析
picgo 重启后相册中查看图片正常;刷新 github 页面发现图标可以显示了

2022 后续更新

后来发现jsDelivr在国内死掉了; jsDelivr + github图床根本访问不了,暂时使用聚合图床

  • 聚合图床

我的示例图片:


文章作者: 尖椒土豆sss
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 尖椒土豆sss !
 上一篇
从0到1搭建vue3+ts项目 从0到1搭建vue3+ts项目
前言在自学 vue3 + vite + ts 项目时遇到的一些问题,都是一步一坑踩过来最终解决的,也借鉴了网上很多资料,特以此篇记录我的日常踩坑之路/(ㄒ o ㄒ)/~~ 如果文章对你有帮助,可以点击链接关注我的掘金社区账号 更多技术分享请
2021-10-05
下一篇 
h5接入浙里办爬坑 h5接入浙里办爬坑
记录个人遇到的 h5应用接入’浙里办’ 的爬坑之路!如果文章对你有帮助,可以点击链接关注我的掘金社区账号 更多技术分享请移步我的掘金哦~ 😀😀😀 点击链接 学习交流群(前端微信群) - 掘金 (juejin.cn) 加vx拉你进 前端
  目录
L
O
A
D
I
N
G