Hugo vscode 自动上传图片到cloudflare

在masrkdown中引用图片，有这么几种

![图片描述](图片url,可以为本地或者远程图片)

# 1. 相对路径
![图片描述](image.png)
![图片描述](./image.png)

# 2. 项目目录绝对路径
![图片描述](/static/logo/image.png) 

# 3. 外部引用
![图片描述](http://example.com/logo/image.png)

经过hugo 渲染后，图片路径错误

相对路径

在markdown中为 image.png 或./images.png , 发布站点后图片地址为 https:/xxx.xxx.xx/image.png , 图片会在域名下一级路径，导致图片无法查看

.
├── image.png
└── my-post
    └── index.html

绝对路径
关键字 /static 会在编译后省略，也就是static里面的所有文件包括子目录会复制到 public下，也是在一级路径下，去掉了static也会导致图片无法查看

## 编译前
.
└── static
    └── logo
        └── avatar.png

## 编译后
public  # 网站目录
└── logo # 一级目录
    └── avatar.png

如果只是本地查看还好，如果发布，需要手动或者单独写脚本处理。所以这里考虑使用对象存储来对图片进行存储，这样即使编译后，也可以保证图片正常。

对象存储有很多，国内阿里云，腾讯云，七牛云等，因为我的站点在cloudflare, 本着一站式服务，所以我使用了 cloudflare 的 R2 来存储图片等， cloudflare免费版有10G存储空间， 10G/月流量，个人站点，完全够用了，还可以方便的绑定域名，使用cdn

我使用的工具：

编辑器： vscode
扩展 markdown image
cloudflare账号

步骤如下图：

cloudflare部分

注册cloudflare 步骤省略
创建存储桶
设置自定义域名
如果域名已经托管到 cloudflare,直接输入一个二级域名即可， cloudflare会自动解析绑定
获取s3 apikey ，存储桶名， endpoint接入地址

到R2页面找到对应的存储桶信息

我们这里有几个基本信息
S3的endpoint： https://xxxxxxxxxxxxxxxxxx.r2.cloudflarestorage.com/uploads
存储桶名称：uploads
自定义域名（非必须）： uploads.xxx.com
S3 访问ID： xxxx
S3 密钥：  xxxxxx