Typora+阿里云oss+picgo搭建图床

1. 前言

1.1 为什么要搭建图床?

  我们日常写博客时,如果只是将图片复制粘贴进Typora 中,图片会在本地本地备份一份,路径大多都是本地或者在线链接。当我们发布文章时,看不到文章在客户端引入的图片,就算插入在线图片链接也是别人的链接,如果某天别人删除了该图,我们引入的图片链接就会永久失效,不利于维护。因此我们需要搭建属于自己的在线图床仓库,利于维护,随时管理。

1.2 什么是图床:

  指储存图片的服务器

  图床一般是指储存图片的服务器,有国内和国外之分。国外的图床由于有空间距离等因素决定访问速度很慢影响图片显示速度。国内也分为单线空间、多线空间和cdn加速三种。

1.3 图床选择

  图床存储方式有很多种,例如github、gitee、七牛云等方式,像github、gitee这种对象存储可以白嫖,但是也有毛病的时候,像gitee图床在2022上半年就被封了,导致无法访问自己的图库。因此我们最好花点钱买个自己图床,并且图床对象存储也不贵,不过一包烟钱一顿饭钱,技术付费知识付费应该的。博主推荐阿里云oss(不是打广告,单纯便宜好用)

  这种事你们可以花点钱嘛!

不多哔哔,正式开始。

2. 阿里云oss配置

2.1 登录阿里云官网找到阿里云对象存储oss

image-20230117164908583

2.2 开通购买对象存储oss

image-20230117165050042

2.3 点击产品价格,然后进入购买流程,购买资源包,后面扫码付款就行

image-20230117165423425

2.4 购买完成后,进入管理控制台,创建bucket

image-20230117165811883

2.5 配置bucket,名称填入你自己的(英文),区域随便选择,读写权限为公共读,确定就行

image-20230117170136239

2.6 右击头像,创建AccessKey,生成KeyId和Keyscret,然后复制下来后面用

image-20230117171057994

image-20230117171401626

image-20230117171432120

image-20230117171529315

3. picgo配置

3.1 安装(一直下一步就行)

PicGo是一款开源的图床管理工具,十分流行。

PicGo官方指南:PicGo | PicGo

3.2 配置

  1. 打开picgo,图床勾选阿里云oss
    image-20230117172303715

  2. 设置服务端口为36677,与typora的端口一致,方便typora上传图片
    image-20230117172441588image-20230117172545807

  3. 确认存储区域,就是上面的 Endpoint的地址 ,比如你的是,oss-cn-beijing.aliyuncs.com 那么这里就是 `oss-cn-beijing,去掉阿里云的后缀,填写之前复制的KeyId和Keyscret,空间名就是创建的bucket名称

    image-20230117173030505

  4. 确定,设为默认图床,上传图片检测
    image-20230117173833289

4. Typora配置

4.1 偏好设置

image-20230117174126967

4.2 上传图片验证

image-20230117174243325

然后在Typora插入图片和粘贴图片时就会自动上传了

说明:本文章以上部分篇幅主要借鉴DJ同学的教程

5. 图片显示问题

当我们在Typora写好了markdown后发布文章后会发现图片不显示,原因如下

  • 与http协议有关
  • 若博客域名带锁(https),图片域名前缀为http,则图片不显示
  • 若博客域名无锁(http),图片域名前缀为https,则图片不显示
  • 因此博客域名与图片域名的前缀要统一为http或https

6. 后续(看个人需求)

通过以上教程已经完全实现了图床上传功能,但还是可以添加新功能——自定义域名

自定义域名:可以独立访问图床上的图片,域名可以通过解析在服务器公网ip的顶级域名下添加解析记录

oss自带域名:不可以独立访问图床上的图片,域名为Bucket 域名,例如demo…oss-cn-hangzhou.aliyuncs.com/demo.png

(还可以配合通过OSS对象存储管理控制台与picgo的配合,自定义图床存储目录,自己折腾去吧)

6.1 自定义域名教程