Typora编辑Hexo博客时使用图床

1,179 阅读4分钟

这是我参与8月更文挑战的第27天,活动详情查看:8月更文挑战

图床,即用来存储图片资源的服务器,将图片上传至服务器后,在使用图片时按照格式直接引用服务器中图片存储地址就可以正常显示图片,相比于将图片存放在本地使用,存储在网络服务器中时所有终端都可以浏览和使用图片资源。

之前的文章中有讲到使用Hexo和GitHub Pages实现静态博客,以及在本地使用Typora编辑器编辑文章后来发布到博客上产生的图片资源无法显示问题的解决办法,今天我们就学习另一种简单方便的方法来实现多端使用图片资源,即使用图床。

  1. GitHub上搭建个人博客
  2. Hexo+Typora写文章时图片显示问题

图床的搭建方式

图床的种类也是丰富多样的,主要从收费和免费两个方面来看,有以下几种:

  1. 收费
    • 自己购买服务器搭建
    • 购买阿里云、腾讯云等存储服务
  2. 免费
    • 一些网站提供的小容量免费服务
    • GitHub、码云等代码仓库实现存储服务 如果有足够的经费使用,喜欢折腾的开发人员则可以自己购买服务器尝试实现图床;图省事且有性能和容量的要求则可以购买大厂的服务,性能稳定;

如果是穷苦大众或者使用量较少没必要额外开销,则第三方提供的少量免费图床服务是个不错的选择;又或者没钱还爱瞎折腾像我这样的人~,那大家就一起来学习一下使用远程仓库提供的资源存储功能来实现简单的图床。

PicGo

PicGo是一个图床工具,它可以连接我们的本地和远程仓库,在我们本地编辑器种粘贴图片时会自动上传至远程地址并解析为图片链接供以使用。

PicGo是一个开源的项目工具,我们可以在他的项目地址种去下载使用:PicGo项目地址

目前PicGo工具种已经支持阿里云、腾讯云、GitHub等多个图床的管理,对于尚未支持的图床也支持个人用户开发插件的方式进行添加。 image.png 对于图中所要填写的仓库名、分支名、Token等信息需要我们到对应的图床中生成。 由于PicGo默认并没有支持gitee仓库,但是提供了相关的插件来丰富该功能,我们可以点击左侧插件设置,搜索gitee并安装gitee-uploader插件,完成安装后PicGo的图床设置中会出现gitee相关页面。 image.png

远程仓库

gitee

我们首先进进到gitee官网,登录账户,新建一个仓库用来作为图片资源的仓库,仓库要设置为公开否则PicGo无法访问到,最后初始化完成仓库。 image.png 然后我们在gitee中设置并生成一个我们自己的私钥: image.png 拿到这个私钥后,以及我们的gitee名称、仓库名信息配置到PicGo中。

GitHub

gitHub中也是一样,在GitHub官网中登录我们的账户,创建一个新的仓库用于存放图片资源,初始化完成后,在设置->开发者设置,个人token页面中设置并生成一个新的token信息,并将仓库信息和token设置到PicGo中。 image.png 由于GitHub网站在国外,登录过程中可能会遇到一些通信问题,建议使用gitee仓库进行管理图片资源。

本地Typora设置

在PicGo中设置远程仓库信息后,我们就可以到Typora编辑器中进行设置,打开Typora,选择文件->偏好设置,选择左侧图像功能,在右侧可以进行具体的设置。 image.png 验证成功后显示 image.png 这样我们在本地Typora编辑器中粘贴图片后PicGo就会组东帮我们把图片上传至远程仓库中,并返回图片链接地址进行使用。

粘贴图片实现上传到图床使用

我们在本地编辑文章时,使用图片可以直接粘贴或者插入到Typora中,此时在图片信息中可以右键选择上传图片,图片会经过PicGo上传至远程的GitHub或者码云仓库中,并在Typora中使用远程图床中的图片地址进行显示,如: image.png

最后

图床设置成功后,我们在本地写Hexo博客文章时会更加的方便,只需要将使用的文件上传,则在博客发布后就能够访问图床来获取图片信息进行展示了。