Typora + 阿里云OSS + PicGo搭建图床_typora图床

Typora + 阿里云OSS + PicGo搭建图床

前记

1、为什么要搭建图床？

首先要明确：在本地的markdown文件.md中，图片是以 ‘外链’ 的形式存在的

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

会出现的问题有：

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

2、同时，如果我们用Typora写好了一篇博客，想把它上传到CSDN或者是语雀上。CSDN和语雀是无法自动转存文件里面的图片的（因为这个图片仅仅只是一个你本地电脑里面的文件路径，而不是一个真的图片）

此时，为了解决这一系列问题，那么，我们就需要图床来解决这些问题。

2、什么是图床技术

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

这时候你本地markdown编译器中的图片就是一个网络的链接(网址)，不再是本地路径。

你也可以在任何有网络的地方、用任何设备访问这张图片了。

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

经检验：当图片通过PicGo上传到图床之后，虽然编译器里的图片地址指向了图床中上传的图片，但是，本地电脑也会有一个文件夹会同步的存储一张相同的图片，所以，也许需要定期清理

3、本指南主要有以下四个步骤：

1. 开通阿里云对象存储

2. 安装PicGO-Core

username@hostname ~ % npm install picgo -g
1

3. 本地PicGo配置OSS信息

   Typora-设置-图像-上传服务设定

4. 配置上传信息

username@hostname ~ % picgo set uploader	#根据提示选择图床和填写信息即可
username@hostname ~ % picgo use uploader	#选择使用设置好的图床
1
2

选择你刚刚配置的图床，这样你上传的配置就基本完成了。最后，在typora中测试使用

下面详细说明配置步骤

一、开通阿里云对象存储OSS

1、进入阿里云官网

进入阿里云官网，注册阿里云账号，在首页点击产品-存储-对象存储 OSS

2、套餐选择 + 付费

阿里云OSS的各项收费是独立的！对于图床而言，有两种收费形式（其实有很多收费项，但图床不需要开通）：

• 以充值的方式使用储存容量以及流量（默认状态）

• 按年/月收费，购买一定存储包。流量额外收费

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

但作为图床使用，因为存储和流量需求很低，所以价钱也比较低，更何况每个月还有免费的存储和流量额度，一年也就几块钱。

3、创建bucket

选择左侧的Bucket列表，然后选择右侧的创建Bucket，就会来到创建Bucket页面：

完成选项后，点击确定，那么，你创建的Bucket就会出现在左侧的Bucket列表里面

4、获取你的地域节点

进入Bucket列表，点击刚刚新建的bucket，点击概览，就会进入下面：

地域结点只要复制 oss-cn-beijing 即可，后面的.aliyuncs.com不需要；Bucket域名记住全部，后面会用到地域结点和Bucket域名

5、获取你的 Key

鼠标放在头像上，在弹出的框里选择AccessKey管理

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

进入后，创建一个AccessKey

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

如果没有记住，也没关系，在AccessKey页面中，有“查看Secret”入口，只不过需要验证身份

那么，到现在，我们阿里云OSS的配置就算是完成了

二、安装PicGo-Core

1、nodejs和npm的简介和安装部署

1.1、nodejs

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。也可以片面地理解，把浏览器运行 JavaScript 代码的功能单独拎了出来，它就成了 Node.js

关于 JavaScript 的学习可以参考 MDN 的教程。
如需学习接口，可以查阅 node.js 中文接口文档 或 node.js 官方英文接口文档。

安装nodejs

①首先打开 Node.js官网 即可下载安装，会有LST（Long Term Support 长期支持）与 Current（最新） 两个版本提供下载。简而言之，LST 是经过考验的稳定版本，Current 是包含最新特性的版本，但可能有些 bug
②安装过程中可保持默认选项，安装完成后调起控制台执行node命令进行验证是否安装成功

username@hostname ~ % node -v
v18.16.0
username@hostname ~ % npm -v
9.5.1
1
2
3
4

正常打印版本，说明安装成功。

安装时会提示：MacOS系统安装到如下位置：
• Node.js v18.16.0 to /usr/local/bin/node
• npm v9.5.1 to /usr/local/bin/npm
Make sure that /usr/local/bin is in your $PATH.

1.2、包管理工具npm

npm 是 node.js 的一个包管理工具，用于管理我们所用的第三方库

npm 这种包管理工具不是独创，在 python 中有 pip，java 有 maven，几乎各个语言都有。那么为什么会需要这种包管理工具呢？
想象一下，如果有一个功能大家都会用到，那么相比你自己写，去别人那拷贝一份过来岂不是更香。拿 U 盘拷或微信发送效率太低了，于是就有了 github 这种共享代码的平台，大家把写好的轮子往上一放。你想用哪个直接去搜然后下载放进你的项目就行了。 搜索+下载+放进项目 这个步骤还是太麻烦了，于是乎就有了 npm 这种包管理工具，一个命令 npm install xxx 就能把你想用的代码放进你的项目文件夹。

以上只是包管理工具的一个功能，npm 还会把你当前项目下安装的第三方库记录到 package.json 这个文件中。当你把代码发给别人或部署到服务器上时，只是执行 npm install 就可以一次性把项目所依赖的第三方代码库下载完成。（为什么不连同用到的第三方代码库一起打包给别人？因为这些文件太多了，一个成熟的项目第三方库可能都有上 GB 的大小。）

还有的就是，package.json 还会保存所用的第三方库的版本号。这样可以保证你开发时的第三方库版本与服务器上的版本一致。可以避免因为第三方库的升级导致接口变动，或存在未知 bug 导致项目运行失败。

安装npm

安装 node.js 时已经包含 npm，可以在命令行中执行命令进行验证 npm 是否已经安装并获得当前 npm 版本。

username@hostname ~ % node -v
v18.16.0
username@hostname ~ % npm -v
9.5.1
1
2
3
4

正常打印版本，说明安装成功。

2、PicGo-Core安装

PicGo.app 和 PicGo-Core（命令行）的区别

• 目前 PicGo.app 仅是中文。
• PicGo.app 提供一个GUI，因此与CLI版本相比更容易设置。
• 使用 PicGo-Core（命令行）上传的成本较少，因为该过程将仅在上载过程中运行，并且在上载成功或失败后退出。当通过 PicGo.app 上传时，PicGo 将始终保持运行，无法自动退出。此外，PicGo.app 是一个应用程序，它消耗更多的计算资源。
• PicGo.app 和 PicGo-Core 使用不同的配置文件，但您可以将 PicGo.app 的配置文件中的 json 对象复制到 PicGo-Core 的配置文件中去。
• PicGo.app拥有其他功能，如上传历史记录、自动重命名等。

关于Typora的下载就不多说了，我们先直接来安装下载PicGo图床上传工具。

在Typora中，关于PicGo的下载和安装有多种形式，可打开其【偏好设置】，点击左侧边栏的【图像】选项，在右边内容面板可看到上传服务。与PicGo相关的有两个选项，一个是【PicGo-Core (command line)】，一个是【PicGo (app)】，还有【Custom Command】方式，其中PicGo-Core (command line)和Custom Command不需要安装软件，比较纯净，本文主要讲解第三种方式。【其中PicGo（app）下载地址 : Github地址】

无论Typora或PicGo都支持Mac或Windows操作系统，这里以Mac OS为例进行安装演示。

PicGo依赖于node.js，因此在安装之前需要先检查本机是否安装了node.js的环境。

如果未安装，可到Node.js官网进行下载安装。

安装完毕之后，可执行命令进行验证：

username@hostname ~ % node -v
v18.16.0
suhongming@hostname ~ % npm -v
9.5.1
1
2
3
4

正常打印版本，说明安装成功。

在MacOS下，通过npm或yarn命令来安装PicGo：

username@hostname ~ % npm install picgo -g
或
username@hostname ~ % yarn global add picgo
1
2
3

安装完毕，可执行which命令查看路径，并核实是否安装成功。

username@hostname ~ % which picgo
/usr/local/bin/picgo
username@hostname ~ % picgo -v
1.5.0
1
2
3
4

上面查看了可执行文件的路径以及版本，说明PicGo安装成功。

三、Typora配置PicGo

上面安装完成之后，可在Typora设置中进行PicGo的配置和验证。

Typora图床配置PicGo

在Typora中选择「自定义命令」，对应的命令为picgo upload，如果你的按照路径不是在bin目录下，则可把which命令显示的全路径替换掉picgo命令。后面的upload为picgo执行的操作选项，也可通过picgo -h查看更多命令。

此时，可点击“验证图片上传选项”，结果肯定是验证失败，因为我们还没有配置PicGo的OSS图床信息。

四、本地PicGo配置OSS信息

接下来配置阿里云OSS，这里采用命令行交互的形式来配置，在命令行中执行如下命令：

username@hostname ~ % picgo set uploader
? Choose a(n) uploader (Use arrow keys)
  smms
❯ tcyun
  github
  qiniu
  imgur
  aliyun
  upyun
(Move up and down to reveal more choices)
1
2
3
4
5
6
7
8
9
10

移动上下键，选择aliyun，然后回车。

依次会提示：

第一步，输入accessKeyId，这个便是阿里云RAM账号的AccessKey ID；

第二步，输入accessKeySecret，对应阿里云RAM账号的AccessKey Secret；

第三步，输入bucket，这个就是你创建的Bucket的名字；

第四步，“设定存储区域，此处需注意，在创建Bucket之后，Bucket有一个Endpoint（地域节点），例如本指南中的：oss-cn.beijing。

第五步，“设定存储路径 例如：test/”，这里就是Bucket下面的目录，比如输入：“Typora/”，此处你创建的什么文件目录，就写什么。

第六步，“设定自定义域名，此处就是Bucket外网域名前面加上https://，即可。

其中有一步是设定网址后缀，可不进行设置，直接回车即可。

经过上述步骤，基本上完成了OSS的配置。此时，还有最重要的一步，选中使用aliyun这个uploader，上面设置时已经看到默认采用的是tcyun。

执行如下命令：

username@hostname ~ % picgo use uploader
? Use an uploader (Use arrow keys)
❯ aliyun
  tcyun
  smms
  github
  qiniu
  imgur
  upyun
1
2
3
4
5
6
7
8
9

选中aliyun，此时PicGo将采用aliyun的OSS作为图床。

至此，所有的配置完成，可到Typora页面进行功能测试及文章中的图片上传了。

小结

对于Typora的使用来说，我只能说非常好用，我用它写的内容直接在代码模式下复制粘贴到博客中，不用做任何修改直接发表，就生成了一篇排版非常漂亮的博客了。个人建议付费购买，不贵。而图床，建议自己购买OSS，然后基于PicGo工具，确保图片的安全。免费的导致信息丢失，非常麻烦。关于更多系统和图床搭配PicGo的使用请参见配置手册 | PicGo。