May 13, 2020

3683 words 8 mins read

自建图床三驾马车:Typora、Gitee与PicGo

自建图床三驾马车:Typora、Gitee与PicGo

  Typora写作,Gitee存放照片等资源,PicGo一键上传,自己动手搭建国内快速稳定的图床。

前世今生

  自从搭建了博客之后,从Hexo到Hugo,Markdown自身对照片的支持有多种方法,但是部署到网站上,尤其是部署到Github上,如果直接上传本地原始图片,速度慢的让人心碎。起初找了几个不错的图床,在本站导航栏里的Share界面里进行了分享,聚合图床不错,但是偶尔偶尔有失效链接,七牛云虽说有10个G的容量,但是只有一个月的免费域名,否则需要自己已经备案的域名,域名备案略麻烦。当然分享的图床都非常好用,但始终不得我心,直到Typora、Gitee与PicGo发生了奇妙的化学反应,至此老夫心态祥和,不再口吐芬芳。

三个好伙伴

  • Typora:Markdown写作终极形态

    链接https://www.typora.io/

    推荐:它,跨越三大操作系统;它,颜值与功能齐飞,它,让你沉浸在写作的海洋中,不能自拔。它就是Typora,新一代Markdown写作神器,简约,时尚,完全免费,功能之强大、体验之美妙、理念之先进,让人爱不释手,墙裂推荐;

  • Gitee:Github的孪生(假)兄弟,国产Git服务器

    链接https://gitee.com

    推荐:功能与Github基本无异,全中文操作界面国内访问速度超快,很多在Github上下载难产的项目,只需要一键克隆到Gitee,那速度,就像单车变摩托,你说快不快。其实之前很多人在Github上存放资源,但是碍于速度。Gitee的出现完美解决了这个问题,个人认为Gitee其实还是非常不错的,中文支持友好,对于国内的同学来说Gitee是一个不错的学习平台,通过使用Gitee,对Gitee和Github都会有所收获,毕竟两者十分相似,支持Gitee。

    容量根据Gitee官方介绍,个人用户,Gitee单个仓库的容量上限是500M,总容量是5G,所以,在上传资源时,比如图片,尽可能无损压缩,压缩的方法在本站导航栏里的Share界面里的压缩网站里进行了介绍,这样就可以保证图片的质量,以及数量。

  • PicGo:一个用于快速上传图片并获取图片URL链接的工具

    链接https://github.com/Molunerfinn/PicGo/releases

    推荐:实现自动上传图片并返回markdown格式的图片URL,十分好用,不用一个个上传照片,在Windows下,PicGo功能在Windows/Mac系统中还被集成在鼠标右键中,真正实现,只需轻轻一点,即可轻松上传,返回的图片URL已经自动被复制到剪切板里,在需要的地方,直接粘贴即可。

    默认支持图床来源PicGo官方说明,截止2020年5月14日的数据。

    • 微博图床 v1.0 微博图床从 2019 年 4 月开始进行防盗链,不建议继续使用

    • 七牛图床 v1.0

    • 腾讯云 COS v4\v5版本 v1.1 & v1.5.0

    • 又拍云 v1.2.0

    • GitHub v1.5.0

    • SM.MS v1.5.1 由于官方不再支持V1版本,暂时请使用smms-user插件

    • 阿里云 OSS v1.6.0

    • Imgur v1.6.0

      本体不再增加默认的图床支持,可以自行开发第三方图床插件。详见 PicGo-Core。已有插件支持Gitee、青云等第三方图床。

  因此,Typora可以进行Markdown写作,Gitee存放照片等资源,PicGo一键上传,自己动手搭建国内快速稳定的图床。

牵线搭桥

安装Typora

链接为https://www.typora.io/,选择操作系统,直接安装即可。

新建Gitee仓库

假设已经注册了Gitee账户,在你的Gitee空间下,单击个人资料照片,选择新建仓库

填写仓库信息,注意下图红色框框的提示:

  • 新建仓库名为Image必须

  • 简单介绍一下这个仓库:自建图床(非必须

  • 选择开源必须

单击创建即可,建议将Readme文件补充完整,养成好习惯。

  正常操作是在本地新建一个目录,把图片等资源放到该目录下,然后利用git相关操作进行上传,本着能省就省一步的我来说,这些步骤将由PicGo来完成,一键上传资源到Gitee仓库中。

安装并配置PicGo

  • 安装PicGo

    PicGo软件的链接:https://github.com/Molunerfinn/PicGo/releases,Windows 用户请下载最新版本的 exe 文件,Linux用户请下载 AppImage 文件,macOS 用户请下载最新版本的 dmg 文件。

    • 如果是 Arch 类的 Linux 用户,可以直接通过 aurman -S picgo-appimage 来安装 PicGo;

    • Mac用户使用 brew cask 来安装 PicGo:brew cask install picgo

  • 配置PicGo与Gitee

    打开PicGo

    在侧边栏里的插件设置中,搜索gitee-uploader,点击进行安装;

    紧接着,在侧边栏里的图床设置中,找到gitee,进行设置

    解释如下:

    • repo:用户名/仓库名,比如我的Gitee账户名为kangzhiheng,新建的仓库Image作为图床,所以在这一栏填写kangzhiheng/Image

    • branch:上传资源的仓库分支,填写master即可;

    • token:Gitee的私人令牌,获取方法下一小节《Gitee私人令牌token获取方法》中详细介绍;

    • path:选填,最好填写,比如Img,这样上传的资源都会保存在这个Gitee仓库下的Img文件夹下,避免所有文件显示在仓库首页;

    • customPath和customUrl:不用填写,这个的作用就像我们使用git commit -m "commit message"一样,显示提交消息,插件默认提交,格式一般是Upload 资源名称 by picGo - 时间,资源名称中外文都行,时间精确到秒。

    点击确定,然后在PicGo首页选择默认图床为Gitee,如图,即可配置完成。

Gitee私人令牌token获取方法

进入Gitee个人空间,点击头像,再点击设置

在左边的侧边栏,点击私人令牌

然后在页面的右上角,点击**+生成新令牌**;

按照下图进行设置,注意私人令牌描述必填;

点击提交,然后生成私人令牌,这时提示输入Gitee账户的密码;

然后成功生成私人令牌

一键上传

  至此我们已经配置完成了,现在进行测试。需要知道的是,在Windows/Mac,PicGo功能被集成在鼠标右键中——Upload pictures with PicGo

  PicGo支持5种链接格式:MarkdownHTMLURLUBBCustom,默认链接是Markdown,至于Custom,在软件的PicGo设置里进行自定义设置,另外在PicGo设置里打开上传提示开关。

  更多设置,请关注PicGo官方文档:《PicGo配置手册》。

  现在右键点击一张图片,选择Upload pictures with PicGo,系统在后台默认上传操作,并返回链接格式。直接在Markdown里进行粘贴即可,速度很快,且链接不会失效。

总结

关于PicGo

  PicGo里还有一个很好用的功能就是在相册里查看你上传成功的所有图片。点击图片可以预览。点击图片下面的图标可以复制链接或者删除图片(只是删除本地数据,使其不在相册区里出现)。

有些时候可能上传的图片,需要再次更改URL<比如修改http到https,或者加上一些操作后缀(例:七牛图床支持的?imgslim)等等。另外还可以更改链接格式。

关于Gitee

  在前文中提过,根据Gitee官方介绍,个人用户,Gitee单个仓库的容量上限是500M,总容量是5G,所以,在上传资源时,比如图片,尽可能无损压缩,压缩的方法在本站导航栏里的Share界面里的压缩网站里进行了介绍,这样就可以保证图片的质量,以及数量。

  那么5G容量,到底有多大?我们来捋一捋。

  我博客中大部分图片,原始大小都是几十或者几百KB,经过压缩网站recompressor处理,基本上都是在50KB以下(其实绝大多数图片只有十几KB),就按照50KB大小计算,Gitee单个仓库容量上限是500M,那么可以存放500 x 1024 / 50 = 10240张图片,一篇博客平均15张图片(很多了),单个仓库大概用于将近680篇博客了,按照一周2篇,一个月8篇,一年96篇,偷个懒一年也就90篇(一半就不错了),大约可以写7年半;

  如果一个Gitee账户下的所有空间全部用来当作图床,仓库总容量上限是5G,单个仓库容量上限是500M,那么大约可以建立10个满容量的仓库,那么可以存放5 x 1024 x 1024 / 50 = 104857.6张图片,也按照一篇博客平均15张图片,大概用于将近7000篇博客了,按照一周2篇,一个月8篇,一年96篇,偷个懒一年也就90篇(一半就不错了),大约可以写78年,且不论这只是一个Gitee空间下的容量,你品,你仔细品。

  如果是一张图片平均大小是500KB,一个Gitee空间可以使用7年多,所以绝对够用了。

约定

本着节约资源的想法,对于一张图片或者GIF,约定:

  • 博客中的图片或者GIF长度不能超过900像素

  • 每一张图片尽可能在50KB以下,经过压缩网站如recompressor,处理掉图片中的多余信息;

  • 每一个GIF,大小尽可能在1M以下,GIF压缩网站有:img.topdocsmall等;

  • 每一个资源,命名时要注意习惯,利于管理,规则建议软件名/项目-使用场景/注释/[操作方法]-[1...n]