V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
sunnywangzi
V2EX  ›  程序员

Cloudflare Workers + KV 搭建一个带后台管理的 blog

  •  
  •   sunnywangzi · 2023-08-29 14:42:34 +08:00 · 1474 次点击
    这是一个创建于 456 天前的主题,其中的信息可能已经有所发展或是发生改变。

    0.展示

    29fb0d433bde0e1cd7d28.png

    本文部分内容由 chatgpt 生成,略有修改

    相关链接:

    Demo : https://cfblog.661212.xyz/

    Githubhttps://github.com/wang-useful/cfblog-plus

    (备注:本文介绍的是 cfblog-plus 原仓库为:https://github.com/Arronlong/cfblog-plus ,是gdtool/cloudflare-workers-blog 的一个修改版)

    1.介绍

    cf blog是一个运行在 cloudflare workers 上的博客程序,使用 cloudflare KV 作为数据库,无其他依赖. 兼容静态博客的速度,以及动态博客的灵活性,您可以通过访问项目仓库了解更多详情。

    2.项目特点:

    • 使用 workers 提供的 KV 作为数据库,可达到 wordpress 的灵活性
    • 使用 cloudflare 缓存 html 来降低 KV 的读写,使其可达到静态博客的速度
    • 后台使用 markdown 语法,方便快捷,一键发布(页面重构+缓存清理)
    • cfblog-plus新增了 文章置顶、后台首页选择、文章隐藏、静态搜索 等功能

    3.部署

    这是一个纯小白教程[doge]

    • 第一步:注册 Cloudflare 账号

      Cloudflare 官网:https://dash.cloudflare.com

    • 第二步,将域名托管到 CloudFlare 中,并获取区域 ID

      如果没有也行,可以使用自动分配的域名,但是后续发布文章时,自动清除缓存会无法使用,问题不大

      托管域名:过程略,自行 baidu 或 google

      获取区域 ID:如域名已托管到 CloudFlare 中,进入域名站点管理页面,页面向下滑动,记录右侧的“区域 ID”的值,后续会用到。

    • 第三步,获取清除缓存 API 令牌

      打开API 令牌管理页面,点击“创建令牌”按钮,页面拉到最下面,点击“创建自定义令牌”后面的“开始使用”按钮,按以下方式填写。

      令牌名字:CFBlog-plus
      缓存权限:区域 -> 缓存清除 -> 清除
      区域资源:包括 -> 特定区域 ->  [您的域名] 
      

      7e3b64a933ceca9af8708.png

      908cede94ae45c22824ab.png 257b5ccd3376a02793808.png

      4dce9639285562ebb3908.png

      token 留下备用

    • 第四步,新建 KV 命名空间

      打开CloudFlare 主页,点击右侧的“Workers”,然后点击“KV”项,即可进入“Worker KV”管理页面。

      在命名空间名称输入框里任意输入一个名称,为了见名知义,这里最好使用 CFBLOG 作为命名空间名称。点击添加即可。如下图所示:

      4a64f2f858cf732e05670.png

    • 第五步,创建 Workers

      点击挨着“KV”的“概述”项,进入 Workers 和 Pages 概述,点击“创建应用程序”,点击“创建 Workers”,点击“编辑代码”

      be750e530fb6362732ab3.png

      6c4732d82c391e483b478.png

      index_plus.js中的内容替换 workers 的内容。

      b87eaa8fdcda9a30dae3f.png

      先不修改配置,然后点击“保存并部署”。然后点击“<”箭头,返回该 workers 的配置页面,自行“重命名”,然后“设置”--"变量"选项卡,添加“KV 命名空间绑定”,变量名随意起,推荐用 CFBLOG ,下拉选择新添加的 KV 命名空间,点击“保存按钮”。

      752437d0294a2f983f0ea.png

      再将页面滑动上面,点击“快速编辑”,重新打开 workers 的编辑页面开始添加各类配置。

      f7039a598891d793ec193.png

      以上配置项均根据配置说明进行配置即可,不再详细说明。要记得“保存并部署”

      可以点击右侧的“预览”选项卡进行预览,能成功出现页面就说明配置成功了。

    • 第六步,配置域名访问 [非必须]

    • 参照图片

      e3e542ce0e229b155cd98.png

    保存后可以看到列表里有刚添加的信息,自此,所有配置已经完成,可以愉快的写博客了。

    4.可能遇到的问题

    • 文章 id 为ID000nan且访问会报错误

      解决方案:在创建的 KV 中修改SYSTEM_INDEX_NUM的值为0

      b1a7e185f4b827c21494c.png

    • 新增文章时,必填的分类无法选择

      解决方案:在顶部设置中,参照提示填写分类

    • 保存了,但是主页不显示文章

      解决方案:在后台直接点发布或者去 Cloudlfare 清除相关链接的缓存(自行 baidu/Google)

    5.扩展

    添加评论、阅读量、内容分类、页脚、自定义页面和图标、链接等,请自行发掘

    例子

    页脚(可以把作者信息保留,我这里因为有这篇文章介绍就不保留了)

    f7050281ebf1fe70756ea.png

    阅读量

    fee7562282c610eb113c8.png

    评论

    c88fe549e84025ab459dd.png

    图标+分类

    8029cf0cee3de73d25e54.png

    6.承载能力:

    • KV 基本不存在瓶颈,因为使用了缓存,读写很少
    • 唯一瓶颈是 workers 的日访问量 10w,大约能承受 2 万 IP /日
    • 文章数:1G 存储空间,几万篇问题不大

    7.说明

    感谢原作者的付出,觉得好用不妨给原作者一个 星星

    本文链接: https://blog.661212.xyz/index.php/archives/6/ https://cfblog.661212.xyz/article/000003/cfblog-plus.html

    最后,感谢你的阅读,谢谢

    5 条回复    2023-08-30 09:52:57 +08:00
    w210934618
        1
    w210934618  
       2023-08-29 15:00:16 +08:00
    能布置到 vercel 上吗
    sunnywangzi
        2
    sunnywangzi  
    OP
       2023-08-29 15:15:47 +08:00
    @w210934618 应该有类似的项目吧,去 GitHub 找找
    ljsh093
        3
    ljsh093  
       2023-08-29 16:17:30 +08:00
    当时就有想法可以做博客和短链没想到真有人搞,不过可惜仓库两年没人维护了
    yagamil
        4
    yagamil  
       2023-08-29 18:07:23 +08:00
    这个是动态站点了? 貌似比 hexo 的高级
    MENGKE
        5
    MENGKE  
       2023-08-30 09:52:57 +08:00
    学习了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1039 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 20:13 · PVG 04:13 · LAX 12:13 · JFK 15:13
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.