Hexo博客04-阿里云图床

发表于 更新于 分类于 阅读次数： 本文字数： 2.1k 阅读时长 ≈ 7 分钟

本文介绍如何使用阿里云作为图床，保存博文中的图片，需要一些花费（一年十几块），纯免费图床搭建可以考虑GitHub。

环境：

  • Windows 10 Pro 21H2

  • Node.js v16.17.0

  • Mark Text 0.17.1

  • PicGo-Core

  • 阿里云、Github账号

解决方案：

  • Mark Text：类似于Typora的Markdown编辑器，开源免费，用于写笔记。（目前停止更新，建议使用Typora，更加方便好用，但是Typora并不免费）

  • PicGo-Core： 图片上传工具，用于快速上传图片并获取图片 URL 链接。

  • 阿里云：提供云存储，用于存储上传的图片。

  • Github远程仓库：不限于Github，Gitee、GitLab都可以，用来存储笔记。

解决方案的思路是：在本地创建Git仓库存储笔记，用Mark Text、PicGo-Core、阿里云等配置好图床，用来存储笔记里的图片。在写好笔记后，上传到Github远程仓库中。

这个解决方案中的每个部件都可以有替代方案，整体思路是一致的。比如阿里云可以用Github替代，但由于Github网络不稳定，且有Gitee做图床被禁的前车之鉴，我还是选择了阿里云这种比较稳定的云存储。

整体流程：下载Mark Text与PicGo-Core–>用Mark Text选择PicGo-Core作为图片上传工具–>设置阿里云配置–>将阿里云配置写到PicGo-Core中

1. 安装Node.js

[Node.js各版本国内镜像](CNPM Binaries Mirror (npmmirror.com))

PicGo有两种安装方法，一是直接安装客户端，二是通过npm下载PicGo-Core。由于Mark Text不能识别到PicGo的客户端，因此要先下载Node.js。可以通过上面的国内镜像链接进行下载，下载速度较快。

安装时只需要修改一下安装路径，我将Node.js安装在C盘外的其他盘，便于查找，其余保持默认安装即可。

安装完成后按Win+R键，输入cmd，打卡命令行窗口。输入node -v 、npm -v 两条指令，检查是否安装成功。

注：可能有些Node.js安装教程会提到修改npm默认的下载路径，因为默认下载路径在C盘，修改下载路径可以避免C盘空间资源被占用。但是这里不建议这样做，因为Mark Text似乎识别不了下载到C盘以外的PicGo-Core？也有可能是我在下载时哪里操作错误。但是为了保险，还是建议先按照Node.js的默认设置将PicGo-Core下载完毕，之后再修改npm下载路径。

2. 安装Mark Text

Mark Text官方仓库：Release 0.17.1 · marktext/marktext (github.com))

Mark Text简体中文语言版：Release first · chinayangxiaowei/marktext-chinese-language-pack (github.com)

Mark Text是开源的Markdown文本编辑器，可以作为Typora的替代品，Github中的官方版本不支持中文，但是也有国人做的中文版仓库，可以选择自己习惯的版本进行下载安装。

官方版本：

中文版本：

中文版本解压即可使用。

3. 安装PicGo-Core

我们需要通过npm下载PicGo-Core。打开cmd命令行窗口，输入npm install picgo -g

PicGo-Core默认的安装路径为C:\Users\{Username}\AppData\Roaming\npm\node_modules\picgo，picgo.cmd的路径为C:\Users\{Username}\AppData\Roaming\npm\picgo.cmd。之后进行PicGo-Core相关配置的时候，要在包含picgo.cmd的父目录下进行。

如果想在文件夹中查看相关文件的话，需要把显示隐藏文件的选项打开，因为AppData是隐藏文件夹。

同时，安装成功的话，在C:\Users\{Username}目录下会存在一个.picgo文件夹，里面有config.json文件，之后进行PicGo-Core配置时会用到。

可选：你也可以在C:\Users\{Username}目录下输入命令where picgo来查看相关路径，如果安装正确，是可以查看到picgo.cmd文件的，否则会提示错误。

安装成功：

4. 阿里云配置

首先我们需要一个阿里云账号。    

4.1 配置Bucket

Bucket原意为桶，是用户用来管理所存储对象的存储空间。需要注意的是，用户可拥有多个Bucket，但其名称在OSS中必须是全局唯一的，一旦创建便无法修改，其内部对象数量不限。

简单来说，我们需要在OSS对象中创建一个Bucket来存储图片。

  1. 登录阿里云账号，进入控制台，在侧边导航栏找到对象存储OSS，点击。

  2. 若没有开通OSS服务，请先开通。开通完毕后可以根据自身情况购买折扣套餐，因为我不需要太高的配置，所以选择了默认套餐，时间为一年。也可以购买40G半年的套餐，价格也很低。

    第一次进入购买：

    之后进入购买：

    购买页面：

  3. 创建并配置Bucket，新建一个txt文件，用来保存Bucket配置，方便之后写到PicGo-Core中。Bucket是什么涉及到云计算的知识，这里简单把他当成一个存储空间就好。

    创建完成后会自动跳转到以下页面，此时需要记录Bucket域名。

  4. 在Bucket中创建文件夹，用来存放图片。

4.2 配置AccessKey

AccessKey为访问密钥，在上传图片到Bucket时需要使用到。

  1. 创建AccessKey

    鼠标移到右上角头像，进入AccessKey管理。

  2. 选择继续使用AccessKey。

  3. 之后创建AccessKey，并将AccessKey ID与AccessKey Secret复制保存到文档中。注意，之后AccessKey Secret将无法再查看。

最后文档中保存的配置应该如下：

5. PicGo-Core配置

进入C:\Users\{Username}\.picgo文件夹，打开config.json文件，将之前txt文档记录的阿里云配置填写到对应位置：

只要注意Endpoint对应area，Bucket域名对应customUrl，并且在域名前加上http://或https://即可。

完整的config.json文件如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
  "picBed": {
    "uploader": "aliyun",
    "current": "aliyun",
    "aliyun": {
      "accessKeyId": "xxxxxxxxxxxxxxxxxx",
      "accessKeySecret": "xxxxxxxxxxxxxxxxxxxxxxxxx",
      "bucket": "your-bucket-name-000",
      "area": "oss-cn-beijing",
      "path": "pic/",
      "customUrl": "http://your-bucket-name-000.oss-cn-beijing.aliyuncs.com",
      "options": ""
    },
    "transformer": "path"
  },
  "picgoPlugins": {}
}

可选：也可以使用cmd命令行窗口来设置PicGo-Core，但是不建议，因为不能直接复制粘贴。

使用picgo use uploader选择使用的图床， 使用picgo set uploader对图床进行配置

最后测试配置是否成功：打开cmd命令行窗口，输入命令picgo upload 图片路径。

可以看到图片上传成功了。

6. 上传截图

Mark Text相对于Typora有个缺点，不能上传存放到临时文件夹的截图，只能上传保存好的图片，这就很难受。

解决方案是使用ShareX截图软件，这个软件可以设置成将截图自动保存，这样就可以直接把截图Ctrl+V粘贴到Markdown文件中并上传到图床中了。

需要进行的设置如下：

由于我之前使用的截图软件是Snipaste，截图快捷键为F1，所以我把ShareX的截图快捷键设为F2。

经过以上步骤，云笔记解决方案已经完成了个大概。剩下的就是在本地创建Git仓库以及连接远程仓库了。

7. 连接远程仓库

由于笔者写这篇笔记的时候Github连接不上，在此用Gitee演示，效果是差不多的。

在连接远程仓库之前，建议先配置Git与远程仓库的SSH Key，因为我需要在Github与Gitee上各上传一份，因此配置了多个SSH Key。关于配置多个SSH Key的内容，与本文关系不大，因此可以参考博客：[Git - 配置并使用多个SSH KEY](Git - 配置并使用多个SSH KEY_mythmayor的博客-CSDN博客_git配置多个ssh key)

  1. 创建远程仓库

  2. clone到本地``git clone git@gitee.com:username/repositoryName.git`

  3. 写笔记

  4. 提交笔记三板斧

    1. git add .

    2. git commit -m "message"

    3. git push origin 分支

  1. 查看提交结果。可以在远程仓库里查看到提交的笔记。建议安装一个Gitee Tree插件，能创建文件树，可以帮助快速定位仓库文件。

结语：本文使用Mark Text、PicGo-Core、阿里云、Git远程仓库，实现了云笔记，主要解决的痛点就是图床的问题。