如果你想搭建一个和本站类似的个人博客，那就需要图床来辅助

[TOC]

为什么要搭建博客图床?

以CSDN为例，我们可以选择使用大部分blog平台通用的markdown语法进行博客创作

虽然CSDN自带的编辑器已经能满足我们95%的写作需求

但是Typora在markdown语法编辑上能给你提供更好的写作体验

所以我选择了以Typora+Picgo+图床的方式来进行博客创作

而在本地的markdown文件.md中，图片是以“外链”这一形式存在的

  • Office word中，图片是直接插入docx文件里面
  • Markdown中，图片只是一个本地/联网的地址

如图，在markdown里面，图片显示的其实是一个本地的地址

image-20230319190059184

也就是说，如果我们使用本地markdown编译器（如typora）来编辑MD文件的时候，如果MD里面插入的图片的源文件被移动或者删除了，我们的MD文档里面对应的图片也无法显示出来。

image-20230319190140520

同时，如果我们用本地编辑器写好了一篇博客，想把它上传到CSDN上。CSDN是无法自动转存文件里面的图片的。因为这个图片只是一个你硬盘里面的文件路径，他也没办法越权跑到你电脑里面找文件呀！

1
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i1aotHJh-1679223552739)(./Snipaste_2023-03-19_18-58-37.png)]

什么是图床？

在我们往typora里插入图片的时候，PicGO自动上传图片到图床，并返回一个图片的链接

这时候你的图片就是一个**网络的链接(网址)**，不再是本地路径。
你也可以在任何有网络的地方、用任何设备访问这张图片了！

即便是本地的那张图片移动or删除，也不会影响图床里的这张图片。

同理，typora里面的图片也就不会失效了，CSDN也能正常从网络上将你的图片下载下来，我们的博客也能很方便的从typora拷贝到CSDN上发布。

接下来就是如何搭建阿里云OSS图床的教学了！

前排提醒，阿里云图床需要付费💴，但价格非常便宜！

如果你想白嫖，也可以考虑用gitee作为你的图床。但是gitee有单仓库文件大小限制(600mb)。后续图片多了，转移图床的成本更高。还不如一开始就选个好的平台，不是嘛？

typora+picgo+gitee图床配置方法，看这个👉【链接】

22.03.26更新：果然“免费的才是最贵的”，经过多个朋友的反馈，确认gitee图床已经崩溃，图片在gitee仓库内没有问题，但是typora/picgo/obsidian内都无法正常预览图片，CSDN也无法转存！可能是gitee更新了外链机制，新增了防盗链。

还是建议大家更着本篇博客使用阿里云OSS吧！

1.准备软件

1.1Typora

想必各位应该听很多博主安利过Typora这款软件，这里就不展开描述了

新版本typora需要付费买断。可以考虑支持正版，也可以去找找旧版本安装包

参考这个视频👉【链接】

如果你找到了旧版本安装包，需要确认typora版本高于0.9.86

1.2Picgo

找到对应安装包，下载安装即可

image-20220111193636551

2.配置阿里云OSS

在浏览器搜索阿里云OSS，即可找到官网

https://www.aliyun.com/product/oss

image-20220111193847214

2.1注册,开通对象储存

注册账户并实名后，进入你的控制台

image-20220111194645144

选择对象储存并开通

image-20220111194540431

2.2创建bucket

在左侧选择概览，然后在右侧创建一个新的bucket

image-20220111195034924

注意：

  • Bucket名字不能有大写字母
  • 服务器就近选择
  • 图床选择标准存储
  • 读写权限公共读

image-20220111195753835

创建完成后，你的bucket应该就出现在了左侧

2.3找到你的地域节点

点击你的bucket名

image-20220111200207252

然后点击bucket下的概览

image-20220111200304506

在访问域名一栏找到你的地域节点，后面会用到

如图，只需要复制oss-cn-shenzhen即可，不需要后面的.aliyuncs.com

image-20220111200522615

2.4找到你的Key

来到右上角，鼠标放在你的头像上，在弹出的框里选择AccessKey管理

image-20220111200832708

在弹出的选项框里，选择“继续使用”

image-20220111200939292

进入后，创建一个AccessKey

image-20220111201037036

在弹出的界面里，记住你的accessKeyId和accessKeySecret

2.5给你的阿里云账户充值

2.5.1收费问题

阿里云OSS的各项收费是独立的！

对于图床而言，有两种收费形式

  • 以充值的方式使用储存容量以及流量(默认状态)
  • 按年/月收费，购买一定存储包。流量额外收费

也就是说，即便你购买了下图的存储包，你依旧要为访问图床的流量付钱！

image-20220104200946233

下图是在默认状态下，容量和流量收费的价格

图床使用的是标准型，请勿购买其他类型

  • 储存容量：0.12元/GB/月
  • 图片上传到阿里OSS流量：免费
  • 外网流出流量(如typora访问图床图片)：闲时0.25元/GB，忙时0.50元/GB
image-20220104193905591

仔细算算，我们图床的数据量其实很小的

0.12元/1GB/1个月，一年就是1.44元，远低于40GB的9元收费！

截图/照片以平均0.5mb/张估算，1gb可存放超过1600张图片！

数据低于7GB的情况下直接充值，以GB付费其实比购买储存包更加值得！

2.5.2注意事项

  • 记得给阿里云账户充值！！别到时候欠费停用了！！
  • 刚开始作图床的时候，直接充值使用即可，无需购买容量包！

image-20220111201309818

到这里，我们阿里云OSS基本配置完毕了😎

3.配置picgo

下载并打开picgo后，在你windows的状态栏里找到picgo的图标，打开picgo的主界面

image-20220111203136884

mac的arm芯片用户可以用piclist，和picgo不能说很相似，只能说一模一样。下载安装了之后，也是在mac的状态栏里面找到piclist的图标，点击打开主窗口，打开软件设置界面。

piclist：https://github.com/Kuingsmile/PicList，官网：https://piclist.cn/。

3.1图床设置

在图床设置里面选择阿里云OSS，依照以下步骤填写信息

  • 设定Keyld：填写刚刚获得的AccessKeyID；
  • 设定KeySecret：填写AccessKeyIDSecret（注意，直接从OSS控制台中复制keysecret有概率会出现空格or回车，建议先复制到记事本中，再复制到picgo中）
  • 设定储存空间名：填写bucket名称。不是浏览器里的域名；
  • 指定存储路径：其实就是自定义一个文件夹的名字，以/结尾. 它会自动在你的bucket里面创建一个文件夹，并把图片上传进去；

image-20220111203313899

弄完之后，记得“确定”，并点击“设置为默认图床”！

3.2picgo设置

在设置里打开时间戳重命名和上传后自动复制URL这两个功能。

时间戳重命名：以上传时间来重命名图片，避免同名的图片无法上传（该设置不影响本地图片名）

image-20220111204114564

3.3picgo重命名插件配置

上文提到的picgo“时间戳重命名“选项，并不是完全的好用，因为他会出现同一张图片被多次上传的问题。举个例子，当我在10点10分上传了图片a，过了一会，10点12分，我又在另外一篇文章引用了这个图片a，此时picgo因为采用时间戳重命名，这个图片a会被命名成两个不同的名字，最终的结果就是a在你的图床里面被保存了两次，占用额外的空间。

要想解决这个问题，我们需要引入一个概念：哈希、md5；

所谓哈希，是一种编程中的数据结构思想，其方式是利用一些公式，将我们存储在计算机中的一个文件或者任何二进制流转换成一个固定长度的字符串。md5是哈希的其中一种算法，转换出来的字符串长度为32位。

哈希拥有一个特性：相同的字节数据，计算出来的哈希字符串结果一致。所以，只要计算出来的字符串结果相同，我们就可以认为这两个文件是相同的文件。

  • 图片a在第一次使用哈希算法计算的时候，得到的结果是123456；第二次图片a再用相同的哈希算法计算，得到的结果还是123456；
  • 文本文件text.txt，第一次用哈希算法计算的时候，得到的结果是abcd；第二次用相同哈希算法计算，得到的结果是abcd；第三次，我们修改了test.txt，得到的结果就变成了adck了，此时哈希结果不同，说明该文件和前两个文件已经不是同一个文件了；

上述只是哈希的最基础的一个概念，我们只需要记住，当两个文件使用相同的哈希算法，计算出来的哈希结果相同的时候，就可以认为他们是相同的文件。

哈希算法可能会出现”哈希碰撞“问题，即两个完全不同的文件，却计算出来相同的哈希结果的冲突问题。但是这个不是我们当前需要考虑的问题，即便是md5算法，能产生两个冲突的文件也是很难很难的。对于我们个人使用来说，更是完全不可能了。

所以，借用哈希的思想，我们可以修改picgo上传图片时候重命名的配置，让其用哈希结果来命名。这样，即便图片a被我们在不同的时间被上传，它最终也会匹配成相同名字的文件路径，在云端图床里面也只会存储一份。

实现这个需求，需要安装picgo的插件rename-image，作者是puppet。

picgo安装插件需要借助npm，如果你之前配置过hexo博客，那就是已经安装过node.js了。如果没有，则还需要根据提示，去node的官网上安装node.js，才能在picgo中安装插件。node.js官网：https://nodejs.org/zh-cn/。

如果插件下载很慢，是因为npm默认使用的海外的下载源，用如下方式修改为国内的镜像源，二选一即可。将命令复制后，去电脑的CMD终端里面执行就可以了。

1
2
3
4
淘宝的
npm config set registry https://registry.npmmirror.com
或者阿里云的
npm config set registry https://npm.aliyun.com

在下图所示插件界面，搜索rename-image，下载插件。

image.png

随后点击插件图标旁边的齿轮，进入插件的设置界面。

image.png

使用如下方式进行配置，图床配置名可以随便写，路径格式配置为{Y}/{m}/{hash}，这样最终上传到云端的图片就是图床地址/2024/10/图片文件哈希.图片文件后缀了。能保证我们每个月上传到云端的图片，都不会冲突，只会在云端保留一份。

image.png

点击确定，配置完成。记得去picgo的配置中将“时间戳重命名”功能关闭，避免picgo的功能和插件的功能冲突。

4.配置typora

进入typora主界面，点击左上角的“文件-偏好设置”

  • 选择图像
  • 插入图片时上传图片
  • 下面的选项全勾上（第二项对网络位置的图片可钩可不钩，主要是避免同一张图片被多次上传）
  • 上传服务选择PicGo(app)
  • PicGo路径：找到picgo的安装路径，不是安装包的路径！！！！
image-20220104193025600

5.测试是否成功

5.1 typora自带上传测试

设置完毕后，我们点击验证图片上传选项，如果弹出以下弹窗，我们的图床就搞定了！😀

image-20220111205131635

如果出错了，建议先自己看看picgo的日志里面为什么报错，检查一下配置有没有出错。

如果看不明白日志的报错，就去picgo的github仓库开一个issue问。对于picgo的错误我也不是很清楚，来问我是浪费你的时间🙅‍♀️

如果你在检查过picgo配置内容和阿里云OSS设置、重启picgo、重启电脑后仍然无法成功上传。还可以参考这篇博客的配置方法👉 很不幸，原文已被删除

5.2 复制图片测试上传

最后新建一个文件，验证图片是否正常上传。

日常写作的时候，我们只需要复制图片，在typora里面粘贴即可，无需拖动！

当你的图片链接显示为阿里云的网络链接，而不是本地路径时

image-20220111205318201

6.大功告成！

到这里，我们的图床就大获全胜！开始你的创作吧！🧐