VSCode+PicGo+阿里云配置个人博客图床最全解析

非常推荐使用vscode作为个人博客的编辑器,能够很好地支持markdown,简单配置后插入图片也很方便。图床方面,我之前试过GitHub图床和七牛云图床,都存在一些问题,GitHub图床在没有科学上网时,上传和加载图片非常慢,往往加载不出来,很多访问我的网站的人,看到的都是挂掉的图片;七牛云图床测试域名只能免费实用一个月,之后需要使用自己购买的域名。阿里云不存在上面的问题,而且新用户有三个月的免费体验阶段,之后也可以买半年4.98元的资源包,十分便宜,所以转向了阿里云。
这篇文章介绍一下如何配置vscode的图床,第一步是阿里云OSS(OSS指对象存储服务)的配置;第二步安装vscode的picgo插件,该插件可以让我们使用快捷键将剪切板的图片上传到云图床中;第三步是配置picgo的参数。
1. 阿里云OSS服务配置

  1. 首先注册阿里云账号,完成实名认证。
  2. 在阿里云的产品中选择对象存储OSS。
    VSCode+PicGo+阿里云配置个人博客图床最全解析
    文章图片
  3. 选择管理控制台,点击最左侧的Bucket列表,创建Bucket。
    VSCode+PicGo+阿里云配置个人博客图床最全解析
    文章图片
  4. 输入Bucket名称,选择区域(选择一个近的区域就可以),将读写权限修改为公共读,其他保持不变,确定之后就可以看到创建的容器了,然后点击右上角的导出csv,导出容器的相关信息,之后配置picgo参数时使用。
    VSCode+PicGo+阿里云配置个人博客图床最全解析
    文章图片
  5. 之后点击创建好的Bucket,进入概述页面。
    VSCode+PicGo+阿里云配置个人博客图床最全解析
    文章图片
  6. 将右边的访问域名中的“外网访问”的“Bucket域名”先记下来,之后配置picgo参数时使用。
    VSCode+PicGo+阿里云配置个人博客图床最全解析
    文章图片
  7. 然后将鼠标移动到右上角的头向上,选择AccessKey管理,创建一个AccessKey,并且将AccessKey和AccessKey Secret记下来,之后配置picgo参数时使用。
    VSCode+PicGo+阿里云配置个人博客图床最全解析
    文章图片
阿里云部分的配置就结束了,然后在vscode中安装picgo插件,继续配置picgo的参数。
2. PicGo配置
  1. 下载好之后在插件页面的Extension Settings进入PicGo的配置。
    VSCode+PicGo+阿里云配置个人博客图床最全解析
    文章图片
  2. 将图床类型设置为aliyun。
    VSCode+PicGo+阿里云配置个人博客图床最全解析
    文章图片
  3. 其余的我们主要关注Picgo>Pic Bed>后显示为aliyun的,前两个Access Key ID和Access Key Secret填上面第7步中记下来的密钥;第三个Area填第4步中导出的Bucket信息的csv文件中对应的区域,比如我的在南京,就填oss-cn-nanjing,注意不要直接写中文,比如华东5,好像是识别不了的;第四个Bucket填写Bucket的名字,第五个填写上面第6步中记录的Bucket域名,注意要加上https://为前缀。第6个是图床中存储文件的文件夹名,不写也行。
    VSCode+PicGo+阿里云配置个人博客图床最全解析
    文章图片
PicGo的配置就结束了,然后我们可以使用QQ的Ctrl+Alt+a截图,然后在vscode中通过Ctrl+Alt+u的快捷键将剪切板中的图快速插入。
如果使用其他的图床,比如GitHub、七牛云等,也是类似的操作,首先注册用户,然后在PicGo填写对应的密钥、url等信息,也可以参考这篇文章来完成。
【VSCode+PicGo+阿里云配置个人博客图床最全解析】更多内容欢迎关注我的公众号:炼丹攻略。

    推荐阅读