在cloudflare中搭建博客

快速开始

前置要求

  • Cloudflare 账号
  • Cloudflare Workers 订阅(免费版即可)

安装步骤

  1. 登录 Cloudflare Dashboard,进入 Workers & Pages
  2. 创建 Worker
  • 点击 “Create Worker”
  • 在编辑器中删除默认代码
  • worker.js 的全部内容复制粘贴到编辑器中
  • 点击 “Save and Deploy”
  1. 创建 KV 命名空间
  • 在左侧导航栏选择 “KV”
  • 点击 “Create namespace”
  • 输入命名空间名称 “CFBLOG”,点击创建
  • 在进入创建的KV,设置KV Pairs,添加
    Key:SYSTEM_INDEX_NU,Value:0
  1. 绑定 KV 到 Worker
  • 返回刚创建的 Worker
  • 点击 “Settings” 选项卡
  • 在 “Variables” 部分,点击 “KV Namespace Bindings”
  • 点击 “Add binding”
  • 变量名输入 “CFBLOG”,选择刚创建的 KV 命名空间
  • 点击 “Save”
  1. 配置环境变量
  • 同样在 “Variables” 部分,点击 “Environment Variables”
  • 添加以下环境变量:
    • BLOG_USER: 后台登录用户名
    • BLOG_PASSWORD: 后台登录密码
    • BLOG_THIRD_TOKEN: 第三方访问令牌(可选)
    • BLOG_CACHE_ZONE_ID: Cloudflare区域ID(可选,用于清理缓存)
    • BLOG_CACHE_TOKEN: Cloudflare API令牌(可选,用于清理缓存)
  • 点击 “Save”

  • 如果不配置BLOG_CACHE_ZONE_IDBLOG_CACHE_TOKEN这两个参数,博客仍然能正常工作,但当内容更新时,可能需要等待 Cloudflare 缓存自然过期(或手动清理缓存)才能看到最新内容。配置后,每次更新内容都会自动清理缓存。
  1. 配置自定义域名(可选)
  • 在 Cloudflare Dashboard 中,确保已添加您的域名
  • 在 Worker 的 “Triggers” 选项卡中,点击 “Add Custom Domain”
  • 选择您的域名并设置,如 blog.example.com
  • 点击 “Add Custom Domain”
  1. 访问博客
  • 如果设置了自定义域名:访问 https://blog.example.com/admin/login
  • 如果使用 Workers 默认域名:访问 https://your-worker-name.your-subdomain.workers.dev/admin/login
  • 使用配置的用户名和密码登录后台

环境变量说明

变量名说明是否必须
BLOG_USER后台登录用户名
BLOG_PASSWORD后台登录密码
BLOG_THIRD_TOKEN第三方API访问令牌
BLOG_CACHE_ZONE_IDCloudflare区域ID,用于清理缓存
BLOG_CACHE_TOKENCloudflare API令牌,用于清理缓存

配置与自定义

博客的主要配置位于 worker.js 文件中的 OPT 对象:

  • siteDomain: 博客域名
  • siteName: 博客名称
  • themeURL: 主题地址
  • pageSize: 每页文章数量
  • readMoreLength: 摘要长度

更多配置选项请查看代码中的注释说明。

主题

CFBLOG-Plus 支持多主题切换,默认内置了 JustNews 主题,您可以基于现有主题创建自己的主题:

  • 创建新的主题目录结构
  • 修改 OPT.themeURL 指向您的主题

使用技巧

  1. 文章置顶:在编辑文章时可以选择是否置顶
  2. 文章隐藏:可以临时隐藏文章不在首页显示
  3. 导入导出:通过后台可以导出所有文章数据,便于备份和迁移
  4. 代码高亮:自动为代码块添加语言标识和复制按钮
  5. 键盘快捷键:编辑器内支持多种快捷键操作

高级功能

清理缓存

当配置了 BLOG_CACHE_ZONE_IDBLOG_CACHE_TOKEN 后,系统会在文章发布或更新后自动清理 Cloudflare 缓存。

多语言支持

主题文件支持多种语言,可以基于主题进行本地化定制。

自定义代码

您可以通过 codeBeforHeadcodeBeforBody 配置选项添加自定义 CSS 和 JavaScript 代码。

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇