使用Cloudflare R2构建图床

使用Cloudflare R2构建图床

为什么这是最优解？

  • 免费额度大：10GB 存储，每月 1000 万次读取，个人博客根本用不完
  • 速度极快：直接走 Cloudflare 的全球网络
  • 域名统一：你可以挂载一个二级域名，如 img.你的域名.com
  • 高可用性：依托 Cloudflare 的基础设施，稳定性有保障

操作步骤

1. 开通 R2

  1. 登录 Cloudflare 面板
  2. 进入 R2 -> Create bucket（起个名，如 imgs-asset）

2. 绑定域名

  1. 进入 Bucket -> Settings -> Public Access -> Connect Custom Domain
  2. 输入 img.yourdomain.com（前提是你的域名已经在 CF 解析）
  3. 等待 SSL 证书自动配置完成

3. 获取密钥

  1. 在 R2 概览页 -> Manage R2 API Tokens -> Create API Token
  2. 权限选 Admin Read & Write
  3. 记录下以下信息：
    • Access Key ID
    • Secret Access Key
    • Endpoint

4. 配置上传工具 (PicGo)

你需要一个能”截图后自动上传并生成 Markdown 链接”的工具。

下载安装 PicList

推荐使用 PicList（PicGo 的增强版，对 R2 支持更好）。

配置 S3 插件

在设置中选择 Amazon S3 插件（R2 兼容 S3 协议），填写以下配置：

  • 图床配置名: R2
  • AccessKeyId: 填刚才申请的 Access Key ID
  • SecretAccessKey: 填刚才申请的 Secret Access Key
  • Bucket: imgs-asset
  • 设定自定义节点: 填刚才获取的S3 API的链接
  • 设定自定义域名: https://img.yourdomain.com/imgs-asset

写作流程

配置完成后，你的图片上传流程变得非常简单：

  1. 截图 -> Ctrl+C（复制到剪贴板）
  2. 在 Markdown 编辑器里 Ctrl+V（粘贴）
  3. PicGo 自动上传图片到 R2，并自动插入 Markdown 链接：![](https://img.yourdomain.com/xxx.jpg)

总结

使用 Cloudflare R2 + PicList 搭建图床的优势：

  1. 完全免费：对于个人博客来说，免费额度绰绰有余
  2. 全球加速：Cloudflare CDN 确保图片加载速度快
  3. 简单易用：截图粘贴即可，无需手动上传
  4. 品牌统一：使用自己的域名，更专业
  5. 数据安全：Cloudflare 提供可靠的数据存储

这个方案是目前个人博客图床的最优解！

如何使用hexo和Cloudflare构建项目

如何使用Hexo和Cloudflare构建项目

第一步：本地搭建 Hexo

初始化 Hexo

在电脑上找个空文件夹（比如 D:\my-blog），右键打开终端（Terminal/PowerShell）：

1
2
3
4
5
6
7
# 安装 Hexo 脚手架
npm install -g hexo-cli

# 初始化博客文件夹
hexo init blog
cd blog
npm install

验证本地效果

在终端运行：

1
2
3
hexo clean
hexo g
hexo s

打开浏览器访问 http://localhost:4000。如果看到页面，说明本地搭建成功。

第二步：配置 Git 并上传到 GitHub

Cloudflare Pages 需要从 GitHub 拉取代码。

1. 在 GitHub 创建仓库

  1. 登录 GitHub
  2. 创建一个新仓库，命名为 my-blog（或者你喜欢的名字）
  3. 注意：设为 Public（公开）或 Private（私有）都可以

2. 推送代码

在 VS Code 的终端（确保在 blog 根目录下）执行：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 初始化 git
git init

# 生成 .gitignore 文件 (防止把生成的静态文件和依赖包传上去，这一步很重要)
# 如果你 hexo init 时自动生成了 .gitignore，检查里面是否有 node_modules 和 public
echo "node_modules/" >> .gitignore
echo "public/" >> .gitignore
echo "db.json" >> .gitignore

# 提交代码
git add .
git commit -m "Init"
git branch -M main
# 将下面的地址换成你刚才创建的 GitHub 仓库地址
git remote add origin https://github.com/你的用户名/my-blog.git
git push -u origin main

第三步：在 Cloudflare Pages 部署

这是最关键的一步，把你的代码变成全球可访问的网站。

  1. 登录 Cloudflare Dashboard
  2. 左侧菜单点击 Workers & Pages -> Overview -> Create application
  3. 点击 Pages 标签 -> Connect to Git
  4. 选择你刚才创建的 my-blog 仓库，点击 Begin setup

配置构建环境 (Build Settings) - 重点！

这里填错会导致构建失败。请严格按照以下填写：

  • Project name: 随便填（例如 my-blog）
  • Production branch: main
  • Framework preset (框架预设): 选 无（新版本没有hexo可以选择）
  • Build command: npx hexo generate (默认即可)
  • Build output directory: public (默认即可)

关键设置（必须做）

点击 Environment variables (环境变量) -> Add variable：

  • Variable name: NODE_VERSION
  • Value: 24.0.0 (推荐锁死版本，防止 CF 默认环境过老导致报错)

点击 Save and Deploy。

Cloudflare 会开始拉取代码 -> 安装依赖 -> 运行 hexo g。等待约 1-2 分钟，当看到 Success 时，点击给出的 xxx.pages.dev 链接，你的博客就上线了！

第四步：绑定自定义域名

  1. 在 Cloudflare Pages 的项目页面，点击 Custom domains
  2. 点击 Set up a custom domain
  3. 输入你的域名（例如 blog.yoursite.com），前提是这个域名已经在 Cloudflare 解析了
  4. 点击 Activate。Cloudflare 会自动添加 CNAME 记录并配置 SSL 证书

总结

通过以上四个步骤，你就成功使用 Hexo + Cloudflare Pages 搭建了一个免费的静态博客网站。整个过程不仅免费，而且 Cloudflare 提供了全球 CDN 加速，让你的博客访问速度非常快！