1. 引言

从我第一次写博客到现在使用halo博客已经有很长一段时间了。最近一段时间的备案后,服务器已经从阿里云香港搬到了腾讯云广州,用的是轻量应用服务器1核2G5M40G的版本,每个月1000G流量,套了又拍云的CDN之后流量是完全够用的,访问速度也非常快。

image-20210122003808046

只不过博客中常常引用图片的问题比较麻烦,用腾讯云COS的话除了存储费用还需要支付流量费,图片量比较大的话被就又是一个很烦人的事情了。又拍云提供的流量一个月才15G,访问量也不够呀!

似乎就剩下一种方法了,自建图床。要想访问速度快+自定义域名,那么韩国、香港、新加坡、台湾都可以,全国都要访问速度快,那么多线BGP服务器必不可少,国内的线路非常复杂,各种路由。那么可选的就是CN2线路了,一算价格,其实又不合算了。

img

这个时候,jsDelivr的好处就来了,我们只要将图片托管在GitHub,托管后的图片和文件(20M内)在国内使用的网宿CDN,全国各个地区速度都有加速,国外访问用的是大名鼎鼎的CloudFlare CDN,这就实现了全球访问加速,延迟低的可怕。

image-20210122030757768
线路最快节点最慢节点平均响应
电信江苏常州市电信0.07s广东中山市电信5.58s0.58s
联通北京北京市联通0.07s辽宁阜新市联通2.87s0.34s
移动天津天津市移动0.07s黑龙江鹤岗市移动8.85s0.68s
海外美国国外0.22s澳大利亚国外1.08s0.53s
教育网北京北京市教育网0.17s辽宁沈阳市教育网0.34s0.25s
香港香港香港0.05s香港香港0.19s0.12s
台湾台湾台湾0.09s台湾台湾0.18s0.14s
澳门澳门澳门0.12s澳门澳门0.12s0.12s

注意:不要滥用,只是推荐给做博客的童鞋使用!

2. 博客写作工具架构

image-20210122010526035

作为一个markdown的忠实拥趸,我使用的是Typora这一款工具,可以从官网直接下载。使用非常舒适,搭配Picgo和图片插件,直接将markdown图片格式的图片插入到博客中,享受自动化的快感!

原先需要的步骤:

  1. 截图
  2. 打上博客水印https://reid.run
  3. 上传至TinyPNG压缩
  4. 获取压缩后的图片
  5. 以时间格式重命名
  6. 上传到GitHub仓库
  7. 获取到jsDelivr加速图片地址

现在配合Typora、TinyPNG API、Picgo、Picgo-plugin-compress(压缩插件)、Picgo-plugin-watermark(水印插件)只需要截图+粘贴,就可以只关注写作本身,不需要考虑这些复杂的事情了。

2.1 推荐主题

Typora中有很多优秀的主题,推荐一下我使用的这个主题typora-theme-orange-heart

typora_theme_orange_heart

3. Picgo及插件

image-20210122012728114

这是一个非常优秀的图片上传工具,GitHub star 10K+,有很多人为它开发了第三方库,包括这次我们推荐的Picgo-plugin-compress(压缩插件)、Picgo-plugin-watermark(水印插件)。

Picgo:PicGo

Picgo第三方插件仓库:Awesome-PicGo

Picgo-plugin-compress(压缩插件):picgo-plugin-watermark

Picgo-plugin-watermark(水印插件):picgo-plugin-compress

3.1 图床设置

3.1.1 新建一个 GitHub repo

image-20210122014134979

3.1.2 创建 token

在主页依次选择【Settings】->【Developer settings】->【Personal access tokens】->【Generate new token】

img

填写好描述,勾选【repo】,然后点击【Generate token】生成一个Token。
注意这个Token只会显示一次,自己先保存下来,否则只能再次生成一个新的不重复的token了

3.2 Picgo设置

image-20210122020533351

 按照图示填入信息就可以完成图片的上传工作了,还需要对Typora的偏好设置中配置上传工具为PicGo.app

image-20210122020854477

配置完成后,在Typora上粘贴截图就会直接调用规则,完成图片上传并返回markdown格式的加速图片地址。

我们也可以在PicGo的相册里单独管理已经上传的图片。

image-20210122021453773

3.3 水印插件

Picgo-plugin-watermark(水印插件):picgo-plugin-compress

直接在【插件设置】中搜索需要的插件名watermark,安装就可以了。

注意:由于一些依赖包在GitHub,可能需要一些“手段”才能正常安装。

这是我的配置信息,具体的配置信息可以从插件的GitHub上查看。

image-20210122022411721

3.4 压缩插件

TinyPNG:https://tinypng.com

Picgo-plugin-compress(压缩插件):picgo-plugin-watermark

配置压缩插件前,我们先需要申请一个TinyPNG的压缩API,用来给我们上传的图片进行压缩。

免费用户为500张图/每月,但是Picgo-plugin-compress允许我们使用多个免费账户API来作弊

通过右上角的【LOGIN】,输入邮箱即可完成注册。

image-20210122023024493

注册完成之后,点击页面中的【add API key】,激活API,并记录下来,我们需要填入压缩插件中。

image-20210122022847301

打开PicGo的插件设置,点击“螺丝”按钮,选择【配置 plugin-compress】,选择【tinypng】,将API key 填入,选择确定。

image-20210122023358925

4. 总结

现在,我们已经完成了所有的配置,上传一张图片,你就能发现他已经自动压缩并给我们添加好了博客水印。

通过一张动图,查看效果:

xxx

Q.E.D.


print("种一棵树最好的时间是十年前,其次是现在")