引言
本文属于专栏从0到1搭建一个个人网站，未阅读前序文章的读者可以从专栏跳转。
大家好啊，我是长风。
在上一篇文章利用Github Page + Hexo 搭建专属的个人网站（二）中，我们为博客网站设置了自定义域名，并利用cloudflare进行了CDN加速。
但是一篇文章中，除了有文字，还会有图片，图文并茂的文章会更有吸引力，读者的体验也更好。本文我们就利用图床来给文章增加图片显示的能力。
提示：本文中相关操作需要先科学上网
什么是图床
图床 （Image Hosting Service）指的是专门用来存储图片并生成可外链访问地址的服务。
你可以把它理解成：
📦 一个专门"放图片的服务器"，
🔗 上传后会给你一个 URL，
🌍 这个 URL 可以在网页、博客、论坛、Markdown 文档中直接引用。
为什么需要图床
如果我们直接插入本地图片：
scss
别人是看不到的，因为图片指向的是我们本地的链接，别人访问我们的网站时，是看不到的。
我们必须：
- 把图片上传到图床
- 获取图片 URL
- 用 URL 引用
less
这样别人才能访问。
怎么使用图床
很多人会把图片直接放在 GitHub 仓库里，但这样有两个问题：
- 仓库体积会越来越大
- 图片访问速度慢
因此通常会使用图床来专门存储图片，我们这里使用Cloudflare R2对象存储桶。
相比传统图床，Cloudflare R2 有几个优势：
- 全球 CDN 加速
- S3 兼容
- 每月 10GB 免费存储
- 国内访问速度较快
创建Cloudflare R2存储桶
在Cloudflare 控制台选择R2对象存储。
点击创建存储桶
输入一个任意的存储桶名称后，其他选项保持默认，点击创建即可。
如果之前没有在cloudflare绑定支付服务，这里会提示绑定信用卡，没有信用卡的话可以去Paypal官网注册一个账户，Paypal可以绑定国内银联的储蓄卡，在cloudflare中直接使用Paypal账户即可。
之所以要绑定信用卡，是为了支付我们在超出免费流量情况下的费用。如上图所示，cloudflare提供了每月10GB的存储空间，还有每月100万次的A类操作和每月1000万次``B类操作。所谓的A类操作和B类操作简单理解就是上传图片和访问图片。
对于个人网站来说，只要不遭受攻击，是妥妥够用了。
配置自定义域名
进入存储桶，点击自定义域。我们在上一篇文章利用Github Page + Hexo 搭建专属的个人网站（二）中，已经用cloudflare配置了自定义域，实现了CDN加速，在R2的自定义域名配置中，我们使用之前配置域的任一子域名即可。笔者这里使用的是pic.changfeng.online。
至此，我们在cloudflare就配置完成了。
安装picgo并进行相关配置
picgo是用来上传图片的工具。
首先我们使用npm安装picgo
bash
# 安装picgo
npm add -g picgo
能够成功查看版本号时，说明已经安装成功。
bash
# 登录picgo
picgo login运行该命令后，会跳转到浏览器，让我们选择用Google或Github账号进行登录。登录的好处是可以同步我们在picgo的相关配置，这样更换设备时，就不用每次都重新配置，当然，该步骤是可选的。
bash
# 查看当前的uploader
picgo uploader
选择List all configurations，会列出如下图所示的，默认支持的图床，依次为：
- 阿里云
- 腾讯云
SM.MSgihub- 七牛云
imgur- 又拍云
这里面并没有Cloudflare R2对象存储桶，所以我们需要安装picgo相关的插件来支持。
由于Cloudflare R2是兼容S3 API的，所以我们安装S3的插件即可。
bash
# 安装
picgo install picgo-plugin-s3
# 配置插件并使用
picgo set plugin
picgo use plugins
配置R2的API Tokens
生成API Tokens
访问cloudfalre R2概述页在API Tokens处，点击Manage。
接着新建一个Account API令牌。
选择对象读和写，然后点击创建。
接着会弹出一个如下图所示的页面，包含3个重要的token。
切记不要关闭这个页面！！！，因为出于安全考虑，这里的
token以后再也没有办法看到了。所以要复制这3个token
在picgo中进行配置
由于我们已经安装了picgo-plugin-s3的插件，所以运行picgo set uploader命令即可看到如下图所示。
bash
# 配置uploader
picgo set uploader
选择aws-s3，然后按下回车进行确认。
然后按照引导依次进行填写。
其中：
- access key id
- secret access key
- endpoint
分别对应我们在cloudflare创建API Tokens复制的3个token。
其他的配置名：
- config name: 任意，我这里用的是
blog - bucketName:
R2存储桶的名称 - uploadPath: 建议和我图片中保持一致，可以保证同名图片上传成功
- regoin: 和图片中保持一致，设置为
auto即可。 - 拒绝无效
TLS证书连接：选择Yes，确保使用安全的https访问 - 上传资源的访问策略设置为:
private - 输出URL模板：这里一定要注意，要设置为
https://你的自定义域名/{path}，这样才能读取到正确的图片url。 - 其他选项：直接回车即可。
接着我们可以看到，配置已经生效。
在编辑器中使用picgo
Typora
Typora是一款简洁美观的Markdown编辑器，我们通常会用它来写博客文章。
没有安装的可以去下面的仓库中找到自己系统对应的安装包进行安装，长风这里用mac系统进行演示。
首先要找到系统node和picgo的安装位置：
bash
which node
which picgo
复制这两个路径，然后打开Typora-设置-图像,进行如下图所示的配置：
其中，命令对应的内容是node路径 picgo路径 upload
点击验证图片上传选项进行验证，如下图所示：
配置完成后，你只需要：
- 截图复制
- Ctrl + V 粘贴
Typora 会：
- 自动调用 PicGo
- 上传图片
- 替换 Markdown 中的图片地址
VSCode
首先安装PicGo Paste插件。
接着打开插件设置
将Picgo的安装路径填入到插件配置中。
然后，在任意的Markdown文件中，剪贴板复制图片后，直接粘贴，插件会自动上传该图片，并将粘贴内容改为上传后得到的url。
总结
本文详细记录了如何使用Cloudflare R2搭建在国内也可以高速访问的图床，并在主流编辑器Typora和VSCode中进行了相关配置，实现了粘贴图片后自动上传并更新url，极大地方便了日常的文章书写。
好了，这篇文章就到这里啦，如果对您有所帮助，欢迎点赞,收藏,分享👍👍👍。您的认可是我更新的最大动力。由于笔者水平有限，难免有疏漏不足之处，欢迎各位大佬评论区指正。
本文属于专栏从0到1搭建一个个人网站，后续会持续更新相关内容，欢迎订阅👏🏻👏🏻👏🏻
往期推荐✨✨✨
我是长风，我们下期见！