从零开始的个人博客搭建03——PicGo+腾讯云COS搭建图床配合Typora提升写作体验

一、背景

此前笔者在写作时，都是直接在项目里直接用VSCode写作，当涉及到图片的插入时，因为开发环境和部署环境路径的不同，默认不支持本地预览，如果要在本地和线上环境都能正常显示图片非常费劲(需要安装插件+每个文章建一个同名文件夹，还有若干的限制)，非常痛苦。

因此一个能在线下和线上都正常预览图片的简单高效写作方法，成为刚需。

通过多方查找资料，找到了**Typora和其内置PicGo**

二、Typora和PicGO简介

1.什么是Typora？

Typora是一款知名度很高的Markdown编辑器，以前用过它的基础功能，当时还是免费的内测版，现在已经发布了正式版，89块钱即可购买永久使用。我们需要使用它的图片上传功能。

2.什么是PicGo?

PicGo是一款图片上传插件，支持对多种图床的上传操作，本文使用的1.7.6版本Typora中就有PicGO插件的配置选项。

关于图床的解释可以参考这篇知乎的回答，简单地讲，图床就是专门存放图片的服务器，最好拥有庞大的存储空间(这一点对象存储完美满足)，图床中可以给主服务器减小压力。

https://www.zhihu.com/question/41646507/answer/128090221

PicGo支持的图床：

腾讯云COS
阿里云OSS
SM.MS
GitHub
七牛云
Imgur
又拍云

三、具体步骤

话不多说直接开始实操

1.创建腾讯云COS存储桶

1）进入腾讯云COS界面点击创建存储桶

2）设置创建参数，选择需要部署的服务器区域，设置名称，选择公有读私有写，最后点击下一步进行创建；

创建后进入概览，可以查看存储桶的id、区域、appID参数(名称中后面一串数字就是)

3）进入访问管理界面，创建一个新的密钥并记录下SecretID和SecretKey（这一步可根据需要自行创建子用户设置权限后再创建SecretID和SecretKey)

2.安装PicGO插件，配置Typora设置图片自动上传

2.1 打开Typora => 文件 => 偏好设置，打开偏好设置界面

2.2 在偏好设置中选中图像菜单，设置插入图片时动作为上传图片

2.3 继续设置上传服务，下载PicGo-Core插件(如果不喜欢命令行方式也可以下载图形化界面的PicGo)

2.4 打开PicGo-Core配置文件，复制如下文件到配置文件，将之前获取到的参数填入后保存退出即可

{
  "picBed": {
    "uploader": "tcyun", 
    "tcyun": {
      "secretId": "你的腾讯云SecretId",
      "secretKey": "你的腾讯云SecretKey",
      "bucket": "腾讯云COS存储桶名称",  
      "appId": "腾讯云COS存储桶数字Id",
      "area": "腾讯云COS存储桶区域",
      "path": "上传路径",
      "customUrl": "",
      "version": "v5"
    }
  },
  "picgoPlugins": {}
}