基于图床的博客图片存储解决方案
一个优秀的博客图片存储解决方案—图床。
更多 Hexo 博客框架内容,请关注博主 Hexo 博文系列:
打造沉浸式写作体验,你需要试试-Markdown-Editor
稳定快速、高效免费的图床方案-Github-jsDelivr-PicGo
Pictures use in hexo
当你看到这里的时候,应该已经有一个自己的 Hexo 博客了。如果还没有的话,不妨使用 Hexo 和 Markdown 来写博客和文章。
在 Hexo 使用初期,你可能也遇到过和我相似的问题:
一篇添加了本地图片的博文在你的个人博客站点无法预览显示出来。
考虑一下:为什么博客站点中的本地图片无法正常加载显示?
事实上,这个很好理解,图片是无法直接作为 MD 文本源码的一部分插入的,只能插入图片的地址,这个地址可以是相对 MD 文件的相对路径,也可以是网络图片地址(网络图片事实上也是不可靠的,毕竟来源是第三方的,当网络图片来源被删除时也会丢失,所以很多使用网络图片的博客一段时间后就会发生图像无法显示、缺失)。
这里我们来考虑插入电脑本地图片的场景,Markdown 文档中指定的图片路径就是自己本地的路径,博客站点当然链接不到自己本地的图片了。
这里,我们先来分享一种基本的解决此问题的方法。使用 hexo-asset-image 插件来为博客插入图片:
插件下载
在 Git Bash 中,进入 Hexo 站点目录下执行如下命令:
1 | npm install https://github.com/CodeFalling/hexo-asset-image --save |
Hexo 配置
在 Hexo 站点配置文件中,搜索 post_asset_folder 关键字,并将其值设为:true:
1 | post_asset_folder: true |
下载以及设置完成后,当你通过 hexo new “Blog Name” 新建博客后,会在 <Hexo 站点目录>\source_posts 文件夹下产生一个和博文同名的文件夹(这个和博文同名文件夹可以作为当前博文的图集,远程推送时会被一起推送到远程库中)。
Demo
设置后如何进行图像的插入呢?
当博文需要添加图片时,将需要添加的图片放入和博文同名的文件夹中,同时通过【相对路径】索引到该图片即可。
例如,你想要在博文 post_name.md 中想要插入了一张图片(test.jpg)。首先你需要将图片资源放在同名文件夹 post_name 中,然后使用相对路径就可以引用到图片资源:
1 | ![](test.jpg) |
添加后你可以使用 hexo s
开启本地 Hexo 服务预览一下,发现已经可以正常显示图片了~
==========================================
事实上,这样的使用是存在问题的:
- 当添加的图片比较多、比较大时,除了自己本地的博客源文件比较臃肿外,还会占用大量本地空间。再加上 Github 仓库的使用,会使得网站部署时非常的慢(推送图集);
- 博客中所有的图片都是要部署到仓库的,而仓库容量是受限的,你懂得;
- 博文中存在大量图片时,会大大降低网页的加载速度,加载的难受啊;
- 哪里都有玄学….咳咳,之前的博客采用这种方法,不知道什么时候竟然丢失了一部分图片。
┓( ´∀` )┏ 怎么办?幸好有度娘啊…
一个广泛使用的,优秀的博客图片存储解决方案 —— 图床。
Image Host
Image Host(Picture Host),也称为图床。图床?!!
何为图床?
图床是指 用于储存图片,并且可以对外提供图片访问链接 的服务器。
服务器?!!难道博主又要骗我花钱买服务器拉?┓( ´∀` )┏
事实上,有很多免费的图床可供你选择。国内和国外都有,国外的图床可能由于有空间距离等因素决定访问速度很慢影响图片显示速度(但可以通过 CDN 技术实现加速)。国内很多大中小型公司都提供免费的图床服务,注册后就可以使用(真香)。
事实上,图床的本质就是:
将图片保存在网络上,并且可以获得图片的直链地址。
爱思考的看客老爷可能已经反应过来了:
这不就是博主前面说的网络图片链接么?你不是说不可靠么?!不要担心,前面我们使用的网络图片其实是其他人提供的图床。这当然是不可靠的,毕竟你不知道什么时候这些图床就不再提供了!之后我们使用的都是自己的图床,这是可控的。
了解了图床的基本概念之后,我们再来看一下图床都有哪些优点:
图床的优点
1 –> 图床访问速度快
图床,一般会把图片存储到第三方的 CDN,除了加快图片访问速速,还可以降低你服务器的存储压力,后续网站迁移扩容就不受影响了。
2 –> 博客前瞻性
目前,你可能只是在部署一个个人博客小网站,但是以后无论是自己的博客还是实际的项目,都可以用图片来提供外链,方便管理。
并且如果你的网站访问量很高啊,一天几十万几百万啊,这时候你考虑的就不是服务器空间够不够大,而是惊人的并发数啊,光是请求 HTML 文件(或其他)的链接就处理不过来了,哪还有多余的资源去读取图片啊,索性就把图片存另一个服务器,为主服务器缓解压力。
大致了解了图床的基本概念以及其优点,这里我们来看当前个人博客有哪些具体的图床实施方案?
图床实施方案
说到这里,图床原来就是图片网络链接啊。可能一些爱动手的看客老爷可能已经开始思绪乱飞~
下面我们来看如何将图片保存在网络上且获得图片的链接地址方案,看客老爷可以根据个人实际情况进行选择:
网盘
很多看客老爷可能想到,如果直接把图片放到各类网盘(百度、腾讯、坚果、OneDrive…)是否可行?
事实上,虽然网盘上传图片方便快捷,免费存储空间又足够,但是网盘中的图片无法获取到链接,或者获取到链接后很快就无法使用了。
直接 Pass….
自建图床服务器
关于自建图床服务器,如果你有一台可供使用的个人服务器,可以尝试使用FTP、Nginx、PHP、MySQL、Chevereto等工具搭建个人图床服务器。
缺点就是,你需要支出必要的服务器等费用,还需要去进行相对繁琐的安装过程才可以使用。
关于自建图床服务器方法,网络上的教程很多。当然你也可关注博主相关系列博客 –> 传送门(未完成,待续…)。
云存储对象
腾讯云、阿里云、等云平台都提供有云储存对象支持,可以用作图床使用,配置过程也非常简单快捷。
但是缺点是,虽有免费额度,但使用量较大时,可能产生相关存储流量费用。但贵在对于访问量较少的个人博客使用很便宜甚至免费,具体收费情况可见各云平台。
特别说明,云存储对象的使用可能涉及到实名认证,域名备案等过程。
关于使用云存储对象配置图床,请参见博主相关系列博客 –> 传送门(未完成,待续…)。
第三方免费图床(推荐)
上面我们说过,国内外有很多免费的图床可供使用。
在选择一款免费图床平台时,你需要关注的是,图床平台服务商是否可靠,图床的流量限制、储存限制以及访问速度等。
例如:免费存储容量为10G,每月访问流量10G,每小时限制上传 20 张,每张大小小于 10M 之类的,但这对于写MD 远远够了。当然这些第三方服务商也是提供相关的收费服务的,你可以消费提升使用权限。
特别说明,一定要选择相对大平台的服务商,主要是怕图床服务商经营惨淡,挂掉以后图片就丢失了。并且有些第三方免费图床会要求进行实名认证,域名备案等。
网络上各路 主流图床推荐:
1 –> 微博图床
你在查找时,很有可能查到使用微博做为博客图床的教程。
这里特别说明一下,微博图床之前使用人较多,但从2019年开始开启了防盗链,直接凉凉了….
2 –>七牛云
简介:注册认证后有 10G 永久免费空间,每月 10G 国内和 10G 国外流量,速度相当快,七牛云是国内专业 CDN 服务商,插件支持比较多,有免费 SSL 证书,但 HTTPS 流量收费。
图片上传限制:暂无
七牛云 30 天后会回收测试域名,因此你必须要实名认证以及绑定自己的已经备案的域名。
3 –>又拍云
简介:注册认证后有10G永久免费空间,每月 15G 的 HTTP 和 HTTPS 流量,提供两款可以免费续期的 SSL 证书,不过用户需要加入又拍云联盟(即在网站底部添加又拍云 LOGO 及官网链接)。
图片上传限制:暂无
需要实名认证以及绑定自己的已备案域名,又拍云认证比较麻烦,建议使用七牛云。
4 –>路过图床
官网地址:https://imgchr.com
简介:支持免注册上传图片,永久存储,支持 HTTPS 加密访问和调用图片,提供多种图片链接格式。
图片上传限制:最大10M
5 –>SM.MS
官网地址:https://sm.ms
简介:永久存储免注册,图片链接支持 HTTPS,可以删除上传的图片,提供多种图片链接格式,有时速度可能较慢。
图片上传限制:每个图片最大 5M,每次最多上传 10 张
==================================================
墙裂推荐:
如果想要长期稳定使用,请优先选择七牛云或者又拍云(需要实名认证以及已备案域名),再下来就是路过图床和 SM.MS 图床。
图床配套工具
选择好图床之后,你可以选择搭配以下图床工具一起使用以便更高效地使用图床:
图片压缩工具
上传图片之前建议压缩一下,一方面可以降低存储,又可以有效加快图片载入速度:
TinyPNG –> 传送门
Tiomg –> 传送门
图床工具
使用图床工具可以方便我们快速将本地图片转换成图床链接,以方便各位博主使用:
PicGo(Molunerfinn/PicGo),是一款比较优秀的图床工具,可以支持微博,七牛云,腾讯云 COS,又拍云,GitHub,阿里云 OSS,SM.MS,imgur 等八种常用图床。且功能强大,简单易用。
关于 PicGo 的安装以及配置方法,请参见博主相关系列博客 –> 传送门。
这里,由于篇幅原因,不做赘述。关于博客中图床方案的具体应用参加博文系列:稳定快速、高效免费的图床解决方案-Github-jsDelivr-PicGo
install_url
to use ShareThis. Please set it in _config.yml
.